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

8
package-lock.json generated
View file

@ -10,7 +10,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.1.0", "@cdransf/api-text": "^1.1.0",
"@cdransf/theme-toggle": "^1.2.2", "@cdransf/theme-toggle": "^1.2.3",
"@daviddarnes/mastodon-post": "^1.1.1", "@daviddarnes/mastodon-post": "^1.1.1",
"@remy/webmention": "^1.5.0", "@remy/webmention": "^1.5.0",
"@zachleat/pagefind-search": "^1.0.3", "@zachleat/pagefind-search": "^1.0.3",
@ -1235,9 +1235,9 @@
"integrity": "sha512-gPHWl6PWM4oXNgHbTZ5quj6c9B6DxgeCp4IX1vx4I+5A+pQhKvsO59JaXpEW8Fgdey3rWwgJq2TIkO5zspBdZg==" "integrity": "sha512-gPHWl6PWM4oXNgHbTZ5quj6c9B6DxgeCp4IX1vx4I+5A+pQhKvsO59JaXpEW8Fgdey3rWwgJq2TIkO5zspBdZg=="
}, },
"node_modules/@cdransf/theme-toggle": { "node_modules/@cdransf/theme-toggle": {
"version": "1.2.2", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.2.2.tgz", "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.2.3.tgz",
"integrity": "sha512-EPfNRs4sd3DFPWeylzQG8zTn5zhKL9xdeHr68GuDSiWcz3+kEMZrUwkQ9BvALSzaZC0E51dP0tvnYx2V6U8lYg==" "integrity": "sha512-K2NniEup/OFgSH+cqG2plY5iPFBevu7mMrz10HL1KzcEulA8AxPyPDcuOAC0Hdt7OpWAIzAk0hB0wvI7g8KW3A=="
}, },
"node_modules/@daviddarnes/mastodon-post": { "node_modules/@daviddarnes/mastodon-post": {
"version": "1.1.1", "version": "1.1.1",

4
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "6.9.4", "version": "6.9.5",
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
"type": "module", "type": "module",
"scripts": { "scripts": {
@ -22,7 +22,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.1.0", "@cdransf/api-text": "^1.1.0",
"@cdransf/theme-toggle": "^1.2.2", "@cdransf/theme-toggle": "^1.2.3",
"@daviddarnes/mastodon-post": "^1.1.1", "@daviddarnes/mastodon-post": "^1.1.1",
"@remy/webmention": "^1.5.0", "@remy/webmention": "^1.5.0",
"@zachleat/pagefind-search": "^1.0.3", "@zachleat/pagefind-search": "^1.0.3",

9
src/_includes/base.liquid
View file

@ -90,15 +90,16 @@
(() => { (() => {
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];
if (!currentTheme) sessionStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light')) if (!currentTheme) sessionStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
if (currentTheme === 'dark') { if (currentTheme === 'dark') {
document.body.classList.add('theme__dark') root.classList.add('theme__dark')
} else if (currentTheme === 'light') { } else if (currentTheme === 'light') {
document.body.classList.add('theme__light') root.classList.add('theme__light')
} else if (prefersDarkScheme) { } else if (prefersDarkScheme) {
document.body.classList.add('theme__dark') root.classList.add('theme__dark')
} else if (!prefersDarkScheme) { } else if (!prefersDarkScheme) {
document.body.classList.add('theme__light') root.classList.add('theme__light')
} }
})(); })();
</script> </script>

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

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