make light and dark theme system dependant

github-markdown.css

@@ -10,8 +10,11 @@
   --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
   --fgColor-accent: Highlight;
 }
+
 @media (prefers-color-scheme: dark) {
-  .markdown-body, [data-theme="dark"] {
+
+  .markdown-body,
+  [data-theme="dark"] {
     /* dark - Monokai Dimmed Colors */
     color-scheme: dark;
     --focus-outlineColor: #1f6feb;
@@ -66,21 +69,23 @@
 }
 
 @media (prefers-color-scheme: light) {
-  .markdown-body, [data-theme="light"] {
+
+  .markdown-body,
+  [data-theme="light"] {
     /* light - Coffee Theme */
     color-scheme: light;
     --focus-outlineColor: #0969da;
-    --fgColor-default: #4e3629; /* Coffee brown default */
+    --fgColor-default: #4e3629;
-    --fgColor-muted: #9e7d5e; /* Muted coffee tones */
+    --fgColor-muted: #9e7d5e;
     --fgColor-accent: #0969da;
-    --fgColor-success: #8f5222; /* Coffee inspired greenish brown */
+    --fgColor-success: #8f5222;
-    --fgColor-attention: #b97a2d; /* Coffee caramel accent */
+    --fgColor-attention: #b97a2d;
     --fgColor-danger: #d1242f;
     --fgColor-done: #8250df;
-    --bgColor-default: #fff5e1; /* Coffee beige */
+    --bgColor-default: #fff5e1;
-    --bgColor-muted: #e3d4b3; /* Light coffee */
+    --bgColor-muted: #e3d4b3;
-    --bgColor-neutral-muted: #a38f5c; /* Soft coffee brown */
+    --bgColor-neutral-muted: #a38f5c;
-    --bgColor-attention-muted: #f9e6be; /* Caramel tones */
+    --bgColor-attention-muted: #f9e6be;
     --borderColor-default: #d1d9e0;
     --borderColor-muted: #d1d9e0b3;
     --borderColor-neutral-muted: #d1d9e0b3;
@@ -90,13 +95,13 @@
     --borderColor-danger-emphasis: #cf222e;
     --borderColor-done-emphasis: #8250df;
     --color-prettylights-syntax-comment: #9e7d5e;
-    --color-prettylights-syntax-constant: #6e4c3b; /* Coffee brown constants */
+    --color-prettylights-syntax-constant: #6e4c3b;
     --color-prettylights-syntax-constant-other-reference-link: #8a6f5f;
     --color-prettylights-syntax-entity: #6639ba;
     --color-prettylights-syntax-storage-modifier-import: #4e3629;
     --color-prettylights-syntax-entity-tag: #6e4c3b;
     --color-prettylights-syntax-keyword: #cf222e;
-    --color-prettylights-syntax-string: #8a6f5f; /* Warm tones for strings */
+    --color-prettylights-syntax-string: #8a6f5f;
     --color-prettylights-syntax-variable: #953800;
     --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
     --color-prettylights-syntax-brackethighlighter-angle: #9e7d5e;
@@ -1224,4 +1229,3 @@
 .markdown-body .highlight pre:has(+.zeroclipboard-container) {
   min-height: 52px;
 }
-

main.css

@@ -1,9 +1,14 @@
-.light-mode {
+@media (prefers-color-scheme: light) {
+    :root {
         --background-color: #e7ddca;
         --text-color: #5b4636;
         --header-color: #8b6e4b;
         --link-color: #a47551;
         --link-hover-color: #d2a679;
+        --code-bg: #f1e6d1;
+        --code-text: #5b4636;
+        --code-border: #d2a679;
+    }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -19,6 +24,7 @@
     }
 }
 
+
 body {
     background-color: var(--background-color);
     color: var(--text-color);

md.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="/assets/main.css">
     <!-- <link rel="stylesheet" href="/assets/github-markdown-dark.css"> -->
     <!-- <link rel="stylesheet" href="/assets/github-markdown-light.css"> -->
-    <link rel="stylesheet" href="/assets/github-markdown.css">
+    <!-- <link rel="stylesheet" href="/assets/github-markdown.css"> -->
     <script>
         function themeToggle() {
             var element = document.body;