Skip to content

Commit 68a0ac4

Browse files
deep100xdeep100x
committed
Added Darkmode toggle using CSS ⭐⭐⭐⭐⭐
1 parent 460009f commit 68a0ac4

File tree

3 files changed

+91
-0
lines changed

3 files changed

+91
-0
lines changed

‎Namaste-JavaScript/EP-9-Block-Scope.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ if (true) console.log("NOT in Block");
1212
var a = 100
1313
let b = 100
1414
const c = 100
15+
let d = 10
1516
{
17+
//shadowing
18+
// var d = 10 //❌
19+
let d = 10
1620
// Hoisted in Global-Scope
1721
var a = 10
1822

‎Namaste-JavaScript/Ep-10-.js‎

Whitespace-only changes.

‎projects/Darkmode.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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>Document</title>
7+
<style>
8+
html {
9+
color-scheme: dark;
10+
}
11+
body {
12+
background-color: #f2f2f2;
13+
color: #333;
14+
transition: background-color 0.2s, color 0.5s;
15+
font-family: Arial, sans-serif;
16+
}
17+
body.dark-mode {
18+
background-color: #1a1a1a;
19+
color: #f2f2f2;
20+
}
21+
button {
22+
padding: 10px;
23+
}
24+
25+
/* Default colors for titles */
26+
.title1 {
27+
color: #4caf50;
28+
background-color: #f2f2f2;
29+
padding: 10px;
30+
border: 2px solid #424242;
31+
border-radius: 5px;
32+
}
33+
.title2 {
34+
color: #ffc107;
35+
background-color: #424242;
36+
padding: 10px;
37+
border-radius: 5px;
38+
}
39+
.title3 {
40+
color: #607d8b;
41+
background-color: #ffeb3b;
42+
padding: 10px;
43+
border-radius: 5px;
44+
}
45+
.title4 {
46+
color: #2196f3;
47+
background-color: #4caf50;
48+
padding: 10px;
49+
border-radius: 5px;
50+
}
51+
52+
/* Additional colors for titles in dark mode */
53+
body.dark-mode .title1 {
54+
color: #f2f2f2;
55+
background-color: #1a1a1a;
56+
border: 2px solid #f2f2f2;
57+
}
58+
body.dark-mode .title2 {
59+
background-color: #ffc107;
60+
color: #616161;
61+
}
62+
body.dark-mode .title3 {
63+
background-color: #607d8b;
64+
color: #ffeb3b;
65+
}
66+
body.dark-mode .title4 {
67+
background-color: #2196f3;
68+
color: #4caf50;
69+
}
70+
</style>
71+
</head>
72+
<body>
73+
<h1 class="title1">Hello Mr. Deep Kothari ( https://github.com/deepk2891/JavaScript/tree/main/projects/Darkmode.html )</h1>
74+
<h1 class="title2">Hello Mr. Deep Kothari ( https://github.com/deepk2891/JavaScript/tree/main/projects/Darkmode.html )</h1>
75+
<h1 class="title3">Hello Mr. Deep Kothari ( https://github.com/deepk2891/JavaScript/tree/main/projects/Darkmode.html )</h1>
76+
<h1 class="title4">Hello Mr. Deep Kothari ( https://github.com/deepk2891/JavaScript/tree/main/projects/Darkmode.html )</h1>
77+
78+
<button onclick="toggle()">Toggle Dark Mode</button>
79+
80+
<script>
81+
function toggle() {
82+
const body = document.querySelector("body")
83+
body.classList.toggle("dark-mode")
84+
}
85+
</script>
86+
</body>
87+
</html>

0 commit comments

Comments
 (0)