give users theme options because why the fuck not

index.html

@@ -38,9 +38,17 @@
                 <input type="text" id="search" placeholder="Search resources...">
                 <i class="fas fa-search"></i>
             </div>
-            <button id="darkModeToggle" class="theme-toggle" aria-label="Toggle dark mode">
+            <div class="theme-controls">
-                <i class="fas fa-moon"></i>
+                <select id="colorThemeSelect" class="theme-select" aria-label="Select color theme">
-            </button>
+                    <option value="default">Default Theme</option>
+                    <option value="purple">Purple Dream</option>
+                    <option value="nature">Nature's Touch</option>
+                    <option value="sunset">Sunset Vibes</option>
+                </select>
+                <button id="darkModeToggle" class="theme-toggle" aria-label="Toggle dark mode">
+                    <i class="fas fa-moon"></i>
+                </button>
+            </div>
         </div>
     </nav>
 

script.js

@@ -2,6 +2,78 @@
 const darkModeToggle = document.getElementById('darkModeToggle');
 const body = document.body;
 
+// Color theme definitions
+const colorThemes = {
+    default: {
+        light: {
+            primary: '#4a314d',
+            background: '#ffffff',
+            text: '#1a090d',
+            cardBackground: '#a8ba9a',
+            sidebarBackground: '#6b6570',
+            hoverColor: '#ace894'
+        },
+        dark: {
+            background: '#1a090d',
+            text: '#ace894',
+            cardBackground: '#4a314d',
+            sidebarBackground: '#6b6570',
+            linkColor: '#a8ba9a'
+        }
+    },
+    purple: {
+        light: {
+            primary: '#9c528b',
+            background: '#ffffff',
+            text: '#2f0147',
+            cardBackground: '#e2c2c6',
+            sidebarBackground: '#b9929f',
+            hoverColor: '#610f7f'
+        },
+        dark: {
+            background: '#2f0147',
+            text: '#e2c2c6',
+            cardBackground: '#9c528b',
+            sidebarBackground: '#610f7f',
+            linkColor: '#b9929f'
+        }
+    },
+    nature: {
+        light: {
+            primary: '#2c5530',
+            background: '#ffffff',
+            text: '#1a2f1c',
+            cardBackground: '#a7c4aa',
+            sidebarBackground: '#718355',
+            hoverColor: '#90a955'
+        },
+        dark: {
+            background: '#1a2f1c',
+            text: '#90a955',
+            cardBackground: '#2c5530',
+            sidebarBackground: '#718355',
+            linkColor: '#a7c4aa'
+        }
+    },
+    sunset: {
+        light: {
+            primary: '#cf5c36',
+            background: '#ffffff',
+            text: '#1f1f1f',
+            cardBackground: '#eec584',
+            sidebarBackground: '#c8963e',
+            hoverColor: '#f3a953'
+        },
+        dark: {
+            background: '#1f1f1f',
+            text: '#eec584',
+            cardBackground: '#cf5c36',
+            sidebarBackground: '#c8963e',
+            linkColor: '#f3a953'
+        }
+    }
+};
+
 // Initialize theme from localStorage or system preference
 document.addEventListener('DOMContentLoaded', () => {
     const savedTheme = localStorage.getItem('theme');
@@ -18,6 +90,20 @@ document.addEventListener('DOMContentLoaded', () => {
     darkModeToggle.innerHTML = body.dataset.theme === 'dark' 
         ? '<i class="fas fa-sun"></i>' 
         : '<i class="fas fa-moon"></i>';
+
+    const colorThemeSelect = document.getElementById('colorThemeSelect');
+    
+    // Initialize theme from localStorage
+    const savedColorTheme = localStorage.getItem('colorTheme') || 'default';
+    colorThemeSelect.value = savedColorTheme;
+    applyColorTheme(savedColorTheme);
+    
+    // Handle theme changes
+    colorThemeSelect.addEventListener('change', (e) => {
+        const selectedTheme = e.target.value;
+        localStorage.setItem('colorTheme', selectedTheme);
+        applyColorTheme(selectedTheme);
+    });
 });
 
 darkModeToggle.addEventListener('click', () => {
@@ -28,6 +114,10 @@ darkModeToggle.addEventListener('click', () => {
     darkModeToggle.innerHTML = newTheme === 'dark' 
         ? '<i class="fas fa-sun"></i>' 
         : '<i class="fas fa-moon"></i>';
+    
+    // Reapply color theme with new dark/light mode
+    const currentColorTheme = localStorage.getItem('colorTheme') || 'default';
+    applyColorTheme(currentColorTheme);
 });
 
 // Mobile menu toggle
@@ -616,4 +706,16 @@ function displaySection(sectionName, sections) {
             });
         }
     });
