Merge pull request #419 from HS202022/main

IMPROVED ICONS FOR DARK AND LIGHT MODE
PriyaGhosal · Oct 9, 2024 · 4ce01bc · 4ce01bc
2 parents 4241fcd + 82dd31d
commit 4ce01bc
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/crescent-moon.png b/crescent-moon.png
diff --git a/day-mode.png b/day-mode.png
diff --git a/index.html b/index.html
@@ -271,7 +271,7 @@ <h1 id="logo">BuddyTrail</h1>
 
     <!-- Toggle Button -->
     <button class="mode-toggle" id="modeToggle">
-      <span class="sun-icon glow">☀️</span>
+      <span class="sun-icon glow"><img src="day-mode.png"></span>
     </button>
   </nav>
 </header>

diff --git a/script.js b/script.js
@@ -365,7 +365,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const sunIcon = document.querySelector('.sun-icon');
     const moonIcon = document.createElement('span');
     moonIcon.className = 'moon-icon';
-    moonIcon.innerHTML = '🌙';
+    moonIcon.innerHTML = '<img src="crescent-moon.png">';
 
     const currentTheme = localStorage.getItem('theme');
 
@@ -421,9 +421,9 @@ modeToggle.addEventListener('click', () => {
 
     // Toggle the icon
     if (body.classList.contains('dark-mode')) {
-        modeToggle.innerHTML = '<span class="sun-icon">🌙</span>';
+        modeToggle.innerHTML = '<span class="sun-icon"><img src="crescent-moon.png"></span>';
     } else {
-        modeToggle.innerHTML = '<span class="sun-icon glow">☀️</span>';
+        modeToggle.innerHTML = '<span class="sun-icon glow"><img src="day-mode.png"></span>';
     }
 });
 // google translator

diff --git a/style.css b/style.css
@@ -154,12 +154,21 @@ nav {
 }
 
 .mode-toggle {
-  margin-left: 20px;
-  background: none;
+  position: fixed;
+  top: 20px;
+  right: 20px;
   border: none;
-  color: white;
-  font-size: 1.5em;
+  background-color:white;
+  cursor: pointer;
+  padding: 5px;
+
 }
+.mode-toggle img {
+  width: 30px; /* Adjust the size as needed */
+  height: auto;
+
+}
+
 
 /* Responsive Styles for smaller screens */
 @media (max-width: 768px) {
@@ -716,6 +725,7 @@ body.dark-mode {
 /* Sun and moon icons */
 .sun-icon {
   color: #ffd700;
+  size: 20px;
 }
 
 .moon-icon {