Merge pull request #2207 from mansi066/feature-branch-1

Add dark theme
iamrahulmahato · Nov 7, 2024 · b1d57a6 · b1d57a6
2 parents 5c61392 + 7dbb561
commit b1d57a6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/projects/InspoMap/index.html b/projects/InspoMap/index.html
@@ -4,9 +4,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
     <title>InspoMap</title>
-</head>
-<body>
+    <style>
+        :root { /* Light theme colors */ --background-color:  #b9cadb;--text-color: #000000; --navbar-background: #f8f9fa; --navbar-text: #000000; --link-color: #1a73e8; --button-background: #008cba; --button-text: #ffffff; } [data-theme="dark"] { /* Dark theme colors */ --background-color: #121212; --text-color: #ffffff; --navbar-background: #333333; --navbar-text: #ffffff; --link-color: #bb86fc; --button-background: #3d3d3d; --button-text: #ffffff; } * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; background-color: var(--background-color); color: var(--text-color); } header { background-color: var(--navbar-background); } #navbar ul { list-style: none; padding: 0; } #navbar ul li { display: inline; margin-right: 10px; } #navbar ul li a { color: var(--navbar-text); text-decoration: none; } button 
+       { border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle { position: fixed; top: 10px; right: 10px; } </style> </head> <body data-theme="light">  <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> <!-- Add your content here --> <section id="content"> <!-- Content will go here --> </section> <script> const toggleButton = document.getElementById('theme-toggle'); const body = document.body; toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; } else { body.setAttribute('data-theme', 'light'); toggleButton.innerHTML = '<i class="fas fa-sun"></i>'; } }); </script>
+
     <h1>InspoMap</h1>
     <p>Explore new regions each day for daily inspiration!</p>
 

diff --git a/projects/InspoMap/style.css b/projects/InspoMap/style.css
@@ -8,6 +8,9 @@ body {
 h1 {
     color: #34495e;
 }
+[data-theme="dark"] h2{
+    color:black;
+}
 
 /* Map styling */
 .map {