From c2c58d6faaa284189eee5fdcb0e13c33d51d1baf Mon Sep 17 00:00:00 2001 From: Rod Date: Sun, 30 Aug 2020 01:32:40 -0500 Subject: [PATCH] Added Light / Dark mode --- css/style.css | 18 +++++++++--------- index.html | 2 +- js/theme.js | 25 +++++++++++++++++++++++-- sass/main.scss | 20 +++++++++++--------- 4 files changed, 44 insertions(+), 21 deletions(-) diff --git a/css/style.css b/css/style.css index 74602a6..246e01b 100644 --- a/css/style.css +++ b/css/style.css @@ -4,21 +4,21 @@ --fsm: 85px; --fss: 30px; --fses: 18px; - --accent: #186efd60; - --bg: #1e1f21; - --sbg: #2c2d31; - --fg: #d8dee9; } + --accent: #186efdaa; + --bg: #f5f5f5; + --sbg: #e4e6e6; + --fg: #3a3a3a; } @media only screen and (max-width: 68.75em) { :root { --fsg: 100px; --fsm: 65px; --fss: 20px; } } -.lightmode { - --accent: #186efdaa; - --bg: #f5f5f5; - --sbg: #e4e6e6; - --fg: #3a3a3a; } +.darktheme { + --accent: #186efd60; + --bg: #1e1f21; + --sbg: #2c2d31; + --fg: #d8dee9; } * { margin: 0; diff --git a/index.html b/index.html index 89d7065..46a9dce 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +
diff --git a/js/theme.js b/js/theme.js index 50304fd..30bad16 100644 --- a/js/theme.js +++ b/js/theme.js @@ -2,9 +2,30 @@ let darkTheme = localStorage.getItem('darkTheme'); const themeToggle = document.querySelector('#themeButton'); const enableDark = () => { - + document.body.classList.add('darktheme'); + localStorage.setItem('darkTheme', 'enabled'); + themeToggle.innerHTML = ``; + feather.replace(); +}; + +const disableDark = () => { + document.body.classList.remove('darktheme'); + localStorage.setItem('darkTheme', null); + themeToggle.innerHTML = ``; + feather.replace(); +}; + +if (darkTheme === 'enabled') { + enableDark(); +} else { + disableDark(); } themeToggle.addEventListener('click', () => { - + darkTheme = localStorage.getItem('darkTheme'); + if (darkTheme !== 'enabled') { + enableDark(); + } else { + disableDark(); + } }); diff --git a/sass/main.scss b/sass/main.scss index 51fdc6e..8821e04 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -15,11 +15,11 @@ $bp-smallest: 31.25em; // C O L O R S - --accent: #186efd60; + --accent: #186efdaa; - --bg: #1e1f21; - --sbg: #2c2d31; - --fg: #d8dee9; + --bg: #f5f5f5; + --sbg: #e4e6e6; + --fg: #3a3a3a; @media only screen and (max-width: $bp-large) { --fsg: 100px; @@ -27,13 +27,15 @@ $bp-smallest: 31.25em; --fss: 20px; } } -.lightmode { +.darktheme { - --accent: #186efdaa; + --accent: #186efd60; + + --bg: #1e1f21; + --sbg: #2c2d31; + --fg: #d8dee9; + - --bg: #f5f5f5; - --sbg: #e4e6e6; - --fg: #3a3a3a; }