diff --git a/angular.json b/angular.json
index d72e1383..e5b94850 100644
--- a/angular.json
+++ b/angular.json
@@ -37,6 +37,7 @@
               "node_modules/@fontsource/dm-sans/700.css",
               "node_modules/@fontsource/dm-sans/700-italic.css",
               "node_modules/@fontsource/dm-mono/400.css",
+              "node_modules/@fontsource/dm-mono/500.css",
               "node_modules/@feel/style/main.scss",
               "src/styles.scss"
             ],
@@ -108,6 +109,7 @@
               "node_modules/@fontsource/dm-sans/700.css",
               "node_modules/@fontsource/dm-sans/700-italic.css",
               "node_modules/@fontsource/dm-mono/400.css",
+              "node_modules/@fontsource/dm-mono/500.css",
               "node_modules/@feel/style/main.scss",
               "src/styles.scss"
             ],
diff --git a/src/scss/_kanagawa.scss b/src/scss/_kanagawa.scss
index cb2d19a4..7bb54750 100644
--- a/src/scss/_kanagawa.scss
+++ b/src/scss/_kanagawa.scss
@@ -1,52 +1,52 @@
 .comment {
   /* Subtle gray for comments */
-  color: #727169;
+  color: #5e7e85;
 }
 
 .embedded {
   /* Warm yellowish tone for embedded code */
-  color: #dca561;
+  color: #b88b00;
 }
 
 .escape {
   /* Reddish for escape characters */
-  color: #c34043;
+  color: #b85f5f;
 }
 
 .function {
   /* Soft blue for function names */
-  color: #7e9cd8;
+  color: #4c8cff;
 }
 
 .function-builtin {
   /* Orange for built-in functions */
-  color: #ff9e3b;
+  color: #ff8f00;
 }
 
 .keyword {
   /* Bright yellow/orange for keywords */
-  color: #ffa066;
-  font-weight: bold;
+  color: #d19a66;
+  font-weight: 500;
 }
 
 .number {
   /* Reddish for numbers */
-  color: #ff5d62;
+  color: #e06c75;
 }
 
 .operator {
   /* Pinkish-red for operators */
-  color: #e46876;
+  color: #d55fde;
 }
 
 .property {
   /* Golden yellow for properties */
-  color: #dca561;
+  color: #b88b00;
 }
 
 .punctuation-bracket {
   /* Purplish tone for brackets */
-  color: #a093c7;
+  color: #a39eeb;
 }
 
 .punctuation-delimiter {
@@ -61,31 +61,124 @@
 
 .string {
   /* Green for strings */
-  color: #98bb6c;
+  color: #50b482;
 }
 
 .string-special-path {
   /* Orange for special strings (path) */
-  color: #ffa066;
+  color: #d19a66;
 }
 
 .string-special-uri {
   /* Bright orange for URIs */
-  color: #ff9e3b;
+  color: #ff8f00;
 }
 
 .variable {
   /* Neutral white for variables */
-  color: #dca561;
-  //color: #dcd7ba;
+  color: #b88b00;
 }
 
 .variable-builtin {
   /* Bright orange for built-in variables */
-  color: #ff9e3b;
+  color: #ff8f00;
 }
 
 .variable-parameter {
   /* Soft blue for function parameters */
-  color: #7e9cd8;
+  color: #4c8cff;
+}
+
+@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: 500;
+  }
+
+  .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;
+  }
 }