update website with better performance and styles

darkmode.js

@@ -1,26 +1,31 @@
-const darkModeToggle = document.getElementById('dark-mode-toggle');
-localStorage.setItem('darkMode', 'disabled');
-if (localStorage.getItem('darkMode') === 'enabled') {
-  document.body.classList.add('dark-mode');
-}
-darkModeToggle.addEventListener('click', () => {
-  document.body.classList.toggle('dark-mode');
-  darkModeToggle.classList.toggle('dark-mode');
-  if (document.body.classList.contains('dark-mode')) {
-    localStorage.setItem('darkMode', 'enabled');
-    darkModeToggle.style.color = "black";
-    darkModeToggle.innerHTML = "☀️<br>Toggle Light Mode";
-  } else {
-    localStorage.setItem('darkMode', 'disabled');
-    darkModeToggle.style.color = "white";
-    darkModeToggle.innerHTML = "🌙<br>Toggle Dark Mode";
-  }
-});
-
-enterButton.addEventListener('click', () => {
-  if (document.body.classList.contains('dark-mode')) {
-    document.body.style.backgroundColor = "black";
-  } else {
-    document.body.style.backgroundColor = "white";
-  }
-});
+const darkModeToggle = document.getElementById('dark-mode-toggle');
+const themeIcon = darkModeToggle.querySelector('.theme-icon');
+const themeLabel = darkModeToggle.querySelector('.theme-label');
+
+function applyTheme(isDark) {
+    document.body.classList.toggle('dark-mode', isDark);
+    darkModeToggle.setAttribute('aria-pressed', String(isDark));
+    themeIcon.textContent = isDark ? '☀' : '☾';
+    themeLabel.textContent = isDark ? 'Light mode' : 'Dark mode';
+    document.querySelector('meta[name="theme-color"]').content = isDark ? '#0d1828' : '#e9f3fb';
+    window.dispatchEvent(new Event('themechange'));
+}
+
+let savedTheme;
+try {
+    savedTheme = localStorage.getItem('darkMode');
+} catch {
+    savedTheme = null;
+}
+
+applyTheme(savedTheme === 'enabled' || (savedTheme === null && window.matchMedia('(prefers-color-scheme: dark)').matches));
+
+darkModeToggle.addEventListener('click', () => {
+    const isDark = !document.body.classList.contains('dark-mode');
+    applyTheme(isDark);
+    try {
+        localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
+    } catch {
+        // The chosen theme remains active for this visit when storage is unavailable.
+    }
+});