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

4
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "24.5.8", "version": "24.6.0",
"description": "The source for my personal site. Built using 11ty (and other tools).", "description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module", "type": "module",
"scripts": { "scripts": {
@ -27,7 +27,7 @@
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.5.0", "@cdransf/api-text": "^1.5.0",
"@cdransf/select-pagination": "^1.3.1", "@cdransf/select-pagination": "^1.3.1",
"@cdransf/theme-toggle": "^1.3.2", "@cdransf/theme-toggle": "^2.0.0",
"minisearch": "^7.1.0", "minisearch": "^7.1.0",
"youtube-video-element": "^1.1.6" "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 { & .theme-toggle > .light {
display: inline; display: inline;
} }
@ -39,7 +39,7 @@ theme-toggle {
} }
} }
.theme__light { [data-theme="light"] {
& .theme-toggle > .light { & .theme-toggle > .light {
display: none; display: none;
} }

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

@ -147,7 +147,7 @@
} }
/* dark theme */ /* dark theme */
:root.theme__dark { :root[data-theme="dark"] {
--text-color: var(--color-lightest); --text-color: var(--color-lightest);
--background-color: var(--color-darkest); --background-color: var(--color-darkest);
--text-color-inverted: 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 currentTheme = sessionStorage?.getItem('theme')
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
const root = document.getElementsByTagName('html')[0] const root = document.documentElement
if (!currentTheme) sessionStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light')) const themeToSet = currentTheme || (prefersDarkScheme ? 'dark' : 'light')
root.classList.add(`theme__${currentTheme || (prefersDarkScheme ? 'dark' : 'light')}`) if (!currentTheme) sessionStorage?.setItem('theme', themeToSet)
root.setAttribute('data-theme', themeToSet)
})() })()
</script> </script>
{{ content }} {{ content }}