improved light/dark toggle

nicobako · Jul 28, 2023 · 808e957 · 808e957
1 parent e0cc2d3
commit 808e957
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -35,7 +35,7 @@
 <body class="column">
 
     <h1><a href="/">Nico Bako</a></h1>
-    <button _="on click toggle @data-theme='light' on body">Dark/Light</button>
+    <button _="on click toggle @data-theme='light' on <:root/>">Dark/Light</button>
     <div class="row">
         <button hx-get="/pages/about_me/index.html" hx-target="#content" hx-trigger="load,click">About Me</button>
         <button hx-get="./pages/about_site/index.html" hx-target="#content">About Site</button>

diff --git a/static/styles.css b/static/styles.css
@@ -1,17 +1,23 @@
 /* defines css variables for use in other stylesheets */
-:root {
+html {
   /* grayscale */
   --color-darkest: rgb(25, 25, 25);
   --color-dark: rgb(50, 50, 50);
   --color-gray: rgb(128, 128, 128);
   --color-light: rgb(200, 200, 200);
   --color-lightest: rgb(240, 240, 240);
+  /* colors */
+  --color-fun: #5ca9a9;
 
   --color-back: var(--color-dark);
   --color-middle: rgb(124, 123, 123);
   --color-front: rgb(240, 240, 240);
-  --color-fun: #5ca9a9;
-  --color-morbid: rgb(133, 99, 214);
+
+}
+
+:root[data-theme='light'] {
+  --color-back: var(--color-lightest);
+  --color-front: var(--color-darkest);
 }
 
 /* html elements */
@@ -29,11 +35,6 @@ body {
   padding: 10px;
 }
 
-body[data-theme="light"] {
-  background-color: var(--color-front);
-  color: var(--color-back);
-}
-
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;