+}
+
+function applyColorTheme(themeName) {
+    const isDark = document.body.dataset.theme === 'dark';
+    const theme = colorThemes[themeName][isDark ? 'dark' : 'light'];
+    
+    // Apply theme colors to CSS variables
+    const root = document.documentElement;
+    Object.entries(theme).forEach(([key, value]) => {
+        const cssVar = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+        root.style.setProperty(cssVar, value);
+    });
 }

styles.css

@@ -1,23 +1,23 @@
 :root {
-    --primary-color: #6e5494;
+    --primary-color: #4a314d;
     --background-color: #ffffff;
-    --text-color: #333333;
+    --text-color: #1a090d;
-    --card-background: #f5f5f5;
+    --card-background: #a8ba9a;
-    --sidebar-background: #f8f9fa;
+    --sidebar-background: #6b6570;
-    --hover-color: #563d7c;
+    --hover-color: #ace894;
     --text-primary: var(--text-color);
     --link-color: var(--primary-color);
-    --star-color: #f1c40f;
+    --star-color: #4a314d;
 }
 
 /* Dark theme variables */
 [data-theme="dark"] {
-    --background-color: #1a1a1a;
+    --background-color: #1a090d;
-    --text-color: #ffffff;
+    --text-color: #ace894;
-    --card-background: #2d2d2d;
+    --card-background: #4a314d;
-    --sidebar-background: #252525;
+    --sidebar-background: #6b6570;
     --text-primary: var(--text-color);
-    --link-color: #ffa500;
+    --link-color: #a8ba9a;
 }
 
 * {
@@ -79,7 +79,7 @@ body {
     padding: 0.5rem 2rem 0.5rem 1rem;
     border: none;
     border-radius: 4px;
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(226, 194, 198, 0.2);
     color: white;
 }
 
@@ -230,7 +230,7 @@ body {
     line-height: 1.5;
     font-size: 0.95em;
     padding: 8px 12px;
-    background: rgba(110, 84, 148, 0.05);
+    background: rgba(156, 82, 139, 0.05);
     border-radius: 4px;
     border-left: 3px solid var(--primary-color);
 }
@@ -385,7 +385,7 @@ body {
     text-transform: capitalize;
     margin-bottom: 8px;
     padding: 2px 8px;
-    background-color: rgba(110, 84, 148, 0.1);
+    background-color: rgba(156, 82, 139, 0.1);
     border-radius: 4px;
     display: inline-block;
 }
@@ -631,7 +631,7 @@ button:focus {
 }
 
 .menu-toggle:hover {
-    background-color: var(--primary-color-dark);
+    background-color: var(--hover-color);
     transform: scale(1.05);
 }
 
@@ -653,4 +653,48 @@ button:focus {
     }
 
     /* Rest of your mobile styles... */
+}
+
+/* Theme selector styles */
+.theme-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.theme-select {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    padding: 0.4rem 0.8rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.theme-select:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.theme-select:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
+}
+
+.theme-select option {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+    .theme-controls {
+        gap: 0.5rem;
+    }
+    
+    .theme-select {
+        font-size: 0.8rem;
+        padding: 0.3rem 0.6rem;
+    }
 }