From 68138f0dcd8b3db2c23b31a20508726f245b5ba5 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 17 Jan 2022 17:13:51 +0100 Subject: feat: implement dark mode --- src/styles/abstracts/_variables.scss | 70 ++++++++++++++++++++++++------------ 1 file changed, 47 insertions(+), 23 deletions(-) (limited to 'src/styles/abstracts/_variables.scss') 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%); -- cgit v1.2.3