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