mirror of
https://github.com/wah-su/wah-su.github.io.git
synced 2025-05-03 03:19:40 +05:00
feat: add theme switcher
This commit is contained in:
parent
78efd2500a
commit
40a31ce007
14 changed files with 349 additions and 176 deletions
|
@ -31,10 +31,14 @@ const cards = [
|
|||
];
|
||||
const services = document.getElementById("services");
|
||||
|
||||
window.onload = function () {
|
||||
function renderCards() {
|
||||
const theme = document.getElementById("body").classList[0];
|
||||
services.innerHTML = "";
|
||||
for (let index = 0; index < cards.length; index++) {
|
||||
const image_name = cards[index].image.split(".")[0];
|
||||
const image_ext = cards[index].image.split(".")[1];
|
||||
const template = `
|
||||
<img class="rounded-t-lg object-cover h-[192px] w-full" src="${cards[index].image}" alt="" />
|
||||
<img class="rounded-t-lg object-cover h-[192px] w-full" src="${image_name}-${theme}.${image_ext}" alt="" />
|
||||
<div class="p-5">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-800 dark:text-white">${cards[index].name}
|
||||
</h5>
|
||||
|
@ -65,4 +69,5 @@ window.onload = function () {
|
|||
|
||||
services.appendChild(element);
|
||||
}
|
||||
};
|
||||
}
|
||||
window.onload = renderCards();
|
||||
|
|
36
public/js/theme.js
Normal file
36
public/js/theme.js
Normal file
|
@ -0,0 +1,36 @@
|
|||
const bodyElement = document.getElementById("body");
|
||||
const logo = document.getElementById("logo");
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
|
||||
const setTheme = (theme) => {
|
||||
bodyElement.classList.remove(theme == "light" ? "dark" : "light");
|
||||
bodyElement.classList.add(theme == "light" ? "light" : "dark");
|
||||
theme == "light"
|
||||
? (themeToggle.checked = false)
|
||||
: (themeToggle.checked = true);
|
||||
logo.src = `/public/images/logo-${theme}.svg`;
|
||||
localStorage.setItem("theme", theme);
|
||||
};
|
||||
|
||||
function updateTheme() {
|
||||
let theme = localStorage.getItem("theme");
|
||||
console.log("updatingTheme", theme);
|
||||
if (theme) {
|
||||
setTheme(theme);
|
||||
} else {
|
||||
setTheme("light");
|
||||
}
|
||||
}
|
||||
|
||||
themeToggle.addEventListener("click", () => {
|
||||
let theme = localStorage.getItem("theme");
|
||||
if (theme == "light") {
|
||||
setTheme("dark");
|
||||
renderCards();
|
||||
} else {
|
||||
setTheme("light");
|
||||
renderCards();
|
||||
}
|
||||
});
|
||||
|
||||
updateTheme();
|
Loading…
Add table
Add a link
Reference in a new issue