Update theme js
This commit is contained in:
parent
879c6ebc90
commit
04d95386f5
1 changed files with 19 additions and 19 deletions
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue