From 7757511a4d110c5e44c32fd2bdc8c0bc440d7a12 Mon Sep 17 00:00:00 2001
From: Patrick Schwarzer <patrickschwarzer2000@gmail.com>
Date: Sun, 11 May 2025 04:26:08 +0200
Subject: [PATCH] Change Dark Mode toggle button to fontawesome icons
---
index.css | 3 ++-
index.html | 2 +-
script.js | 4 ++--
3 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/index.css b/index.css
index bf188e7..060a7a5 100644
--- a/index.css
+++ b/index.css
@@ -97,6 +97,7 @@ body.light-mode nav ul li a:hover {
}
body.light-mode .dark-mode-toggle {
+ color: #242424;
background-color: #f1f1f1;
}
body.light-mode .dark-mode-toggle:hover {
@@ -141,7 +142,7 @@ footer a {
text-decoration: none;
}
footer a:hover {
- background-color: rgb(20, 23, 26);
+ background-color: #5865f2;
}
body.light-mode footer a {
background-color: rgb(231, 231, 231);
diff --git a/index.html b/index.html
index e3a46af..47ca092 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@
<a href="#contact">Contact</a>
</li>
</ul>
- <button id="dark-mode-toggle" class="dark-mode-toggle">🌙</button>
+ <button id="dark-mode-toggle" class="dark-mode-toggle"><i class="fa-solid fa-sun"></i></button>
</nav>
</header>
diff --git a/script.js b/script.js
index 1eae248..6db1174 100644
--- a/script.js
+++ b/script.js
@@ -5,7 +5,7 @@ document.addEventListener("DOMContentLoaded", () => {
function toggleDarkMode(save){
const isLightMode = body.classList.toggle("light-mode");
- darkModeButton.textContent = isLightMode ? "☀️" : "🌙";
+ darkModeButton.innerHTML = isLightMode ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>';
if (save){
localStorage.setItem("theme", isLightMode ? "light" : "dark");
@@ -16,7 +16,7 @@ document.addEventListener("DOMContentLoaded", () => {
const theme = localStorage.getItem("theme");
if (theme === "light"){
body.classList.add("light-mode");
- darkModeButton.textContent = "☀️";
+ darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>';
}
darkModeButton.addEventListener("click", () => {