1 files changed, 42 insertions, 15 deletions

diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 106032c..38ac11f 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -1,22 +1,49 @@
-:root {
-  --base00: #fff;
-  --base01: #f5f5f5;
+:root,
+[data-bs-theme="light"] {
+  // --base00: #fff;
+  // --base01: #f5f5f5;
   --base02: #c8c8fa;
   --base03: #565c64;
-  --base04: #030303;
+  --base04: #666;
   --base05: #333;
   --base06: #fff;
-  --base07: #9a6700;
-  --base08: #bc4c00;
-  --base09: #087990;
-  --base0A: #795da3;
-  --base0B: #183691;
-  --base0C: #183691;
-  --base0D: #795da3;
-  --base0E: #a71d5d;
+  --base07: #{$teal-700}; // #9a6700
+  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+  --base09: #{$cyan-700}; // #087990
+  --base0A: #{$purple-500}; // #795da3
+  --base0B: #{$blue-700}; // #183691
+  --base0C: #{$blue-700}; // #183691
+  --base0D: #{$purple-500}; // #795da3
+  --base0E: #{$pink-600}; // #a71d5d
   --base0F: #333;
 }
 
+@include color-mode(dark, true) {
+  // --base00: #282c34;
+  // --base01: #353b45;
+  --base02: #3e4451;
+  --base03: #868e96;
+  --base04: #868e96;
+  --base05: #abb2bf;
+  --base06: #b6bdca;
+  --base07: #{$orange-300}; // #d19a66
+  --base08: #{$cyan-300};
+  --base09: #{$orange-300}; // #d19a66
+  --base0A: #{$yellow-200}; // #e5c07b
+  --base0B: #{$teal-300}; // #98c379
+  --base0C: #{$teal-300}; // #56b6c2
+  --base0D: #{$blue-300}; // #61afef
+  --base0E: #{$indigo-200}; // #c678dd
+  --base0F: #{$red-300}; // #be5046
+
+  .language-diff .gd {
+    color: $red-400;
+  }
+  .language-diff .gi {
+    color: $green-400;
+  }
+}
+
 .hl { background-color: var(--base02); }
 .c { color: var(--base03); }
 .err { color: var(--base08); }
@@ -33,7 +60,7 @@
 .ge { font-style: italic; }
 .gh {
   font-weight: 600;
-  color: #fff;
+  color: var(--base0A);
 }
 .gi { color: var(--bs-success); }
 .gp {
@@ -101,14 +128,14 @@
   .language-bash,
   .language-sh {
     .line::before {
-      color: #777;
+      color: var(--base03);
       content: "$ ";
       user-select: none;
     }
   }
 
   .language-powershell::before {
-    color: #009;
+    color: var(--base0C);
     content: "PM> ";
     user-select: none;
   }