Skip to content

feat:Toogle button for dark mode #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
AnumanyaJaiswal wants to merge 3 commits into from
Closed

feat:Toogle button for dark mode #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
05c37ba
feat:Toogle button for dark mode
AnumanyaJaiswal Nov 13, 2025
bcdec1d
feat: toogle button for dark mode
AnumanyaJaiswal Nov 13, 2025
373ae7b
feat: toogle button for dark mode
AnumanyaJaiswal Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added bihar-culture-landing/assets/images/dark_mode.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added bihar-culture-landing/assets/images/light_mode.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions bihar-culture-landing/culture.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Bihar Culture & Arts</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="darkmode.js" defer></script>
</head>

<body>
Expand All @@ -12,6 +13,11 @@
<header>
<div class="header-content">
<h1>Culture & Arts of Bihar</h1>
<button id ="theme-switch">
<img src="assets/images/dark_mode.png" alt="">
<img src="assets/images/light_mode.png" alt="">

</button>
<h2>Where Tradition Meets Timeless Beauty</h2>
<p class="tagline">Explore the rich art, music, and heritage that define the soul of Bihar.</p>
</div>
Expand Down
31 changes: 31 additions & 0 deletions bihar-culture-landing/darkmode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
let darkmode = localStorage.getItem('darkmode')
const themeSwitch = document.getElementById('theme-switch')

const enableDarkmode = () => {
document.body.classList.add('darkmode')
localStorage.setItem('darkmode', 'active')
}

const disableDarkmode = () => {
document.body.classList.remove('darkmode')
localStorage.setItem('darkmode', null)
}

themeSwitch.addEventListener("click", () => {
darkmode = localStorage.getItem('darkmode')
if (darkmode === "active") {
enableDarkmode()
}
else{
disableDarkmode()
}
})
themeSwitch.addEventListener("click", () => {
darkmode = localStorage.getItem('darkmode')
if (darkmode !== "active") {
enableDarkmode()
}
else{
disableDarkmode()
}
})
6 changes: 6 additions & 0 deletions bihar-culture-landing/festivals.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,18 @@
<meta charset="UTF-8">
<title>Bihar Festivals</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="darkmode.js" defer></script>

</head>
<body>
<!-- HEADING -->

<header class="sub-hero">
<button id ="theme-switch">
<img src="assets/images/dark_mode.png" alt="">
<img src="assets/images/light_mode.png" alt="">

</button>
<h1 style="font-family:cursive">
Festivals of Bihar</h1>
<h3>Rythm of Devotion, Soul of a State</h3>
Expand Down
6 changes: 6 additions & 0 deletions bihar-culture-landing/history.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,15 @@
<meta charset="UTF-8">
<title>Bihar History</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="darkmode.js" defer></script>
</head>
<body>
<header class="sub-hero">
<button id ="theme-switch">
<img src="assets/images/dark_mode.png" alt="">
<img src="assets/images/light_mode.png" alt="">

</button>
<h1 style="font-family: cursive;">History & Heritage</h1>
<h3 style="font-weight: 30;">Weaving the tapestry of Bihar</h3>
</header>
Expand Down
6 changes: 6 additions & 0 deletions bihar-culture-landing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,16 @@
<title>Bihar Culture - Discover the Rich Heritage of Bihar</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
<script type="text/javascript" src="darkmode.js" defer></script>
</head>
<body>
<header>
<div class="header-content">
<button id ="theme-switch">
<img src="assets/images/dark_mode.png" alt="">
<img src="assets/images/light_mode.png" alt="">

</button>
<h1>बिहार संस्कृति</h1>
<h2>Bihar Culture</h2>
<p class="tagline">Discover the Rich Heritage and Vibrant Culture of Bihar</p>
Expand Down
6 changes: 6 additions & 0 deletions bihar-culture-landing/modern.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,15 @@
<meta charset="UTF-8">
<title>Modern Bihar</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="darkmode.js" defer></script>
</head>
<body>
<header class="sub-hero">
<button id ="theme-switch">
<img src="assets/images/dark_mode.png" alt="">
<img src="assets/images/light_mode.png" alt="">

</button>
<h1>Modern Bihar</h1>
</header>

Expand Down
43 changes: 43 additions & 0 deletions bihar-culture-landing/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,24 @@
--font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.darkmode{
--primary-color: #432323;
--secondary-color: #2F5755;
--accent-color: #5A9690;
--dark-color: #2c3e50;
--light-color: #ecf0f1;
--white: #ffffff;
--text-dark: #2c3e50;
--text-light: #7f8c8d;
background-color: black;
--shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
--border-radius: 12px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

Expand All @@ -39,6 +57,31 @@ body {
overflow-x: hidden;
}

#theme-switch{
height: 50px;
width: 50px;
padding: 0;
border-radius: 50%;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 10px;
right:20px ;
border: none;
}

#theme-switch img:last-child{
display: none;
}
.darkmode #theme-switch img:first-child{
display: none;
}
.darkmode #theme-switch img:last-child{
display: block;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
Expand Down
6 changes: 6 additions & 0 deletions bihar-culture-landing/tourism.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<title>Bihar Tourism</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<script type="text/javascript" src="darkmode.js" defer></script>

<!-- Leaflet CSS CDN -->
<link
Expand All @@ -18,6 +19,11 @@
<body>
<!-- Header -->
<header class="sub-hero">
<button id ="theme-switch">
<img src="assets/images/dark_mode.png" alt="">
<img src="assets/images/light_mode.png" alt="">

</button>
<h1>Tourism in Bihar</h1>
<p>Discover the heritage, nature, and vibrant culture of Bihar</p>
</header>
Expand Down
Loading