updated how light/dark mode is handled

sass/style.scss

@@ -13,12 +13,18 @@
 body {
   background: var(--bg-0);
   color: var(--fg-1);
+  
 
   font-size: 16px;
   line-height: 1.6em;
   letter-spacing: .5px;
 }
 
+::selection {
+  background: var(--text-highlight);
+  color: var(--fg-0);
+}
+
 .content {
   margin-bottom: 4em;
   margin-left: auto;
@@ -87,10 +93,9 @@ h6 {
   font-size: 1rem;
 }
 
-code {
+code:not([data-lang]) {
   background: var(--grey-dark);
   border-radius: 3px;
-  font-family: 'Berkeley Mono';
   padding: .15rem .3rem;
 }
 

sass/theme.scss

@@ -1,15 +1,65 @@
+@media (prefers-color-scheme: dark) {
+    * {
+        color-scheme: dark!important;
+    }
+}
+:root[data-theme="dark"] {
+    * {
+        color-scheme: dark!important;
+    }
+}
 
+@media (prefers-color-scheme: light) {
+    * {
+        color-scheme: light!important;
+    }
+}
+:root[data-theme="light"] {
+    * {
+        color-scheme: light!important;
+    }
+}
+
+* {
+    transition: color linear 0.25s;
+    transition: background-color linear 0.25s;
+}
+
+.giallo{
+    background-color: var(--bg-1)!important;
+    overflow: auto; 
+    border-radius: 5px; 
+}
+
+.giallo-l {
+    display: inline-block;
+    min-height: 1lh;
+    width: 100%;
+}
+.giallo-ln {
+    display: inline-block;
+    user-select: none;
+    margin-right: 0.4em;
+    min-width: 3ch;
+    border-right: solid var(--grey-light) 1px;
+    text-align: right;
+    opacity: 0.8;
+}
 
 :root {
-    --bg-0: #1d1d1d;
-    --bg-1: #131313;
+    --bg-0: light-dark(#fff, #1d1d1d);
+    --bg-1: light-dark(#eee, #131313);
 
-    --grey-light: #777;
-    --grey-dark: #24292E;
+    --grey-light: light-dark(#a4a4a4, #777);
+    --grey-dark: light-dark(#969696, #24292E);
     
-    --fg-0: #eee;
-    --fg-1: #ccc;
-    --fg-2: #999;
+    --fg-0: light-dark(#111, #eee);
+    --fg-1: light-dark(#333, #ccc);
+    --fg-2: light-dark(#555, #999);
+
+    --primary: light-dark(#ffd979, #daa520);
+    --text-highlight:  color-mix(in srgb-linear, var(--primary) 50%, transparent);
+}
+
+
 
-    --primary: #daa520
-}