tarion/tarion.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change Dark Mode toggle button to fontawesome icons

Browse source
This commit is contained in:
Patrick Schwarzer 2025-05-11 04:26:08 +02:00
parent d355176be1
commit 7757511a4d
3 changed files with 5 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

3
index.css
View file

@ -97,6 +97,7 @@ body.light-mode nav ul li a:hover {
} }
body.light-mode .dark-mode-toggle { body.light-mode .dark-mode-toggle {
color: #242424;
background-color: #f1f1f1; background-color: #f1f1f1;
} }
body.light-mode .dark-mode-toggle:hover { body.light-mode .dark-mode-toggle:hover {
@ -141,7 +142,7 @@ footer a {
text-decoration: none; text-decoration: none;
} }
footer a:hover { footer a:hover {
background-color: rgb(20, 23, 26); background-color: #5865f2;
} }
body.light-mode footer a { body.light-mode footer a {
background-color: rgb(231, 231, 231); background-color: rgb(231, 231, 231);

2
index.html
View file

@ -29,7 +29,7 @@
<a href="#contact">Contact</a> <a href="#contact">Contact</a>
</li> </li>
</ul> </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> </nav>
</header> </header>

4
script.js
View file

@ -5,7 +5,7 @@ document.addEventListener("DOMContentLoaded", () => {
function toggleDarkMode(save){ function toggleDarkMode(save){
const isLightMode = body.classList.toggle("light-mode"); 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){ if (save){
localStorage.setItem("theme", isLightMode ? "light" : "dark"); localStorage.setItem("theme", isLightMode ? "light" : "dark");
@ -16,7 +16,7 @@ document.addEventListener("DOMContentLoaded", () => {
const theme = localStorage.getItem("theme"); const theme = localStorage.getItem("theme");
if (theme === "light"){ if (theme === "light"){
body.classList.add("light-mode"); body.classList.add("light-mode");
darkModeButton.textContent = "☀️"; darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>';
} }
darkModeButton.addEventListener("click", () => { darkModeButton.addEventListener("click", () => {