114 lines
3.5 KiB
JavaScript
114 lines
3.5 KiB
JavaScript
const root = document.querySelector(':root');
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const mainNavbar = document.querySelector('#main-navbar');
|
|
let mouseX = 0;
|
|
let mouseY = 0;
|
|
let navX = mainNavbar.getBoundingClientRect().x;
|
|
let navY = mainNavbar.getBoundingClientRect().y;
|
|
let navW = mainNavbar.getBoundingClientRect().width;
|
|
let navH = mainNavbar.getBoundingClientRect().height;
|
|
root.style.setProperty("--nav-x", `${navX}`);
|
|
root.style.setProperty("--nav-y", `${navY}`);
|
|
|
|
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)",
|
|
mainBg: "linear-gradient(#2B5F8C, #3DADF2)",
|
|
contentBg: "white",
|
|
primaryText: "#132B40",
|
|
secondaryText: "#2B5F8C",
|
|
header: "#CFE8FF",
|
|
navLink: "#CFE8FF",
|
|
primaryLink: "#337AA6",
|
|
primaryLinkHover: "#3DADF2",
|
|
secondaryLink: "#2F4A62",
|
|
secondaryLinkHover: "#2B5F8C",
|
|
ternaryLink: "#2B5F8C",
|
|
ternaryLinkHover: "#3DADF2",
|
|
shadow: "#132B40AA"
|
|
}
|
|
|
|
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", `${evt.clientX}px`);
|
|
root.style.setProperty("--mouse-y", `${evt.clientY}px`);
|
|
});
|
|
|
|
const calcNavOffset = () => {
|
|
let rect = mainNavbar.getBoundingClientRect()
|
|
navX = rect.x;
|
|
navY = rect.y;
|
|
navW = rect.width;
|
|
navH = rect.height;
|
|
root.style.setProperty("--nav-x-offset", `${navX - (navW / 2)}px`);
|
|
root.style.setProperty("--nav-y-offset", `${navY - (navH / 2)}px`);
|
|
}
|
|
|
|
calcNavOffset();
|
|
|
|
themeToggle.className = "";
|
|
detectTheme();
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
localStorage.getItem('theme') === 'light' ? enableDarkMode() : disableDarkMode();
|
|
});
|