72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
const darkMode = {
|
|
mainBg: '#1b0d1f',
|
|
contentBg: '#1b0d1f',
|
|
accent: '#896a95',
|
|
primaryText: '#e4c2f1',
|
|
primaryLink: '#b666d9',
|
|
primaryLinkHover: '#f2e0f8'
|
|
};
|
|
|
|
const lightMode = {
|
|
mainBg: '#edf6d1',
|
|
contentBg: '#edf6d1',
|
|
accent: '#929a79',
|
|
primaryText: '#1d2114',
|
|
primaryLink: '#667937',
|
|
primaryLinkHover: '#343c1f'
|
|
};
|
|
|
|
const root = document.querySelector(':root');
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const lightModeIcon = document.getElementById('icon-light-mode');
|
|
const darkModeIcon = document.getElementById('icon-dark-mode');
|
|
|
|
console.log(lightModeIcon)
|
|
|
|
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("--accent", theme.accent);
|
|
root.style.setProperty("--primary-link", theme.primaryLink);
|
|
root.style.setProperty("--primary-link-hover", theme.primaryLinkHover);
|
|
}
|
|
|
|
const enableDarkMode = () => {
|
|
applyTheme(darkMode);
|
|
lightModeIcon.className = '';
|
|
darkModeIcon.className = 'hidden';
|
|
localStorage.setItem('theme', 'dark');
|
|
console.log(lightModeIcon)
|
|
}
|
|
|
|
const disableDarkMode = () => {
|
|
applyTheme(lightMode);
|
|
lightModeIcon.className = 'hidden';
|
|
darkModeIcon.className = '';
|
|
localStorage.setItem('theme', 'light');
|
|
console.log(lightModeIcon)
|
|
}
|
|
|
|
const detectTheme = () => {
|
|
let theme = 'light';
|
|
|
|
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();
|
|
}
|
|
|
|
themeToggle.className = "";
|
|
detectTheme();
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
localStorage.getItem('theme') === 'light' ? enableDarkMode() : disableDarkMode();
|
|
});
|
|
|
|
console.log('This site was generated by Hugo.');
|