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-muted: #9e7d5e; /* Muted coffee tones */
+    --fgColor-default: #4e3629;
+    --fgColor-muted: #9e7d5e;
     --fgColor-accent: #0969da;
-    --fgColor-success: #8f5222; /* Coffee inspired greenish brown */
-    --fgColor-attention: #b97a2d; /* Coffee caramel accent */
+    --fgColor-success: #8f5222;
+    --fgColor-attention: #b97a2d;
     --fgColor-danger: #d1242f;
     --fgColor-done: #8250df;
-    --bgColor-default: #fff5e1; /* Coffee beige */
-    --bgColor-muted: #e3d4b3; /* Light coffee */
-    --bgColor-neutral-muted: #a38f5c; /* Soft coffee brown */
-    --bgColor-attention-muted: #f9e6be; /* Caramel tones */
+    --bgColor-default: #fff5e1;
+    --bgColor-muted: #e3d4b3;
+    --bgColor-neutral-muted: #a38f5c;
+    --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;
@@ -128,7 +133,7 @@
   margin: 0;
   color: var(--fgColor-default);
   background-color: var(--bgColor-default);
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   font-size: 16px;
   line-height: 1.5;
   word-wrap: break-word;
@@ -1096,7 +1101,7 @@
 .markdown-body g-emoji {
   display: inline-block;
   min-width: 1ch;
-  font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1em;
   font-style: normal !important;
   font-weight: var(--base-text-weight-normal, 400);
@@ -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;