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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
package-lock.json generated
View file

@ -1,17 +1,17 @@
{
"name": "coryd.dev",
"version": "24.5.8",
"version": "24.6.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
"version": "24.5.8",
"version": "24.6.0",
"license": "MIT",
"dependencies": {
"@cdransf/api-text": "^1.5.0",
"@cdransf/select-pagination": "^1.3.1",
"@cdransf/theme-toggle": "^1.3.2",
"@cdransf/theme-toggle": "^2.0.0",
"minisearch": "^7.1.0",
"youtube-video-element": "^1.1.6"
},
@ -382,9 +382,9 @@
"license": "MIT"
},
"node_modules/@cdransf/theme-toggle": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.3.2.tgz",
"integrity": "sha512-xjsqvMT9Ee2+IDGeLSG31I0yh2Ebd4QqRfPEVn/VLk7BPB44ONj5f600z2Lor7WHfOmRg7L/bWvwWpPmgUAZ4w==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-2.0.0.tgz",
"integrity": "sha512-cB1/xUStNF3UzAL8E6DD5IDbegyLqncZUyiZkFfv/jkEU5OJquZnjLSg6zjHOQeMcCew3tapKfYDLTtEDkzHLA==",
"license": "MIT"
},
"node_modules/@isaacs/cliui": {

4
package.json
View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "24.5.8",
"version": "24.6.0",
"description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module",
"scripts": {
@ -27,7 +27,7 @@
"dependencies": {
"@cdransf/api-text": "^1.5.0",
"@cdransf/select-pagination": "^1.3.1",
"@cdransf/theme-toggle": "^1.3.2",
"@cdransf/theme-toggle": "^2.0.0",
"minisearch": "^7.1.0",
"youtube-video-element": "^1.1.6"
},

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 }}