feat: big page performance optimizations

This commit is contained in:
2025-07-26 14:55:06 +02:00
parent 1f265df89c
commit 6a864ef8ec
7 changed files with 33 additions and 24 deletions

36
main.js
View File

@@ -1,39 +1,41 @@
const root = document.documentElement;
const themeText = document.querySelector('.theme-text');
const themeIcon = document.querySelector('.material-icons');
const themeText = document.querySelector(".theme-text");
const themeIcon = document.querySelector(".material-icons");
const isDarkMode = () => root.classList.contains('dark');
const isDarkMode = () => root.classList.contains("dark");
const setDarkMode = () => {
root.classList.add('dark');
themeText.textContent = 'Dark Mode';
themeIcon.innerHTML = '&#xe51c';
root.classList.add("dark");
themeText.textContent = "Dark Mode";
themeIcon.innerHTML = "🌙";
};
const setLightMode = () => {
root.classList.remove('dark');
themeText.textContent = 'Light Mode';
themeIcon.innerHTML = '&#xe518';
root.classList.remove("dark");
themeText.textContent = "Light Mode";
themeIcon.innerHTML = "☀️";
};
const toggleTheme = () => {
if (isDarkMode()) {
setLightMode();
localStorage.setItem('preferredTheme', 'light');
localStorage.setItem("preferredTheme", "light");
} else {
setDarkMode();
localStorage.setItem('preferredTheme', 'dark');
localStorage.setItem("preferredTheme", "dark");
}
};
const checkPreferredTheme = () => {
const preferredTheme = localStorage.getItem('preferredTheme');
if (preferredTheme === 'dark') {
const preferredTheme = localStorage.getItem("preferredTheme");
if (preferredTheme === "dark") {
setDarkMode();
} else if (preferredTheme === 'light') {
} else if (preferredTheme === "light") {
setLightMode();
} else {
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
const prefersDarkScheme = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
if (prefersDarkScheme) {
setDarkMode();
} else {
@@ -46,5 +48,5 @@ document.querySelector("#year").innerHTML = new Date().getFullYear();
checkPreferredTheme();
const themeButton = document.querySelector('.theme');
themeButton.addEventListener('click', toggleTheme);
const themeButton = document.querySelector(".theme");
themeButton.addEventListener("click", toggleTheme);