Add logo to demo site

Author: bramus

demo/img/logo-dark.svg

@@ -34,6 +34,10 @@
         </button>
     </div>
     <header>
+        <span class="h1-logo-icon">
+            <img class="logo-light" src="img/logo.svg" alt="View Transitions Toolkit Logo" height="200" width="200">
+            <img class="logo-dark" src="img/logo-dark.svg" alt="View Transitions Toolkit Logo" height="200" width="200">
+        </span>
         <h1>View Transitions Toolkit</h1>
         <p class="description">
             A collection of utility functions to more easily work with View Transitions.

demo/img/logo.svg

@@ -111,6 +111,61 @@ h1 {
   line-height: 1.1;
 }
 
+.h1-logo-icon {
+  display: inline-block;
+  width: 20rem;
+  height: 20rem;
+  vertical-align: middle;
+  margin-right: 0.5rem;
+  position: relative;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+html[data-theme="light"] .h1-logo-icon {
+  .logo-light {
+    display: inline-block;
+  }
+
+  .logo-dark {
+    display: none;
+  }
+}
+
+html[data-theme="dark"] .h1-logo-icon {
+  .logo-light {
+    display: none;
+  }
+
+  .logo-dark {
+    display: inline-block;
+  }
+}
+
+html[data-theme="system"] .h1-logo-icon {
+  @media (prefers-color-scheme: light) {
+    .logo-light {
+      display: inline-block;
+    }
+
+    .logo-dark {
+      display: none;
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    .logo-light {
+      display: none;
+    }
+
+    .logo-dark {
+      display: inline-block;
+    }
+  }
+}
+
 .description {
   font-size: 1.25rem;
   color: var(--text-secondary);