aboutsummaryrefslogtreecommitdiff
path: root/js/toggle.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/toggle.js')
-rw-r--r--js/toggle.js74
1 files changed, 37 insertions, 37 deletions
diff --git a/js/toggle.js b/js/toggle.js
index 275054a..11ba783 100644
--- a/js/toggle.js
+++ b/js/toggle.js
@@ -1,61 +1,61 @@
const moon = document.getElementById('moon');
const sun = document.getElementById('sun');
-if (!document.cookie.includes('preference')) {
- setPreference(true);
+/**
+ * Check if the user has dark mode enabled
+ */
+if (localStorage.getItem('darkMode') === 'true') {
+ turnDark();
} else {
- const preference = document.cookie.split(';').find(cookie => cookie.includes('preference')).split('=')[1];
- if (preference === 'true') {
- turnLight();
- } else {
- turnDark();
- }
-
+ turnLight();
}
-function setPreference(value) {
- if (typeof value === 'boolean') {
- const expires = new Date();
- expires.setFullYear(expires.getFullYear() + 1); // 1 year
- document.cookie = `preference=${value};expires=${expires.toUTCString()};path=/`;
- turnLight();
+/**
+ * Update local storage with the current theme
+ */
+function updateLocalStorage() {
+ if (document.documentElement.classList.contains('dark')) {
+ localStorage.setItem('darkMode', 'true');
+ } else {
+ localStorage.setItem('darkMode', 'false');
}
}
+/**
+ * Toggle the theme to dark
+ */
function turnLight() {
- document.documentElement.classList.add('light');
+ document.documentElement.classList.remove('dark');
- moon.style.opacity = '0';
- sun.style.opacity = '1';
+ sun.style.display = 'none';
+ moon.style.display = 'block';
- setTimeout(() => {
- moon.style.display = 'none';
- sun.style.display = 'block';
- }
- , 100);
+ sun.style.opacity = '0';
+ moon.style.opacity = '1';
+
+ updateLocalStorage();
}
+/**
+ * Toggle the theme to light
+ */
function turnDark() {
- document.documentElement.classList.remove('light');
+ document.documentElement.classList.add('dark');
- sun.style.opacity = '0';
- moon.style.opacity = '1';
+ moon.style.display = 'none';
+ sun.style.display = 'block';
- setTimeout(() => {
- sun.style.display = 'none';
- moon.style.display = 'block';
- }
- , 100);
+ moon.style.opacity = '0';
+ sun.style.opacity = '1';
+
+ updateLocalStorage();
}
+// Check for icon clicks
moon.addEventListener('click', () => {
- document.documentElement.classList.add('light');
- setPreference(true);
- turnLight();
+ turnDark();
});
sun.addEventListener('click', () => {
- document.documentElement.classList.remove('light');
- setPreference(false);
- turnDark();
+ turnLight();
});