Update theme js

This commit is contained in:
Sonny Bakker 2021-06-30 21:30:57 +02:00
parent 879c6ebc90
commit 04d95386f5

View file

@ -1,8 +1,8 @@
function isCSSVariablesSupported() {
const isCSSVariablesSupported = () => {
return window.CSS && window.CSS.supports('color', 'var(--fake-color');
}
};
function changeTheme(e) {
const changeTheme = event => {
const currentPref = sessionStorage.getItem('t-dark');
const isDark = currentPref && currentPref === 'true' ? true : false;
@ -14,12 +14,12 @@ function changeTheme(e) {
try {
sessionStorage.setItem('t-dark', !isDark);
} catch (e) {
} catch (error) {
// do nothing.
}
}
};
function prefersDarkTheme() {
const getThemePreference = () => {
try {
const currentPref = sessionStorage.getItem('t-dark');
@ -33,12 +33,12 @@ function prefersDarkTheme() {
} else {
return false;
}
} catch (e) {
} catch (error) {
return false;
}
}
};
function toggleDarkTheme(isDark) {
const toggleDarkTheme = isDark => {
if (isDark) {
document.documentElement.classList.add('dark-theme');
} else {
@ -47,30 +47,30 @@ function toggleDarkTheme(isDark) {
try {
sessionStorage.setItem('t-dark', isDark);
} catch (e) {
} catch (error) {
// do nothing.
}
}
};
function initThemeSelector() {
const initThemeSelector = () => {
const themeButton = document.getElementsByClassName('theme-switcher')[0];
const mqPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
if (prefersDarkTheme()) {
if (getThemePreference()) {
toggleDarkTheme(true);
}
themeButton.addEventListener('click', changeTheme);
mqPrefersDarkTheme.addListener(mq => {
toggleDarkTheme(mq.matches);
prefersDarkTheme.addListener(mediaQuery => {
toggleDarkTheme(mediaQuery.matches);
});
}
};
function init() {
const init = () => {
if (isCSSVariablesSupported()) {
initThemeSelector();
}
}
};
init();