code: add light theme

Author: MarcelCoding

src/scss/_kanagawa.scss

@@ -1,91 +1,184 @@
 .comment {
+  color: #5e7e85;
   /* Subtle gray for comments */
-  color: #727169;
 }
 
 .embedded {
+  color: #b88b00;
   /* Warm yellowish tone for embedded code */
-  color: #dca561;
 }
 
 .escape {
+  color: #b85f5f;
   /* Reddish for escape characters */
-  color: #c34043;
 }
 
 .function {
+  color: #4c8cff;
   /* Soft blue for function names */
-  color: #7e9cd8;
 }
 
 .function-builtin {
+  color: #ff8f00;
   /* Orange for built-in functions */
-  color: #ff9e3b;
 }
 
 .keyword {
+  color: #d19a66;
   /* Bright yellow/orange for keywords */
-  color: #ffa066;
   font-weight: bold;
 }
 
 .number {
+  color: #e06c75;
   /* Reddish for numbers */
-  color: #ff5d62;
 }
 
 .operator {
+  color: #d55fde;
   /* Pinkish-red for operators */
-  color: #e46876;
 }
 
 .property {
+  color: #b88b00;
   /* Golden yellow for properties */
-  color: #dca561;
 }
 
 .punctuation-bracket {
+  color: #a39eeb;
   /* Purplish tone for brackets */
-  color: #a093c7;
 }
 
 .punctuation-delimiter {
-  /* Neutral beige for punctuation */
   color: #c8c093;
+  /* Neutral beige for punctuation */
 }
 
 .punctuation-special {
-  /* Light ivory for special punctuation */
   color: #e2d3ba;
+  /* Light ivory for special punctuation */
 }
 
 .string {
+  color: #50b482;
   /* Green for strings */
-  color: #98bb6c;
 }
 
 .string-special-path {
+  color: #d19a66;
   /* Orange for special strings (path) */
-  color: #ffa066;
 }
 
 .string-special-uri {
+  color: #ff8f00;
   /* Bright orange for URIs */
-  color: #ff9e3b;
 }
 
 .variable {
+  color: #b88b00;
   /* Neutral white for variables */
-  color: #dca561;
-  //color: #dcd7ba;
 }
 
 .variable-builtin {
+  color: #ff8f00;
   /* Bright orange for built-in variables */
-  color: #ff9e3b;
 }
 
 .variable-parameter {
+  color: #4c8cff;
   /* Soft blue for function parameters */
-  color: #7e9cd8;
+}
+
+@media (prefers-color-scheme: dark) {
+  .comment {
+    /* Subtle gray for comments */
+    color: #727169;
+  }
+
+  .embedded {
+    /* Warm yellowish tone for embedded code */
+    color: #dca561;
+  }
+
+  .escape {
+    /* Reddish for escape characters */
+    color: #c34043;
+  }
+
+  .function {
+    /* Soft blue for function names */
+    color: #7e9cd8;
+  }
+
+  .function-builtin {
+    /* Orange for built-in functions */
+    color: #ff9e3b;
+  }
+
+  .keyword {
+    /* Bright yellow/orange for keywords */
+    color: #ffa066;
+    font-weight: bold;
+  }
+
+  .number {
+    /* Reddish for numbers */
+    color: #ff5d62;
+  }
+
+  .operator {
+    /* Pinkish-red for operators */
+    color: #e46876;
+  }
+
+  .property {
+    /* Golden yellow for properties */
+    color: #dca561;
+  }
+
+  .punctuation-bracket {
+    /* Purplish tone for brackets */
+    color: #a093c7;
+  }
+
+  .punctuation-delimiter {
+    /* Neutral beige for punctuation */
+    color: #c8c093;
+  }
+
+  .punctuation-special {
+    /* Light ivory for special punctuation */
+    color: #e2d3ba;
+  }
+
+  .string {
+    /* Green for strings */
+    color: #98bb6c;
+  }
+
+  .string-special-path {
+    /* Orange for special strings (path) */
+    color: #ffa066;
+  }
+
+  .string-special-uri {
+    /* Bright orange for URIs */
+    color: #ff9e3b;
+  }
+
+  .variable {
+    /* Neutral white for variables */
+    color: #dca561;
+    //color: #dcd7ba;
+  }
+
+  .variable-builtin {
+    /* Bright orange for built-in variables */
+    color: #ff9e3b;
+  }
+
+  .variable-parameter {
+    /* Soft blue for function parameters */
+    color: #7e9cd8;
+  }
 }