Hugging Face's logo

Spaces:
steake
/
golden-lotus-estates
Running

App Files Community
steake commited on
Commit
8d56b04
·
verified ·
1 Parent(s): 85363ff

Add Light mode for default and add toggle in menu bar. improve color scheme for dark mode making it more classy.

Browse files
Files changed (4) hide show
  1. components/navbar.js +18 -3
  2. index.html +20 -1
  3. script.js +22 -9
  4. style.css +15 -0
components/navbar.js CHANGED
@@ -70,6 +70,19 @@ class CustomNavbar extends HTMLElement {
70
  .nav-links a:hover::after {
71
  width: 100%;
72
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
73
 
74
  .mobile-menu-btn {
75
  display: none;
@@ -78,8 +91,7 @@ class CustomNavbar extends HTMLElement {
78
  color: white;
79
  cursor: pointer;
80
  }
81
-
82
- @media (max-width: 768px) {
83
  .nav-links {
84
  display: none;
85
  }
@@ -96,11 +108,14 @@ class CustomNavbar extends HTMLElement {
96
  <a href="#services">Services</a>
97
  <a href="#about">About</a>
98
  <a href="#contact">Contact</a>
 
 
 
99
  </div>
100
  <button class="mobile-menu-btn">
101
  <i data-feather="menu"></i>
102
  </button>
103
- </nav>
104
  `;
105
  }
106
  }
 
70
  .nav-links a:hover::after {
71
  width: 100%;
72
  }
73
+ .mode-toggle {
74
+ background: none;
75
+ border: none;
76
+ color: rgba(255, 255, 255, 0.8);
77
+ cursor: pointer;
78
+ padding: 0;
79
+ margin-left: 1rem;
80
+ transition: color 0.3s ease;
81
+ }
82
+
83
+ .mode-toggle:hover {
84
+ color: white;
85
+ }
86
 
87
  .mobile-menu-btn {
88
  display: none;
 
91
  color: white;
92
  cursor: pointer;
93
  }
94
+ @media (max-width: 768px) {
 
95
  .nav-links {
96
  display: none;
97
  }
 
108
  <a href="#services">Services</a>
109
  <a href="#about">About</a>
110
  <a href="#contact">Contact</a>
111
+ <button id="darkModeToggle" class="mode-toggle">
112
+ <i data-feather="moon"></i>
113
+ </button>
114
  </div>
115
  <button class="mobile-menu-btn">
116
  <i data-feather="menu"></i>
117
  </button>
118
+ </nav>
119
  `;
120
  }
121
  }
index.html CHANGED
@@ -16,11 +16,30 @@
16
  extend: {
17
  colors: {
18
  primary: {
 
 
 
 
 
19
  500: '#64748b',
20
  600: '#475569',
21
  700: '#334155',
 
 
22
  },
23
  secondary: {
 
 
 
 
 
 
 
 
 
 
 
 
24
  500: '#10b981',
25
  600: '#059669',
26
  700: '#047857',
@@ -29,7 +48,7 @@
29
  }
30
  }
31
  }
32
- </script>
33
  </head>
34
  <body class="bg-slate-900 text-slate-100 font-sans antialiased">
35
  <custom-navbar></custom-navbar>
 
16
  extend: {
17
  colors: {
18
  primary: {
19
+ 50: '#f8fafc',
20
+ 100: '#f1f5f9',
21
+ 200: '#e2e8f0',
22
+ 300: '#cbd5e1',
23
+ 400: '#94a3b8',
24
  500: '#64748b',
25
  600: '#475569',
26
  700: '#334155',
27
+ 800: '#1e293b',
28
+ 900: '#0f172a',
29
  },
30
  secondary: {
31
+ 50: '#ecfdf5',
32
+ 100: '#d1fae5',
33
+ 200: '#a7f3d0',
34
+ 300: '#6ee7b7',
35
+ 400: '#34d399',
36
+ 500: '#10b981',
37
+ 600: '#059669',
38
+ 700: '#047857',
39
+ 800: '#065f46',
40
+ 900: '#064e3b',
41
+ },
42
+ accent: {
43
  500: '#10b981',
44
  600: '#059669',
45
  700: '#047857',
 
48
  }
49
  }
50
  }
51
+ </script>
52
  </head>
53
  <body class="bg-slate-900 text-slate-100 font-sans antialiased">
54
  <custom-navbar></custom-navbar>
script.js CHANGED
@@ -15,21 +15,34 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
15
  }
16
  });
17
  });
 
 
 
 
 
 
18
 
19
- // Dark mode toggle
20
- const darkModeToggle = document.getElementById('darkModeToggle');
21
- if(darkModeToggle) {
22
- darkModeToggle.addEventListener('click', () => {
23
- document.documentElement.classList.toggle('dark');
24
- localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
25
- });
26
  }
27
 
28
- // Initialize dark mode preference
29
- if (localStorage.getItem('darkMode') === 'false') {
 
 
 
 
 
 
30
  document.documentElement.classList.remove('dark');
31
  }
32
 
 
 
33
  // Intersection Observer for animations
34
  const observer = new IntersectionObserver((entries) => {
35
  entries.forEach(entry => {
 
15
  }
16
  });
17
  });
18
+ // Dark/Light mode toggle
19
+ function toggleDarkMode() {
20
+ const isDark = document.documentElement.classList.toggle('dark');
21
+ localStorage.setItem('darkMode', isDark);
22
+ updateModeIcon(isDark);
23
+ }
24
 
25
+ function updateModeIcon(isDark) {
26
+ const icon = document.querySelector('#darkModeToggle i');
27
+ if (icon) {
28
+ icon.setAttribute('data-feather', isDark ? 'sun' : 'moon');
29
+ feather.replace();
30
+ }
 
31
  }
32
 
33
+ // Initialize mode preference
34
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
35
+ const storedMode = localStorage.getItem('darkMode');
36
+
37
+ if (storedMode === null) {
38
+ document.documentElement.classList.toggle('dark', prefersDark);
39
+ localStorage.setItem('darkMode', prefersDark);
40
+ } else if (storedMode === 'false') {
41
  document.documentElement.classList.remove('dark');
42
  }
43
 
44
+ // Update icon on load
45
+ updateModeIcon(document.documentElement.classList.contains('dark'));
46
  // Intersection Observer for animations
47
  const observer = new IntersectionObserver((entries) => {
48
  entries.forEach(entry => {
style.css CHANGED
@@ -3,11 +3,26 @@
3
  html {
4
  scroll-behavior: smooth;
5
  }
 
 
 
 
 
 
 
 
 
6
 
7
  body {
8
  font-family: 'Source Sans Pro', sans-serif;
 
 
9
  }
10
 
 
 
 
 
11
  h1, h2, h3, h4, .font-serif {
12
  font-family: 'Playfair Display', serif;
13
  }
 
3
  html {
4
  scroll-behavior: smooth;
5
  }
6
+ :root {
7
+ --primary-light: #f8fafc;
8
+ --secondary-light: #e2e8f0;
9
+ --text-light: #1e293b;
10
+ --primary-dark: #0f172a;
11
+ --secondary-dark: #1e293b;
12
+ --text-dark: #f8fafc;
13
+ --accent-color: #10b981;
14
+ }
15
 
16
  body {
17
  font-family: 'Source Sans Pro', sans-serif;
18
+ background-color: var(--primary-light);
19
+ color: var(--text-light);
20
  }
21
 
22
+ .dark body {
23
+ background-color: var(--primary-dark);
24
+ color: var(--text-dark);
25
+ }
26
  h1, h2, h3, h4, .font-serif {
27
  font-family: 'Playfair Display', serif;
28
  }