94 lines
2.8 KiB
JavaScript
94 lines
2.8 KiB
JavaScript
const root = document.querySelector(':root');
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
let mouseX = 0;
|
|
let mouseY = 0;
|
|
|
|
const darkMode = {
|
|
mainBg: "linear-gradient(#28164B, 70%, #825ECA )",
|
|
contentBg: "#1A181B",
|
|
primaryText: "#DCCBFF",
|
|
secondaryText: "#B89AF5",
|
|
header: "#825ECA",
|
|
navLink: "#B89AF5",
|
|
primaryLink: "#B89AF5",
|
|
primaryLinkHover: "#E3D5FF",
|
|
secondaryLink: "#E3D5FF",
|
|
secondaryLinkHover: "#B89AF5",
|
|
ternaryLink: "var(--blue)",
|
|
ternaryLinkHover: "var(--brown)",
|
|
shadow: "#00000088"
|
|
}
|
|
|
|
const lightMode = {
|
|
mainBg: "linear-gradient(#0045df, #00d4ff)",
|
|
contentBg: "#EEE5E5",
|
|
primaryText: "#342F23",
|
|
secondaryText: "#2F3E5E",
|
|
header: "#DE9B00",
|
|
navLink: "#DE9B00",
|
|
primaryLink: "#896D2E",
|
|
primaryLinkHover: "#284D9E",
|
|
secondaryLink: "#284D9E",
|
|
secondaryLinkHover: "#896D2E",
|
|
ternaryLink: "#284D9E",
|
|
ternaryLinkHover: "#896D2E",
|
|
shadow: "#2F3E5E55"
|
|
}
|
|
|
|
const applyTheme = (theme) => {
|
|
root.style.setProperty("--main-bg", theme.mainBg);
|
|
root.style.setProperty("--content-bg", theme.contentBg);
|
|
root.style.setProperty("--primary-text", theme.primaryText);
|
|
root.style.setProperty("--secondary-text", theme.secondaryText);
|
|
root.style.setProperty("--header", theme.header);
|
|
root.style.setProperty("--nav-link", theme.navLink);
|
|
root.style.setProperty("--primary-link", theme.primaryLink);
|
|
root.style.setProperty("--primary-link-hover", theme.primaryLinkHover);
|
|
root.style.setProperty("--secondary-link", theme.secondaryLink);
|
|
root.style.setProperty("--secondary-link-hover", theme.secondaryLinkHover);
|
|
root.style.setProperty("--ternary-link", theme.ternaryLink);
|
|
root.style.setProperty("--ternary-link-hover", theme.ternaryLinkHover);
|
|
root.style.setProperty("--shadow", theme.shadow);
|
|
}
|
|
|
|
const enableDarkMode = () => {
|
|
applyTheme(darkMode);
|
|
localStorage.setItem('theme', 'dark');
|
|
themeToggle.innerText = 'Light Mode';
|
|
}
|
|
|
|
const disableDarkMode = () => {
|
|
applyTheme(lightMode);
|
|
localStorage.setItem('theme', 'light');
|
|
themeToggle.innerText = 'Dark Mode';
|
|
}
|
|
|
|
const detectTheme = () => {
|
|
let theme = 'light';
|
|
let themeObj = lightMode;
|
|
|
|
if (localStorage.getItem('theme')) {
|
|
theme = localStorage.getItem('theme');
|
|
}
|
|
else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
theme = 'dark';
|
|
}
|
|
|
|
theme === 'dark' ? enableDarkMode() : disableDarkMode();
|
|
}
|
|
|
|
document.addEventListener("mousemove", (evt) => {
|
|
mouseX = evt.clientX / innerWidth;
|
|
mouseY = evt.clientY / innerHeight;
|
|
|
|
root.style.setProperty("--mouse-x", `${mouseX}`);
|
|
root.style.setProperty("--mouse-y", `${mouseY}`);
|
|
});
|
|
|
|
themeToggle.className = "";
|
|
detectTheme();
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
localStorage.getItem('theme') === 'light' ? enableDarkMode() : disableDarkMode();
|
|
});
|