Merge pull request #34 from AnumanyaJaiswal/dark-mode

MD-IRFAN-RAJ · web-flow · commit ea33fc2d5c5f · 2025-11-15T12:57:00.000+05:30
feat: darkmode button
diff --git a/bihar-culture-landing/Khelobihar.html b/bihar-culture-landing/Khelobihar.html
@@ -4,10 +4,16 @@
   <meta charset="UTF-8">
   <title>Khelo Bihar: Sports & Youth</title>
   <link rel="stylesheet" href="style.css">
+  <script type="text/javascript" src="darkmode.js" defer></script>
 </head>
 <body>
   <header class="sub-hero">
     <h1 style="font-family: cursive;">Khelo Bihar</h1>
+    <button id ="theme-switch">
+      <img src="assets/images/dark_mode.png" alt="">
+      <img src="assets/images/light_mode.png" alt="">
+      
+    </button>
     <h3 style="font-weight: 30;">Sports and Youth Empowerment in Bihar</h3>
   </header>
 
diff --git a/bihar-culture-landing/assets/images/dark_mode.png b/bihar-culture-landing/assets/images/dark_mode.png
diff --git a/bihar-culture-landing/assets/images/light_mode.png b/bihar-culture-landing/assets/images/light_mode.png
diff --git a/bihar-culture-landing/culture.html b/bihar-culture-landing/culture.html
@@ -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>
@@ -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>
diff --git a/bihar-culture-landing/darkmode.js b/bihar-culture-landing/darkmode.js
@@ -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()
+    }
+})
diff --git a/bihar-culture-landing/festivals.html b/bihar-culture-landing/festivals.html
@@ -4,6 +4,7 @@
   <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>
@@ -12,6 +13,11 @@
   <header class="sub-hero">
     <h1 style="font-family:cursive">
         Festivals of Bihar</h1>
+        <button id ="theme-switch">
+      <img src="assets/images/dark_mode.png" alt="">
+      <img src="assets/images/light_mode.png" alt="">
+      
+    </button>
     <h3>Rythm of Devotion, Soul of a State</h3>
     <p class="tagline">Checkout the seamless beauty of festivals of Bihar</p>
   </header>
diff --git a/bihar-culture-landing/history.html b/bihar-culture-landing/history.html
@@ -4,10 +4,16 @@
   <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">
     <h1 style="font-family: cursive;">History & Heritage</h1>
+    <button id ="theme-switch">
+      <img src="assets/images/dark_mode.png" alt="">
+      <img src="assets/images/light_mode.png" alt="">
+      
+    </button>
     <h3 style="font-weight: 30;">Weaving the tapestry of Bihar</h3>
   </header>
 
diff --git a/bihar-culture-landing/index.html b/bihar-culture-landing/index.html
@@ -6,11 +6,17 @@
     <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">
             <h1>बिहार संस्कृति</h1>
+            <button id ="theme-switch">
+      <img src="assets/images/dark_mode.png" alt="">
+      <img src="assets/images/light_mode.png" alt="">
+      
+    </button>
             <h2>Bihar Culture</h2>
             <p class="tagline">Discover the Rich Heritage and Vibrant Culture of Bihar</p>
         </div>
diff --git a/bihar-culture-landing/modern.html b/bihar-culture-landing/modern.html
@@ -4,10 +4,16 @@
   <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">
     <h1>Modern Bihar</h1>
+    <button id ="theme-switch">
+      <img src="assets/images/dark_mode.png" alt="">
+      <img src="assets/images/light_mode.png" alt="">
+      
+    </button>
   </header>
 
   <nav class="main-navigation">
diff --git a/bihar-culture-landing/style.css b/bihar-culture-landing/style.css
@@ -4,37 +4,6 @@
   padding: 0;
   box-sizing: border-box;
 }
