Skip to content

Commit de6f3a1

Browse files
Sbiswas001Sbiswas001
authored
Merge pull request #40 from Gaurang-Khator/main
Added Dark/Light toggle App
2 parents 4905c7f + fd3c145 commit de6f3a1

File tree

3 files changed

+187
-0
lines changed

3 files changed

+187
-0
lines changed

‎root/dark-light-mode-toggle/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Dark/Light Mode Toggle</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body class="light-mode">
10+
<div class="container">
11+
<h1>Theme Toggle</h1>
12+
<p class="subtitle">Switch between light and dark modes</p>
13+
14+
<div class="toggle-container">
15+
<span class="icon">☀️</span>
16+
<div class="toggle-switch" id="themeToggle">
17+
<div class="toggle-slider"></div>
18+
</div>
19+
<span class="icon">🌙</span>
20+
</div>
21+
22+
</div>
23+
24+
<script src="main.js"></script>
25+
</body>
26+
</html>

‎root/dark-light-mode-toggle/main.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const themeToggle = document.getElementById('themeToggle');
2+
const body = document.body;
3+
4+
const savedTheme = window.savedTheme || 'light-mode';
5+
body.className = savedTheme;
6+
7+
themeToggle.addEventListener('click', () => {
8+
if (body.classList.contains('light-mode')) {
9+
body.classList.remove('light-mode');
10+
body.classList.add('dark-mode');
11+
window.savedTheme = 'dark-mode';
12+
} else {
13+
body.classList.remove('dark-mode');
14+
body.classList.add('light-mode');
15+
window.savedTheme = 'light-mode';
16+
}
17+
});
18+
19+
themeToggle.addEventListener('keypress', (e) => {
20+
if (e.key === 'Enter' || e.key === ' ') {
21+
themeToggle.click();
22+
}
23+
});
24+
25+
themeToggle.setAttribute('tabindex', '0');
26+
themeToggle.setAttribute('role', 'switch');
27+
themeToggle.setAttribute('aria-label', 'Toggle dark mode');

‎root/dark-light-mode-toggle/style.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9+
min-height: 100vh;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
transition: background-color 0.3s ease, color 0.3s ease;
15+
padding: 20px;
16+
}
17+
18+
body.light-mode {
19+
background: linear-gradient(135deg, #98d3ec 0%, #764ba2 100%);
20+
color: #ffffff;
21+
}
22+
23+
body.dark-mode {
24+
background: linear-gradient(135deg, #02020e 0%, #00030b 100%);
25+
color: #e0e0e0;
26+
}
27+
28+
.container {
29+
text-align: center;
30+
max-width: 600px;
31+
background: rgba(255, 255, 255, 0.1);
32+
backdrop-filter: blur(10px);
33+
padding: 60px 40px;
34+
border-radius: 30px;
35+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
36+
border: 1px solid rgba(255, 255, 255, 0.18);
37+
}
38+
39+
h1 {
40+
font-size: 2.5rem;
41+
margin-bottom: 20px;
42+
font-weight: 700;
43+
}
44+
45+
.subtitle {
46+
font-size: 1.1rem;
47+
margin-bottom: 40px;
48+
opacity: 0.9;
49+
}
50+
51+
.toggle-container {
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
gap: 20px;
56+
margin: 40px 0;
57+
}
58+
59+
.toggle-switch {
60+
position: relative;
61+
width: 80px;
62+
height: 40px;
63+
background: rgba(255, 255, 255, 0.2);
64+
border-radius: 50px;
65+
cursor: pointer;
66+
transition: background-color 0.3s ease;
67+
border: 2px solid rgba(255, 255, 255, 0.3);
68+
}
69+
70+
.toggle-switch:hover {
71+
background: rgba(255, 255, 255, 0.3);
72+
}
73+
74+
.toggle-slider {
75+
position: absolute;
76+
top: 4px;
77+
left: 4px;
78+
width: 28px;
79+
height: 28px;
80+
background: #ffffff;
81+
border-radius: 50%;
82+
transition: transform 0.3s ease;
83+
display: flex;
84+
align-items: center;
85+
justify-content: center;
86+
font-size: 14px;
87+
}
88+
89+
body.dark-mode .toggle-slider {
90+
transform: translateX(40px);
91+
}
92+
93+
.icon {
94+
font-size: 1.5rem;
95+
opacity: 0.8;
96+
}
97+
98+
.features {
99+
margin-top: 50px;
100+
display: grid;
101+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
102+
gap: 20px;
103+
}
104+
105+
.feature {
106+
padding: 20px;
107+
background: rgba(255, 255, 255, 0.1);
108+
border-radius: 15px;
109+
transition: transform 0.3s ease, background 0.3s ease;
110+
}
111+
112+
.feature:hover {
113+
transform: translateY(-5px);
114+
background: rgba(255, 255, 255, 0.15);
115+
}
116+
117+
.feature-icon {
118+
font-size: 2rem;
119+
margin-bottom: 10px;
120+
}
121+
122+
.feature-text {
123+
font-size: 0.9rem;
124+
}
125+
126+
@media (max-width: 600px) {
127+
h1 {
128+
font-size: 2rem;
129+
}
130+
131+
.container {
132+
padding: 40px 30px;
133+
}
134+
}

0 commit comments

Comments
 (0)