cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: theming bug

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-29 15:49:08 -08:00
parent 1c01154395
commit 119f3ce524
No known key found for this signature in database
4 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/_includes/base.liquid
View file

@ -90,15 +90,16 @@
(() => {
const currentTheme = sessionStorage?.getItem('theme');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const root = document.getElementsByTagName('html')[0];
if (!currentTheme) sessionStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
if (currentTheme === 'dark') {
document.body.classList.add('theme__dark')
root.classList.add('theme__dark')
} else if (currentTheme === 'light') {
document.body.classList.add('theme__light')
root.classList.add('theme__light')
} else if (prefersDarkScheme) {
document.body.classList.add('theme__dark')
root.classList.add('theme__dark')
} else if (!prefersDarkScheme) {
document.body.classList.add('theme__light')
root.classList.add('theme__light')
}
})();
</script>

4
src/assets/styles/partials/vars.css
View file

@ -118,7 +118,7 @@
}
/* light theme */
:root body.theme__light {
:root.theme__light {
--text-color: var(--color-darkest);
--background-color: var(--color-lightest);
--text-color-inverted: var(--color-lightest);
@ -133,7 +133,7 @@
}
/* dark theme */
:root body.theme__dark {
:root.theme__dark {
--text-color: var(--color-lightest);
--background-color: var(--color-darkest);
--text-color-inverted: var(--color-darkest);