Add dark mode color scheme support

whsieh · whsieh · commit 7c80f1da9c55 · 2025-07-10T10:58:28.000-07:00
diff --git a/examples/liquid-glass.html b/examples/liquid-glass.html
@@ -8,6 +8,7 @@
             font-size: 20px;
             font-family: system-ui;
             padding: 10px;
+            background-color: #e8e8e8;
         }
 
         a {
@@ -17,6 +18,15 @@
             display: inline-block;
         }
 
+        h3 {
+            position: sticky;
+            top: 0;
+            background-color: rgba(255, 255, 255, 0.9);
+            display: inline-block;
+            padding: 0.5em;
+            border-radius: 0.5em;
+        }
+
         div + div {
             margin-top: 0.5em 0;
         }
@@ -28,9 +38,25 @@
             border: none;
         }
 
+        a {
+            color: rgb(0, 100, 255);
+            text-decoration: none;
+        }
+
         .mobile {
             color: lightgray;
         }
+
+        @media (prefers-color-scheme: dark) {
+            body, html {
+                background-color: #222;
+            }
+
+            h3 {
+                background-color: rgba(40, 40, 40, 0.9);
+                color: white;
+            }
+        }
     </style>
 </head>
 <body>
