Color scheme in dark is not good. make it more classsy and classic. Where is light mode add this and a toggle in menu bar.

components/footer.js

@@ -28,12 +28,11 @@ class CustomFooter extends HTMLElement {
                     margin-bottom: 1.5rem;
                     display: block;
                 }
-                
                 .footer-logo span {
-                    color: #10b981;
+                    color: var(--gold-dark);
+                    transition: color 0.3s ease;
                 }
-                
-                .footer-description {
+.footer-description {
                     font-size: 0.9rem;
                     line-height: 1.6;
                     margin-bottom: 1.5rem;

components/navbar.js

@@ -33,12 +33,11 @@ class CustomNavbar extends HTMLElement {
                     color: white;
                     text-decoration: none;
                 }
-                
                 .logo span {
-                    color: #10b981;
+                    color: var(--gold-dark);
+                    transition: color 0.3s ease;
                 }
-                
-                .nav-links {
+.nav-links {
                     display: flex;
                     gap: 2rem;
                 }

index.html

@@ -9,40 +9,40 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <script>
+<script>
         tailwind.config = {
             darkMode: 'class',
             theme: {
                 extend: {
                     colors: {
                         primary: {
-                            50: '#f8fafc',
-                            100: '#f1f5f9',
-                            200: '#e2e8f0',
-                            300: '#cbd5e1',
-                            400: '#94a3b8',
-                            500: '#64748b',
-                            600: '#475569',
-                            700: '#334155',
-                            800: '#1e293b',
-                            900: '#0f172a',
+                            50: '#f9f5f0',
+                            100: '#f0e6d8',
+                            200: '#e8d8c0',
+                            300: '#d8c8a8',
+                            400: '#c0b090',
+                            500: '#a89878',
+                            600: '#908060',
+                            700: '#786848',
+                            800: '#605030',
+                            900: '#483820',
                         },
                         secondary: {
-                            50: '#ecfdf5',
-                            100: '#d1fae5',
-                            200: '#a7f3d0',
-                            300: '#6ee7b7',
-                            400: '#34d399',
-                            500: '#10b981',
-                            600: '#059669',
-                            700: '#047857',
-                            800: '#065f46',
-                            900: '#064e3b',
+                            50: '#f5f0e6',
+                            100: '#e6d8c0',
+                            200: '#d8c8a8',
+                            300: '#c0b090',
+                            400: '#a89878',
+                            500: '#c19a6b',
+                            600: '#a08050',
+                            700: '#806040',
+                            800: '#604830',
+                            900: '#403020',
                         },
                         accent: {
-                            500: '#10b981',
-                            600: '#059669',
-                            700: '#047857',
+                            500: '#c19a6b',
+                            600: '#a08050',
+                            700: '#806040',
                         }
                     }
                 }

script.js

@@ -18,6 +18,7 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 // Dark/Light mode toggle
 function toggleDarkMode() {
     const isDark = document.documentElement.classList.toggle('dark');
+    document.documentElement.classList.toggle('light', !isDark);
     localStorage.setItem('darkMode', isDark);
     updateModeIcon(isDark);
 }
@@ -36,13 +37,26 @@ const storedMode = localStorage.getItem('darkMode');
 
 if (storedMode === null) {
     document.documentElement.classList.toggle('dark', prefersDark);
+    document.documentElement.classList.toggle('light', !prefersDark);
     localStorage.setItem('darkMode', prefersDark);
 } else if (storedMode === 'false') {
     document.documentElement.classList.remove('dark');
+    document.documentElement.classList.add('light');
+} else {
+    document.documentElement.classList.add('dark');
+    document.documentElement.classList.remove('light');
 }
 
 // Update icon on load
 updateModeIcon(document.documentElement.classList.contains('dark'));
+
+// Add event listener to mode toggle
+document.addEventListener('DOMContentLoaded', () => {
+    const toggle = document.querySelector('#darkModeToggle');
+    if (toggle) {
+        toggle.addEventListener('click', toggleDarkMode);
+    }
+});
 // Intersection Observer for animations
 const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {

style.css

@@ -4,13 +4,15 @@ html {
     scroll-behavior: smooth;
 }
 :root {
-    --primary-light: #f8fafc;
-    --secondary-light: #e2e8f0;
-    --text-light: #1e293b;
-    --primary-dark: #0f172a;
-    --secondary-dark: #1e293b;
-    --text-dark: #f8fafc;
-    --accent-color: #10b981;
+    --primary-light: #f9f5f0;
+    --secondary-light: #e8e0d7;
+    --text-light: #2a2118;
+    --primary-dark: #1a1a1a;
+    --secondary-dark: #2a2a2a;
+    --text-dark: #e8e0d7;
+    --accent-color: #c19a6b;
+    --gold-light: #d4af37;
+    --gold-dark: #c19a6b;
 }
 
 body {
@@ -23,6 +25,18 @@ body {
     background-color: var(--primary-dark);
     color: var(--text-dark);
 }
+
+.light .logo span,
+.light .footer-logo span,
+.light .text-secondary-500 {
+    color: var(--gold-light);
+}
+
+.dark .logo span,
+.dark .footer-logo span,
+.dark .text-secondary-500 {
+    color: var(--gold-dark);
+}
 h1, h2, h3, h4, .font-serif {
     font-family: 'Playfair Display', serif;
 }