From cc89534da65af2165ae39621c38841535cd4daf3 Mon Sep 17 00:00:00 2001
From: Yeghro <130201060+Yeghro@users.noreply.github.com>
Date: Fri, 24 Jan 2025 23:23:05 -0800
Subject: [PATCH] Users light/dark preferrence will be stored so it doesn't
 change when they refresh

---
 script.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index 63d1bbf..1381ce0 100644
--- a/script.js
+++ b/script.js
@@ -2,13 +2,34 @@
 const darkModeToggle = document.getElementById('darkModeToggle');
 const body = document.body;
 
-darkModeToggle.addEventListener('click', () => {
-    body.dataset.theme = body.dataset.theme === 'dark' ? 'light' : 'dark';
+// Initialize theme from localStorage or system preference
+document.addEventListener('DOMContentLoaded', () => {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+        body.dataset.theme = savedTheme;
+    } else {
+        // Check system preference if no saved theme
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        body.dataset.theme = prefersDark ? 'dark' : 'light';
+        localStorage.setItem('theme', body.dataset.theme);
+    }
+    
+    // Update toggle button icon
     darkModeToggle.innerHTML = body.dataset.theme === 'dark' 
         ? '<i class="fas fa-sun"></i>' 
         : '<i class="fas fa-moon"></i>';
 });
 
+darkModeToggle.addEventListener('click', () => {
+    const newTheme = body.dataset.theme === 'dark' ? 'light' : 'dark';
+    body.dataset.theme = newTheme;
+    localStorage.setItem('theme', newTheme);
+    
+    darkModeToggle.innerHTML = newTheme === 'dark' 
+        ? '<i class="fas fa-sun"></i>' 
+        : '<i class="fas fa-moon"></i>';
+});
+
 // Mobile menu toggle
 const menuToggle = document.getElementById('menuToggle');
 const sidebar = document.querySelector('.sidebar');