implement saving settings & implement theme chooser

settings.js

@@ -0,0 +1,97 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // all available settings
+    const fontInputs = document.querySelectorAll('input[name="font-setting"]');
+    const themeInputs = document.querySelectorAll('input[name="theme-setting"]');
+    const uncapitalizationCheckbox = document.getElementById('uncapitalization');
+    const disableBgCheckbox = document.getElementById('disable-bg');
+    const disableFocusAnimationsCheckbox = document.getElementById('disable-focus-animations');
+    const disableAlttextCheckbox = document.getElementById('disable-alttext');
+    
+    // load saved settings
+    loadSettings();
+    applyTheme();
+    
+    // event listeners on all inputs
+    fontInputs.forEach(input => {
+        input.addEventListener('change', saveSettings);
+    });
+    
+    themeInputs.forEach(input => {
+        input.addEventListener('change', function() {
+            saveSettings();
+            applyTheme();
+        });
+    });
+    
+    uncapitalizationCheckbox.addEventListener('change', saveSettings);
+    disableBgCheckbox.addEventListener('change', saveSettings);
+    disableFocusAnimationsCheckbox.addEventListener('change', saveSettings);
+    disableAlttextCheckbox.addEventListener('change', saveSettings);
+    
+    // settings saving function
+    function saveSettings() {
+        // save font setting
+        const selectedFont = document.querySelector('input[name="font-setting"]:checked').id;
+        localStorage.setItem('accessibility-font', selectedFont);
+        
+        // save theme setting
+        const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value;
+        localStorage.setItem('accessibility-theme', selectedTheme);
+        
+        // save toggle states
+        localStorage.setItem('accessibility-uncapitalization', uncapitalizationCheckbox.checked);
+        localStorage.setItem('accessibility-disable-bg', disableBgCheckbox.checked);
+        localStorage.setItem('accessibility-disable-focus-animations', disableFocusAnimationsCheckbox.checked);
+        localStorage.setItem('accessibility-disable-alttext', disableAlttextCheckbox.checked);
+    }
+    
+    // settings loading function
+    function loadSettings() {
+        // load the font setting
+        const savedFont = localStorage.getItem('accessibility-font');
+        if (savedFont) {
+            const fontInput = document.getElementById(savedFont);
+            if (fontInput) fontInput.checked = true;
+        }
+        
+        // load the theme setting
+        const savedTheme = localStorage.getItem('accessibility-theme');
+        if (savedTheme) {
+            const themeInput = document.querySelector(`input[name="theme-setting"][value="${savedTheme}"]`);
+            if (themeInput) themeInput.checked = true;
+        }
+        
+        // load toggle states
+        if (localStorage.getItem('accessibility-uncapitalization') === 'true') {
+            uncapitalizationCheckbox.checked = true;
+        }
+        
+        if (localStorage.getItem('accessibility-disable-bg') === 'true') {
+            disableBgCheckbox.checked = true;
+        }
+        
+        if (localStorage.getItem('accessibility-disable-focus-animations') === 'true') {
+            disableFocusAnimationsCheckbox.checked = true;
+        }
+        
+        if (localStorage.getItem('accessibility-disable-alttext') === 'true') {
+            disableAlttextCheckbox.checked = true;
+        }
+    }
+    
+    // apply the theme based on user preference
+    function applyTheme() {
+        const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value;
+        
+        // remove any existing theme
+        document.documentElement.removeAttribute('data-theme');
+        
+        // apply the selected theme
+        if (selectedTheme === 'light') {
+            document.documentElement.setAttribute('data-theme', 'light');
+        } else if (selectedTheme === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        }
+        // if auto, don't set a data-theme attribute, let the media query handle it
+    }
+});