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