theme improvements

public/main.js

@@ -0,0 +1,50 @@
+const root = document.documentElement;
+const themeText = document.querySelector('.theme-text');
+const themeIcon = document.querySelector('.material-icons');
+
+const isDarkMode = () => root.classList.contains('dark');
+
+const setDarkMode = () => {
+  root.classList.add('dark');
+  themeText.textContent = 'Dark Mode';
+  themeIcon.innerHTML = '&#xe51c';
+};
+
+const setLightMode = () => {
+  root.classList.remove('dark');
+  themeText.textContent = 'Light Mode';
+  themeIcon.innerHTML = '&#xe518';
+};
+
+const toggleTheme = () => {
+  if (isDarkMode()) {
+    setLightMode();
+    localStorage.setItem('preferredTheme', 'light');
+  } else {
+    setDarkMode();
+    localStorage.setItem('preferredTheme', 'dark');
+  }
+};
+
+const checkPreferredTheme = () => {
+  const preferredTheme = localStorage.getItem('preferredTheme');
+  if (preferredTheme === 'dark') {
+    setDarkMode();
+  } else if (preferredTheme === 'light') {
+    setLightMode();
+  } else {
+    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    if (prefersDarkScheme) {
+      setDarkMode();
+    } else {
+      setLightMode();
+    }
+  }
+};
+
+document.querySelector("#year").innerHTML = new Date().getFullYear();
+
+checkPreferredTheme();
+
+const themeButton = document.querySelector('.theme');
+themeButton.addEventListener('click', toggleTheme);