feat: implement dark mode

1 files changed, 47 insertions, 23 deletions

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index ce629f7..3d1eb50 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -147,26 +147,50 @@ $spacings: ();
 // Colors
 //============================================================================
 
-$color_black: hsl(207, 47%, 11%);
-$color_blue: hsl(206, 75%, 31%);
-$color_blue-o30: hsla(206, 75%, 31%, 0.3);
-$color_blue-bright: hsl(206, 77%, 36%);
-$color_blue-brighter: hsl(200, 75%, 45%);
-$color_blue-dark: hsl(206, 76%, 25%);
-$color_blue-darker: hsl(206, 60%, 20%);
-$color_grey: hsl(206, 15%, 80%);
-$color_grey-bright: hsl(206, 20%, 86%);
-$color_grey-brighter: hsl(206, 20%, 92%);
-$color_grey-dark: hsla(206, 10%, 25%);
-$color_grey-dark-o70: hsla(206, 10%, 25%, 0.7);
-$color_grey-dark-o40: hsla(206, 10%, 25%, 0.4);
-$color_grey-dark-o20: hsla(206, 10%, 25%, 0.2);
-$color_white: hsl(206, 15%, 97%);
-$color_white-o90: hsl(206, 15%, 97%, 0.9);
-$color_orange: hsl(28, 91%, 22%);
-$color_red: hsl(1, 72%, 29%);
-$color_green: hsl(105, 90%, 16%);
-$color_magenta: hsl(322, 80%, 28%);
-$color_purple: hsl(282, 84%, 31%);
-$color_yellow: hsl(49, 90%, 16%);
-$color_cyan: hsl(187, 84%, 17%);
+$light-theme_black: hsl(207, 47%, 11%);
+$light-theme_blue: hsl(206, 75%, 31%);
+$light-theme_blue-o30: hsla(206, 75%, 31%, 0.3);
+$light-theme_blue-bright: hsl(206, 77%, 36%);
+$light-theme_blue-brighter: hsl(206, 70%, 49%);
+$light-theme_blue-dark: hsl(206, 76%, 28%);
+$light-theme_blue-darker: hsl(206, 60%, 20%);
+$light-theme_grey: hsl(206, 15%, 80%);
+$light-theme_grey-bright: hsl(206, 20%, 86%);
+$light-theme_grey-brighter: hsl(206, 20%, 92%);
+$light-theme_grey-dark: hsla(206, 10%, 25%);
+$light-theme_grey-dark-o70: hsla(206, 10%, 25%, 0.7);
+$light-theme_grey-dark-o40: hsla(206, 10%, 25%, 0.4);
+$light-theme_grey-dark-o20: hsla(206, 10%, 25%, 0.2);
+$light-theme_white: hsl(206, 15%, 97%);
+$light-theme_white-o90: hsl(206, 15%, 97%, 0.9);
+$light-theme_orange: hsl(28, 91%, 22%);
+$light-theme_red: hsl(1, 72%, 29%);
+$light-theme_green: hsl(105, 90%, 16%);
+$light-theme_magenta: hsl(322, 80%, 28%);
+$light-theme_purple: hsl(282, 84%, 31%);
+$light-theme_yellow: hsl(49, 90%, 16%);
+$light-theme_cyan: hsl(187, 84%, 17%);
+
+$dark-theme_black: hsl(208, 25%, 11%);
+$dark-theme_black-o90: hsla(208, 25%, 11%, 0.9);
+$dark-theme_black-bright: hsl(208, 21%, 15%);
+$dark-theme_black-brighter: hsl(208, 18%, 20%);
+$dark-theme_blue: hsl(200, 50%, 68%);
+$dark-theme_blue-o30: hsla(200, 60%, 70%, 0.3);
+$dark-theme_blue-bright: hsl(200, 55%, 70%);
+$dark-theme_blue-brighter: hsl(200, 66%, 81%);
+$dark-theme_blue-dark: hsl(200, 45%, 64%);
+$dark-theme_blue-darker: hsl(200, 16%, 62%);
+$dark-theme_grey: hsl(208, 10%, 70%);
+$dark-theme_grey-dark: hsl(208, 20%, 25%);
+$dark-theme_grey-dark-o70: hsla(208, 20%, 25%, 0.7);
+$dark-theme_grey-dark-o40: hsla(208, 20%, 25%, 0.4);
+$dark-theme_grey-dark-o20: hsla(208, 20%, 25%, 0.2);
+$dark-theme_white: hsl(208, 25%, 92%);
+$dark-theme_orange: hsl(35, 55%, 66%);
+$dark-theme_red: hsl(2, 70%, 76%);
+$dark-theme_green: hsl(100, 55%, 65%);
+$dark-theme_magenta: hsl(318, 55%, 78%);
+$dark-theme_purple: hsl(270, 60%, 78%);
+$dark-theme_yellow: hsl(50, 60%, 65%);
+$dark-theme_cyan: hsl(180, 60%, 68%);