mirrors/quetre
1
0
Fork 0
mirror of https://github.com/zyachel/quetre.git synced 2025-04-04 05:27:36 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: fix flash of inaccurate color theme

Browse source
This commit is contained in:
zyachel 2023-04-23 19:12:24 +05:30
parent b8a0b9fcad
commit 35a0d87c13
3 changed files with 35 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

34
public/js/index.js
View file

@ -1,38 +1,26 @@
////////////////////////////////////////////////////////
// CONSTANTS
////////////////////////////////////////////////////////
const rootEl = document.documentElement;
const headerEl = document.querySelector('.header');
const [metaThemeEl, tempMetaThemeEl] = document.querySelectorAll(
'meta[name="theme-color"]'
);
const [metaThemeEl, tempMetaThemeEl] = document.querySelectorAll('meta[name="theme-color"]');
const btnTheme = document.querySelector('.theme-changer');
////////////////////////////////////////////////////////
// HELPER FUNCTIONS
////////////////////////////////////////////////////////
// gets theme prefered by browser
const browserPrefersDarkTheme = window.matchMedia(
'(prefers-color-scheme: dark)'
).matches;
// gets theme prefered by user(stored in local storage)
const userPrefersTheme = localStorage?.getItem('theme');
// sets theme to local storage
const setTheme = theme => rootEl.setAttribute('theme', theme);
const localStorageAccessible = !!typeof Storage;
const setMetaTheme = () => {
const headerColor = window.getComputedStyle(headerEl).backgroundColor;
metaThemeEl.setAttribute('content', headerColor);
};
////////////////////////////////////////////////////////
// EVENT LISTENER
////////////////////////////////////////////////////////
btnTheme.addEventListener('click', () => {
const curTheme = rootEl.getAttribute('theme') || 'light';
const themeToSet = curTheme === 'light' ? 'dark' : 'light';
const colorToAdd = window.getComputedStyle(headerEl).backgroundColor;
const themeToSet = document.documentElement.getAttribute('theme') === 'light' ? 'dark' : 'light';
setTheme(themeToSet);
// changes the meta theme-color tag to match the header color
metaThemeEl.setAttribute('content', colorToAdd);
// only setting the value in localStoage if it's actually accessible
if (localStorageAccessible) localStorage.setItem('theme', themeToSet);
if (isLocalStorageAccessible()) localStorage.setItem('theme', themeToSet);
setMetaTheme();
});
////////////////////////////////////////////////////////
@ -40,13 +28,11 @@ btnTheme.addEventListener('click', () => {
////////////////////////////////////////////////////////
(() => {
// setting this attr on root to not render some css styles
rootEl.setAttribute('js-enabled', '');
document.documentElement.setAttribute('js-enabled', '');
// removing duplicate meta theme color(it's initially for those who haven't enabled js)
metaThemeEl.removeAttribute('media');
tempMetaThemeEl.remove();
// applying theme preferences in case they exist
if (userPrefersTheme) setTheme(userPrefersTheme);
else if (browserPrefersDarkTheme) setTheme('dark');
setMetaTheme();
})();
////////////////////////////////////////////////////////

24
public/js/restore-theme.js Normal file
View file

@ -0,0 +1,24 @@
////////////////////////////////////////////////////////
// HELPER FUNCTIONS
////////////////////////////////////////////////////////
const isLocalStorageAccessible = () => {
try {
window.localStorage.getItem('test');
return true;
} catch {
return false;
}
};
const setTheme = theme => document.documentElement.setAttribute('theme', theme);
const userPrefersTheme = isLocalStorageAccessible() ? localStorage.getItem('theme') : null;
const browserPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
////////////////////////////////////////////////////////
// INIT FUNCTION
////////////////////////////////////////////////////////
(() => {
// applying theme preferences in case they exist
if (userPrefersTheme) setTheme(userPrefersTheme);
else if (browserPrefersDarkTheme) setTheme('dark');
})();

1
views/pug/base.pug
View file

@ -32,6 +32,7 @@ html(lang='en')
meta(name='twitter:description', content=meta.description)
meta(name='twitter:image', content=meta.imageUrl)
//- own script
script(src='/js/restore-theme.js')
script(src='/js/index.js', defer)
//- initially setting this var to false. will update in case an answer contains some math expression