mirror of
https://github.com/eRgo35/website.git
synced 2026-02-04 05:26:11 +01:00
feat: big page performance optimizations
This commit is contained in:
36
main.js
36
main.js
@@ -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 = '';
|
||||
root.classList.add("dark");
|
||||
themeText.textContent = "Dark Mode";
|
||||
themeIcon.innerHTML = "🌙";
|
||||
};
|
||||
|
||||
const setLightMode = () => {
|
||||
root.classList.remove('dark');
|
||||
themeText.textContent = 'Light Mode';
|
||||
themeIcon.innerHTML = '';
|
||||
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);
|
||||
|
||||
Reference in New Issue
Block a user