Skip to content

Commit 9df28f7

Browse files
biswajit-sarkar-007biswajit-sarkar-007
committed
added theme toggle button for dark and light theme
1 parent 678c6c8 commit 9df28f7

3 files changed

Lines changed: 135 additions & 10 deletions

File tree

‎assets/main.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,21 @@ function applyFilters() {
5151
gridEl.innerHTML = '<p>Failed to load projects list.</p>';
5252
}
5353
})();
54+
55+
56+
const themeToggle = document.getElementById('themeToggle');
57+
const body = document.body;
58+
59+
60+
const currentTheme = localStorage.getItem('theme') || 'light';
61+
if (currentTheme === 'dark') {
62+
body.classList.add('dark-mode');
63+
}
64+
65+
themeToggle.addEventListener('click', () => {
66+
body.classList.toggle('dark-mode');
67+
68+
69+
const theme = body.classList.contains('dark-mode') ? 'dark' : 'light';
70+
localStorage.setItem('theme', theme);
71+
});

‎assets/styles.css‎

Lines changed: 100 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,30 @@
77
--accent-2: #93c5fd
88
}
99

10+
11+
body:not(.dark-mode) {
12+
--bg: #f8f9fa;
13+
--card: #ffffff;
14+
--text: #1a1a1a;
15+
--muted: #6b7280;
16+
--bg-gradient-start: #f0f4f8;
17+
--bg-gradient-end: #e2e8f0;
18+
--border: #e5e7eb;
19+
--input-bg: #ffffff;
20+
}
21+
22+
23+
body.dark-mode {
24+
--bg: #0f0f12;
25+
--card: #17171c;
26+
--text: #eef1f8;
27+
--muted: #a6adbb;
28+
--bg-gradient-start: #0b0b0e;
29+
--bg-gradient-end: #121217;
30+
--border: #262631;
31+
--input-bg: #0e0e13;
32+
}
33+
1034
* {
1135
box-sizing: border-box
1236
}
@@ -19,13 +43,15 @@ body {
1943

2044
body {
2145
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
22-
background: linear-gradient(180deg, #0b0b0e, #121217);
23-
color: var(--text)
46+
background: linear-gradient(180deg, var(--bg-gradient-start, #0b0b0e), var(--bg-gradient-end, #121217));
47+
color: var(--text);
48+
transition: background 0.3s ease, color 0.3s ease;
2449
}
2550

2651
.site-header {
2752
padding: 2rem 1rem;
28-
text-align: center
53+
text-align: center;
54+
position: relative;
2955
}
3056

3157
.site-header h1 {
@@ -42,16 +68,69 @@ body {
4268
display: flex;
4369
gap: .5rem;
4470
justify-content: center;
45-
flex-wrap: wrap
71+
flex-wrap: wrap;
72+
align-items: center;
4673
}
4774

4875
.controls input,
4976
.controls select {
5077
padding: .5rem .75rem;
5178
border-radius: .5rem;
52-
border: 1px solid #2a2a33;
53-
background: #0e0e13;
54-
color: var(--text)
79+
border: 1px solid var(--border, #2a2a33);
80+
background: var(--input-bg, #0e0e13);
81+
color: var(--text);
82+
transition: background 0.3s ease, border-color 0.3s ease;
83+
}
84+
85+
86+
.theme-toggle {
87+
background: var(--card);
88+
border: 2px solid var(--border, #262631);
89+
border-radius: 50%;
90+
width: 50px;
91+
height: 50px;
92+
cursor: pointer;
93+
display: flex;
94+
align-items: center;
95+
justify-content: center;
96+
transition: all 0.3s ease;
97+
position: fixed;
98+
top: 1rem;
99+
right: 1rem;
100+
z-index: 1000;
101+
color: var(--text);
102+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
103+
}
104+
105+
.theme-toggle:hover {
106+
transform: rotate(15deg) scale(1.1);
107+
border-color: var(--accent);
108+
box-shadow: 0 6px 16px rgba(110, 231, 183, 0.2);
109+
}
110+
111+
.theme-toggle svg {
112+
position: absolute;
113+
transition: all 0.3s ease;
114+
}
115+
116+
.theme-toggle .sun-icon {
117+
opacity: 0;
118+
transform: rotate(90deg);
119+
}
120+
121+
.theme-toggle .moon-icon {
122+
opacity: 1;
123+
transform: rotate(0deg);
124+
}
125+
126+
body:not(.dark-mode) .theme-toggle .sun-icon {
127+
opacity: 1;
128+
transform: rotate(0deg);
129+
}
130+
131+
body:not(.dark-mode) .theme-toggle .moon-icon {
132+
opacity: 0;
133+
transform: rotate(-90deg);
55134
}
56135

57136
.project-grid {
@@ -65,10 +144,11 @@ body {
65144

66145
.card {
67146
background: var(--card);
68-
border: 1px solid #262631;
147+
border: 1px solid var(--border, #262631);
69148
border-radius: .75rem;
70149
padding: 1rem;
71-
box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset
150+
box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset;
151+
transition: background 0.3s ease, border-color 0.3s ease;
72152
}
73153

74154
.card h3 {
@@ -110,5 +190,15 @@ body {
110190
padding: 2rem 1rem;
111191
text-align: center;
112192
color: var(--muted);
113-
border-top: 1px solid #22222b
193+
border-top: 1px solid var(--border, #22222b);
194+
transition: border-color 0.3s ease;
195+
}
196+
197+
.site-footer a {
198+
color: var(--accent);
199+
text-decoration: none;
200+
}
201+
202+
.site-footer a:hover {
203+
text-decoration: underline;
114204
}

‎index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,22 @@ <h1>Vanilla Verse</h1>
2121
<option value="visual">Fun UI / Visual</option>
2222
<option value="data">Mini Data</option>
2323
</select>
24+
<button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">
25+
<svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
26+
<circle cx="12" cy="12" r="5"/>
27+
<line x1="12" y1="1" x2="12" y2="3"/>
28+
<line x1="12" y1="21" x2="12" y2="23"/>
29+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
30+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
31+
<line x1="1" y1="12" x2="3" y2="12"/>
32+
<line x1="21" y1="12" x2="23" y2="12"/>
33+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
34+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
35+
</svg>
36+
<svg class="moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
37+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
38+
</svg>
39+
</button>
2440
</div>
2541
</header>
2642

@@ -37,6 +53,7 @@ <h1>Vanilla Verse</h1>
3753
</footer>
3854

3955
<script src="assets/main.js" type="module"></script>
56+
4057
</body>
4158

4259
</html>

0 commit comments

Comments
 (0)