-.footer-links li a:hover {
-  color: #e8541f;              /* Orange hover matches theme */
-}
-.footer-section {
-  background-color: rgb(240, 242, 227);
-  text-align: center;
-  color: #e8541f;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: var(--shadow);
-}
-.footer-links li a {
-  text-decoration: none;
-  color: #007bff;
-  font-weight: 600;
-  font-size: 1.1rem;
-  transition: color 0.3s ease;
-}
-
-
-.footer-links {
-  
-  display: flex;
-  justify-content: center;     
-  align-items: center;
-  flex-wrap: wrap;             
-  gap: 25px;               
-  list-style: none;            
-  padding: 0;
-  margin: 15px 0;
-}
 
 /* CSS Custom Properties for consistent theming */
 :root {
@@ -54,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');
 
@@ -70,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);
@@ -109,16 +121,7 @@ header::before {
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
   opacity: 0.3;
 }
-@keyframes typing {
-  from { width: 0 }
-  to { width: 100% }
-}
 
-/* The typewriter cursor effect */
-@keyframes blink-caret {
-  from, to { border-color: transparent }
-  50% { border-color: orange; }
-}
 .header-content {
   position: relative;
   z-index: 2;
@@ -127,26 +130,19 @@ header::before {
 }
 
 .header-content h1 {
-   overflow: hidden;
-  border-right: .15em solid orange; 
-  white-space: nowrap; 
-  margin: 0 auto; 
-  letter-spacing: .15em;
-  animation: 
-    typing 3.5s steps(40, end),
-    blink-caret .75s step-end infinite;
-
+  font-size: clamp(2.5rem, 6vw, 4.5rem);
+  font-weight: 700;
+  margin: 0 auto;
+  
+  /*margin-bottom: 0.5rem;*/
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .header-content h2 {
-   overflow: hidden;
-  border-right: .15em solid orange; 
-  white-space: nowrap; 
-  margin: 0 auto; 
-  letter-spacing: .15em;
-  animation: 
-    typing 3.5s steps(40, end),
-    blink-caret .75s step-end infinite;
+  font-size: clamp(1.5rem, 3vw, 2.5rem);
+  font-weight: 400;
+  margin-bottom: 1rem;
+  opacity: 0.9;
 }
 
 .tagline {
@@ -765,77 +761,4 @@ body.dark-mode .theme-toggle-btn .moon {
   grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
   gap: 2rem;
   margin-bottom: 4rem;
-}
-#text{
-  text-align: center;
-  color: aliceblue;
-  background-color: #2c3e50;
-}
-#sidemain{
-  background-color: #ff6b35;
-  height: 100%;
-  width: 100%;
-}
-
-#personalities{
-  background-color: #ff6b35;
-  display: flex;
-  align-items: center;
-
-  border-bottom: #2c3e50 solid 2px;
-}
-
-.pic{
-  width: 50%;
-
-}
-#aryabhatta .pic img{
-  object-fit: cover;
-   width: 450px;
-  height: 400px;
-  
-}
-#aryabhatta{
-  display: flex;
-  margin-top: 90px;
-   border-bottom: #2c3e50 solid 2px;
-}
-.intro{
-  width: 50%;
-  padding-left: 5px;
-  border-left: 2px solid black;
-}
-#anand{
-  width: 100%;
-
-  display: flex;
-  margin-top: 50px;
-  justify-content: space-between;
-  flex-direction: row-reverse;
-  border-bottom: #2c3e50 solid 2px;
-}
-#anand .intro{
-  border-right: 2px solid black;
-}
-#anand .pic{
-  flex: 0 0 ;
- 
-  padding-right: 5px;
-}
-
-#bismil{
-  margin-top: 70px;
-  width: 100%;
-  display:flex;
-  justify-content: space-between;
-  flex-direction: row-reverse;
-
-}
-#bismil .intro{
-  border-right: 2px solid black;
-}
-#bismil .pic{
-  padding-left: 35px;
-}
-
-
+}
diff --git a/bihar-culture-landing/tourism.html b/bihar-culture-landing/tourism.html
@@ -6,7 +6,8 @@
   <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
     rel="stylesheet"
@@ -19,6 +20,11 @@
   <!-- Header -->
   <header class="sub-hero">
     <h1>Tourism in Bihar</h1>
+    <button id ="theme-switch">
+      <img src="assets/images/dark_mode.png" alt="">
+      <img src="assets/images/light_mode.png" alt="">
+      
+    </button>
     <p>Discover the heritage, nature, and vibrant culture of Bihar</p>
   </header>
 
