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

feat: improved theming

Browse source
This commit is contained in:
Cory Dransfeldt 2024-09-02 15:21:55 -07:00
parent b48fa57267
commit 72c09452e0
No known key found for this signature in database
5 changed files with 15 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/assets/styles/components/theme-toggle.css
View file

@ -29,7 +29,7 @@ theme-toggle {
}
}
.theme__dark {
[data-theme="dark"] {
& .theme-toggle > .light {
display: inline;
}
@ -39,7 +39,7 @@ theme-toggle {
}
}
.theme__light {
[data-theme="light"] {
& .theme-toggle > .light {
display: none;
}

2
src/assets/styles/defaults/vars.css
View file

@ -147,7 +147,7 @@
}
/* dark theme */
:root.theme__dark {
:root[data-theme="dark"] {
--text-color: var(--color-lightest);
--background-color: var(--color-darkest);
--text-color-inverted: var(--color-darkest);

7
src/includes/base.liquid
View file

@ -148,9 +148,10 @@
(() => {
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'))
root.classList.add(`theme__${currentTheme || (prefersDarkScheme ? 'dark' : 'light')}`)
const root = document.documentElement
const themeToSet = currentTheme || (prefersDarkScheme ? 'dark' : 'light')
if (!currentTheme) sessionStorage?.setItem('theme', themeToSet)
root.setAttribute('data-theme', themeToSet)
})()
</script>
{{ content }}