feat: implement dark mode

3 files changed, 67 insertions, 35 deletions

diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index 890acd8..ee4a25c 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -30,7 +30,7 @@ summary {
 }
 
 * {
-  scrollbar-color: var(--color-shadow-dark) var(--color-bg-tertiary);
+  scrollbar-color: var(--color-primary) var(--color-bg-tertiary);
   scrollbar-width: auto;
 }
 
@@ -44,7 +44,7 @@ summary {
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: var(--color-shadow-dark);
+  background-color: var(--color-primary);
   border-radius: fun.convert-px(6);
   border: fun.convert-px(3) solid var(--color-bg-tertiary);
 }
@@ -63,7 +63,7 @@ body {
   border-top: max(0.4vw, fun.convert-px(6)) solid;
   border-bottom: max(0.4vw, fun.convert-px(6)) solid;
   border-image: radial-gradient(
-      ellipse at top,
+      ellipse at center,
       var(--color-primary-lighter) 20%,
       var(--color-primary) 100%
     )
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 4b11e64..e6e2612 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -1,32 +1,64 @@
 @use "@styles/abstracts/variables" as var;
 
 :root {
-  --color-bg: #{var.$color_white};
-  --color-bg-opacity: #{var.$color_white-o90};
-  --color-bg-secondary: #{var.$color_grey-brighter};
-  --color-bg-tertiary: #{var.$color_grey-bright};
-  --color-fg: #{var.$color_black};
-  --color-fg-light: #{var.$color_grey-dark};
-  --color-fg-inverted: #{var.$color_white};
-  --color-primary: #{var.$color_blue};
-  --color-primary-opacity: #{var.$color_blue-o30};
-  --color-primary-light: #{var.$color_blue-bright};
-  --color-primary-lighter: #{var.$color_blue-brighter};
-  --color-primary-dark: #{var.$color_blue-dark};
-  --color-primary-darker: #{var.$color_blue-darker};
-  --color-secondary: #{var.$color_orange};
-  --color-border: #{var.$color_grey};
-  --color-border-dark: #{var.$color_grey-dark};
-  --color-border-light: #{var.$color_grey-bright};
-  --color-shadow: #{var.$color_grey-dark-o40};
-  --color-shadow-dark: #{var.$color_grey-dark-o70};
-  --color-shadow-light: #{var.$color_grey-dark-o20};
-  --color-token-red: #{var.$color_red};
-  --color-token-green: #{var.$color_green};
-  --color-token-purple: #{var.$color_purple};
-  --color-token-magenta: #{var.$color_magenta};
-  --color-token-cyan: #{var.$color_cyan};
-  --color-token-blue: #{var.$color_blue};
-  --color-token-yellow: #{var.$color_yellow};
-  --color-token-orange: #{var.$color_orange};
+  --color-bg: #{var.$light-theme_white};
+  --color-bg-opacity: #{var.$light-theme_white-o90};
+  --color-bg-secondary: #{var.$light-theme_grey-brighter};
+  --color-bg-tertiary: #{var.$light-theme_grey-bright};
+  --color-fg: #{var.$light-theme_black};
+  --color-fg-light: #{var.$light-theme_grey-dark};
+  --color-fg-inverted: #{var.$light-theme_white};
+  --color-primary: #{var.$light-theme_blue};
+  --color-primary-opacity: #{var.$light-theme_blue-o30};
+  --color-primary-light: #{var.$light-theme_blue-bright};
+  --color-primary-lighter: #{var.$light-theme_blue-brighter};
+  --color-primary-dark: #{var.$light-theme_blue-dark};
+  --color-primary-darker: #{var.$light-theme_blue-darker};
+  --color-secondary: #{var.$light-theme_orange};
+  --color-border: #{var.$light-theme_grey};
+  --color-border-dark: #{var.$light-theme_grey-dark};
+  --color-border-light: #{var.$light-theme_grey-bright};
+  --color-shadow: #{var.$light-theme_grey-dark-o40};
+  --color-shadow-dark: #{var.$light-theme_grey-dark-o70};
+  --color-shadow-light: #{var.$light-theme_grey-dark-o20};
+  --color-token-red: #{var.$light-theme_red};
+  --color-token-green: #{var.$light-theme_green};
+  --color-token-purple: #{var.$light-theme_purple};
+  --color-token-magenta: #{var.$light-theme_magenta};
+  --color-token-cyan: #{var.$light-theme_cyan};
+  --color-token-blue: #{var.$light-theme_blue};
+  --color-token-yellow: #{var.$light-theme_yellow};
+  --color-token-orange: #{var.$light-theme_orange};
+}
+
+[data-theme="dark"] {
+  --color-bg: #{var.$dark-theme_black};
+  --color-bg-opacity: #{var.$dark-theme_black-o90};
+  --color-bg-light: #{var.$dark-theme_grey};
+  --color-bg-secondary: #{var.$dark-theme_black-bright};
+  --color-bg-tertiary: #{var.$dark-theme_black-brighter};
+  --color-fg: #{var.$dark-theme_white};
+  --color-fg-light: #{var.$dark-theme_grey};
+  --color-fg-inverted: #{var.$dark-theme_black};
+  --color-primary: #{var.$dark-theme_blue};
+  --color-primary-opacity: #{var.$dark-theme_blue-o30};
+  --color-primary-light: #{var.$dark-theme_blue-bright};
+  --color-primary-lighter: #{var.$dark-theme_blue-brighter};
+  --color-primary-dark: #{var.$dark-theme_blue-dark};
+  --color-primary-darker: #{var.$dark-theme_blue-darker};
+  --color-secondary: #{var.$dark-theme_orange};
+  --color-border: #{var.$dark-theme_grey-dark};
+  --color-border-dark: #{var.$dark-theme_grey};
+  --color-border-light: #{var.$dark-theme_black-brighter};
+  --color-shadow: #{var.$dark-theme_grey-dark-o40};
+  --color-shadow-dark: #{var.$dark-theme_grey-dark-o70};
+  --color-shadow-light: #{var.$dark-theme_grey-dark-o20};
+  --color-token-red: #{var.$dark-theme_red};
+  --color-token-green: #{var.$dark-theme_green};
+  --color-token-purple: #{var.$dark-theme_purple};
+  --color-token-magenta: #{var.$dark-theme_magenta};
+  --color-token-cyan: #{var.$dark-theme_cyan};
+  --color-token-blue: #{var.$dark-theme_blue};
+  --color-token-yellow: #{var.$dark-theme_yellow};
+  --color-token-orange: #{var.$dark-theme_orange};
 }
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index b94f67d..a6d8e50 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -160,11 +160,11 @@ a {
   &.external {
     &::after {
       display: inline-block;
-      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
     }
 
     &:focus:not(:active)::after {
-      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
     }
   }
 
@@ -178,13 +178,13 @@ a {
     &.external {
       &::after {
         content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
-            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
+            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
           ));
       }
 
       &:focus:not(:active)::after {
         content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
-            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
+            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
           ));
       }
     }