Skip to content

Commit bcdec1d

Browse files
AnumanyaJaiswalAnumanyaJaiswal
committed
feat: toogle button for dark mode
1 parent 8242609 commit bcdec1d

10 files changed

Lines changed: 110 additions & 0 deletions

File tree

‎bihar-culture-landing/assets/images/dark_mode.png‎

440 Bytes
Loading

‎bihar-culture-landing/assets/images/light_mode.png‎

568 Bytes
Loading

‎bihar-culture-landing/culture.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<title>Bihar Culture & Arts</title>
66
<link rel="stylesheet" href="style.css">
7+
<script type="text/javascript" src="darkmode.js" defer></script>
78
</head>
89

910
<body>
@@ -12,6 +13,11 @@
1213
<header>
1314
<div class="header-content">
1415
<h1>Culture & Arts of Bihar</h1>
16+
<button id ="theme-switch">
17+
<img src="assets/images/dark_mode.png" alt="">
18+
<img src="assets/images/light_mode.png" alt="">
19+
20+
</button>
1521
<h2>Where Tradition Meets Timeless Beauty</h2>
1622
<p class="tagline">Explore the rich art, music, and heritage that define the soul of Bihar.</p>
1723
</div>

‎bihar-culture-landing/darkmode.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
let darkmode = localStorage.getItem('darkmode')
2+
const themeSwitch = document.getElementById('theme-switch')
3+
4+
const enableDarkmode = () => {
5+
document.body.classList.add('darkmode')
6+
localStorage.setItem('darkmode', 'active')
7+
}
8+
9+
const disableDarkmode = () => {
10+
document.body.classList.remove('darkmode')
11+
localStorage.setItem('darkmode', null)
12+
}
13+
14+
themeSwitch.addEventListener("click", () => {
15+
darkmode = localStorage.getItem('darkmode')
16+
if (darkmode === "active") {
17+
enableDarkmode()
18+
}
19+
else{
20+
disableDarkmode()
21+
}
22+
})
23+
themeSwitch.addEventListener("click", () => {
24+
darkmode = localStorage.getItem('darkmode')
25+
if (darkmode !== "active") {
26+
enableDarkmode()
27+
}
28+
else{
29+
disableDarkmode()
30+
}
31+
})

‎bihar-culture-landing/festivals.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,18 @@
44
<meta charset="UTF-8">
55
<title>Bihar Festivals</title>
66
<link rel="stylesheet" href="style.css">
7+
<script type="text/javascript" src="darkmode.js" defer></script>
78

89
</head>
910
<body>
1011
<!-- HEADING -->
1112

1213
<header class="sub-hero">
14+
<button id ="theme-switch">
15+
<img src="assets/images/dark_mode.png" alt="">
16+
<img src="assets/images/light_mode.png" alt="">
17+
18+
</button>
1319
<h1 style="font-family:cursive">
1420
Festivals of Bihar</h1>
1521
<h3>Rythm of Devotion, Soul of a State</h3>

‎bihar-culture-landing/history.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,15 @@
44
<meta charset="UTF-8">
55
<title>Bihar History</title>
66
<link rel="stylesheet" href="style.css">
7+
<script type="text/javascript" src="darkmode.js" defer></script>
78
</head>
89
<body>
910
<header class="sub-hero">
11+
<button id ="theme-switch">
12+
<img src="assets/images/dark_mode.png" alt="">
13+
<img src="assets/images/light_mode.png" alt="">
14+
15+
</button>
1016
<h1 style="font-family: cursive;">History & Heritage</h1>
1117
<h3 style="font-weight: 30;">Weaving the tapestry of Bihar</h3>
1218
</header>

‎bihar-culture-landing/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,16 @@
66
<title>Bihar Culture - Discover the Rich Heritage of Bihar</title>
77
<link rel="stylesheet" href="style.css">
88
<link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
9+
<script type="text/javascript" src="darkmode.js" defer></script>
910
</head>
1011
<body>
1112
<header>
1213
<div class="header-content">
14+
<button id ="theme-switch">
15+
<img src="assets/images/dark_mode.png" alt="">
16+
<img src="assets/images/light_mode.png" alt="">
17+
18+
</button>
1319
<h1>बिहार संस्कृति</h1>
1420
<h2>Bihar Culture</h2>
1521
<p class="tagline">Discover the Rich Heritage and Vibrant Culture of Bihar</p>

‎bihar-culture-landing/modern.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,15 @@
44
<meta charset="UTF-8">
55
<title>Modern Bihar</title>
66
<link rel="stylesheet" href="style.css">
7+
<script type="text/javascript" src="darkmode.js" defer></script>
78
</head>
89
<body>
910
<header class="sub-hero">
11+
<button id ="theme-switch">
12+
<img src="assets/images/dark_mode.png" alt="">
13+
<img src="assets/images/light_mode.png" alt="">
14+
15+
</button>
1016
<h1>Modern Bihar</h1>
1117
</header>
1218

‎bihar-culture-landing/style.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,24 @@
2323
--font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
2424
}
2525

26+
.darkmode{
27+
--primary-color: #432323;
28+
--secondary-color: #2F5755;
29+
--accent-color: #5A9690;
30+
--dark-color: #2c3e50;
31+
--light-color: #ecf0f1;
32+
--white: #ffffff;
33+
--text-dark: #2c3e50;
34+
--text-light: #7f8c8d;
35+
background-color: black;
36+
--shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
37+
--shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
38+
--border-radius: 12px;
39+
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
40+
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
41+
--font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
42+
}
43+
2644
/* Import Google Fonts */
2745
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
2846

@@ -39,6 +57,31 @@ body {
3957
overflow-x: hidden;
4058
}
4159

60+
#theme-switch{
61+
height: 50px;
62+
width: 50px;
63+
padding: 0;
64+
border-radius: 50%;
65+
background-color: transparent;
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
position: fixed;
70+
top: 10px;
71+
right:20px ;
72+
border: none;
73+
}
74+
75+
#theme-switch img:last-child{
76+
display: none;
77+
}
78+
.darkmode #theme-switch img:first-child{
79+
display: none;
80+
}
81+
.darkmode #theme-switch img:last-child{
82+
display: block;
83+
}
84+
4285
/* Typography */
4386
h1, h2, h3, h4, h5, h6 {
4487
font-family: var(--font-heading);

‎bihar-culture-landing/tourism.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>Bihar Tourism</title>
77
<link rel="stylesheet" href="style.css">
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
9+
<script type="text/javascript" src="darkmode.js" defer></script>
910

1011
<!-- Leaflet CSS CDN -->
1112
<link
@@ -18,6 +19,11 @@
1819
<body>
1920
<!-- Header -->
2021
<header class="sub-hero">
22+
<button id ="theme-switch">
23+
<img src="assets/images/dark_mode.png" alt="">
24+
<img src="assets/images/light_mode.png" alt="">
25+
26+
</button>
2127
<h1>Tourism in Bihar</h1>
2228
<p>Discover the heritage, nature, and vibrant culture of Bihar</p>
2329
</header>

0 commit comments

Comments
 (0)