feat: implement dark mode

1 files changed, 60 insertions, 28 deletions

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};
 }