Add dark mode styling for recipes

Exactly what it says on the tin.
cc-tweaked · Aug 14, 2023 · 39779d7 · 39779d7
1 parent 84a761d
commit 39779d7
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/projects/web/src/styles.css b/projects/web/src/styles.css
@@ -131,6 +131,14 @@ div.lua-example {
     --recipe-size: 32px;
 }
 
+@media (prefers-color-scheme: dark) {
+    :root {
+        --recipe-bg: #222;
+        --recipe-fg: #444;
+        --recipe-hover: #888;
+    }
+}
+
 .recipe-container {
     display: flex;
     justify-content: center;
@@ -151,7 +159,7 @@ div.lua-example {
 }
 
 .recipe-title {
-    color: #222; /* Same as --foreground in light theme. Ugly, but too lazy to style in dark for now. */
+    color: var(--foreground);
     grid-column-start: span 3;
 }