Refactor styles for improved theme management, enhance input components, and add scene styles

app/src/utils/theme.ts

@@ -1,34 +1,31 @@
-export {};
+export { };
+
 // Function to set the theme based on user preference or system default
 function setTheme() {
-    // Check for saved theme in localStorage
     const savedTheme: string | null = localStorage.getItem('theme');
-
-    // If no saved theme, use system default preference
     const systemPrefersDark: boolean = window.matchMedia('(prefers-color-scheme: dark)').matches;
     const defaultTheme: string = savedTheme || (systemPrefersDark ? 'dark' : 'light');
-
-    // Set the theme on page load
     document.documentElement.setAttribute('data-theme', defaultTheme);
+    localStorage.setItem('theme', defaultTheme);
 }
 
-// Call the function to set the theme
+// Function to toggle the theme
+export function toggleTheme() {
+    const currentTheme: string | null = document.documentElement.getAttribute('data-theme');
+    const newTheme: string = currentTheme === 'dark' ? 'light' : 'dark';
+
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+}
+
+// Initialize theme on page load
 setTheme();
 
-// Check if the toggle button exists
-const toggleSwitch: Element | null = document.querySelector('.theme-switch');
+// Example: Call toggleTheme() when a button is clicked
+const toggleSwitch: Element | null = document.querySelector('#theme-switch');
 
 if (toggleSwitch) {
-    toggleSwitch.addEventListener('click', () => {
-        const currentTheme: string | null = document.documentElement.getAttribute('data-theme');
-
-        // Toggle between dark and light themes
-        const newTheme: string = currentTheme === 'dark' ? 'light' : 'dark';
-        document.documentElement.setAttribute('data-theme', newTheme);
-
-        // Save the new preference in localStorage
-        localStorage.setItem('theme', newTheme);
-    });
+    toggleSwitch.addEventListener('click', toggleTheme);
 } else {
     console.warn("Theme switch button not found!");
 }