Skip to content

Commit a2ef5b5

Browse files
SuryakantM24SuryakantM24
committed
dark Mode Toggle
1 parent a2a55e3 commit a2ef5b5

File tree

2 files changed

+103
-0
lines changed

2 files changed

+103
-0
lines changed

‎index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@
6262
</head>
6363

6464
<body>
65+
<div class="toggle-container">
66+
<label class="toggle-switch">
67+
<input type="checkbox" id="toggle-mode" />
68+
<span class="toggle-slider"></span>
69+
</label>
70+
</div>
6571
<div class="container">
6672
<h1><a style="text-decoration: none; color: #f1c40f; margin-left: 0.25rem;" href="" onclick="location.reload();">CALCULATOR</a><img id="historybutton" src="history.png"></h1 >
6773
<div class="calculator">
@@ -113,4 +119,12 @@ <h1><a style="text-decoration: none; color: #f1c40f; margin-left: 0.25rem;" href
113119
</body>
114120
<script src="hist.js"></script>
115121
<script src="calc.js"></script>
122+
<script>
123+
const toggleMode = document.getElementById('toggle-mode');
124+
const container = document.querySelector('.container');
125+
126+
toggleMode.addEventListener('change', function() {
127+
container.classList.toggle('dark-mode');
128+
});
129+
</script>
116130
</html>

‎style.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,3 +168,92 @@ a:hover{
168168
background-color: rgba(236, 240, 241, 1.0);
169169
}
170170
}
171+
172+
.toggle-container {
173+
position: absolute;
174+
top: 1rem;
175+
left: 1rem;
176+
}
177+
178+
.toggle-switch {
179+
position: relative;
180+
display: inline-block;
181+
width: 60px;
182+
height: 34px;
183+
}
184+
185+
.toggle-switch input {
186+
opacity: 0;
187+
width: 0;
188+
height: 0;
189+
}
190+
191+
.toggle-slider {
192+
position: absolute;
193+
cursor: pointer;
194+
top: 0;
195+
left: 0;
196+
right: 0;
197+
bottom: 0;
198+
background-color: #ccc;
199+
-webkit-transition: .4s;
200+
transition: .4s;
201+
border-radius: 34px;
202+
}
203+
204+
.toggle-slider:before {
205+
position: absolute;
206+
content: "";
207+
height: 26px;
208+
width: 26px;
209+
left: 4px;
210+
bottom: 4px;
211+
background-color: rgb(233, 227, 227);
212+
-webkit-transition: .4s;
213+
transition: .4s;
214+
border-radius: 50%;
215+
}
216+
217+
input:checked + .toggle-slider {
218+
background-color: #2a2c2e;
219+
}
220+
221+
input:focus + .toggle-slider {
222+
box-shadow: 0 0 1px #2b2c2d;
223+
}
224+
225+
input:checked + .toggle-slider:before {
226+
-webkit-transform: translateX(26px);
227+
-ms-transform: translateX(26px);
228+
transform: translateX(26px);
229+
}
230+
231+
/* Dark mode styles */
232+
233+
.dark-mode {
234+
background-color: black;
235+
color: #fff;
236+
}
237+
238+
.dark-mode body,
239+
.dark-mode html {
240+
background-color: black;
241+
}
242+
243+
.dark-mode .calculator {
244+
background-color: black;
245+
}
246+
247+
.dark-mode table {
248+
color: #fff;
249+
}
250+
251+
.dark-mode button {
252+
background-color: #555;
253+
color: #fff;
254+
}
255+
256+
257+
.dark-mode a {
258+
color: #fff;
259+
}

0 commit comments

Comments
 (0)