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

feat: add auto theme mode

Browse source
This commit is contained in:
Cory Dransfeldt 2024-10-26 18:16:52 -07:00
parent ab2d732ec5
commit 50640d0590
No known key found for this signature in database
6 changed files with 39 additions and 15 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": "2.0.2", "version": "2.1.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "2.0.2", "version": "2.1.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.6.0", "@cdransf/api-text": "^1.6.0",
"@cdransf/select-pagination": "^1.3.1", "@cdransf/select-pagination": "^1.3.1",
"@cdransf/theme-toggle": "^3.0.0", "@cdransf/theme-toggle": "^3.1.0",
"@daviddarnes/mastodon-post": "^1.3.0", "@daviddarnes/mastodon-post": "^1.3.0",
"http-proxy-middleware": "3.0.3", "http-proxy-middleware": "3.0.3",
"minisearch": "^7.1.0", "minisearch": "^7.1.0",
@ -391,9 +391,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@cdransf/theme-toggle": { "node_modules/@cdransf/theme-toggle": {
"version": "3.0.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-3.0.0.tgz", "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-3.1.0.tgz",
"integrity": "sha512-e7QdXP9nq2L3oTNdOoUwMncrkJ0neXE+oEG80J/hzX5wLkEKS1afOOePNbHTRTRnTAf2X3ongsXAMftezHw9Eg==", "integrity": "sha512-uNX0cVc9M9u7p5o8Kl1hGGDtS/6gvuoGgJCQ5NWW4AwV+/bASBLOPZnlr2MH8K5UhYgakYAkTld/ex3fxj/VGQ==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@daviddarnes/mastodon-post": { "node_modules/@daviddarnes/mastodon-post": {

4
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "2.0.2", "version": "2.1.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",
"engines": { "engines": {
@ -28,7 +28,7 @@
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.6.0", "@cdransf/api-text": "^1.6.0",
"@cdransf/select-pagination": "^1.3.1", "@cdransf/select-pagination": "^1.3.1",
"@cdransf/theme-toggle": "^3.0.0", "@cdransf/theme-toggle": "^3.1.0",
"@daviddarnes/mastodon-post": "^1.3.0", "@daviddarnes/mastodon-post": "^1.3.0",
"http-proxy-middleware": "3.0.3", "http-proxy-middleware": "3.0.3",
"minisearch": "^7.1.0", "minisearch": "^7.1.0",

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

@ -28,6 +28,23 @@ theme-toggle {
stroke: var(--moon); stroke: var(--moon);
} }
& > .auto svg {
& path:nth-of-type(3) {
stroke: var(--moon);
}
& path:nth-of-type(2),
& path:nth-of-type(4),
& path:nth-of-type(5),
& path:nth-of-type(6) {
stroke: var(--sun);
}
& path:nth-of-type(7) {
stroke: var(--twilight);
}
}
.light, .light,
.dark { .dark {
display: none; display: none;

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

@ -51,6 +51,7 @@
--moon: #6a5acd; --moon: #6a5acd;
--sun: #ffa500; --sun: #ffa500;
--twilight: #9e7485;
--article: light-dark(#007272, #00ffff); --article: light-dark(#007272, #00ffff);
--about: light-dark(#e4513a, #ff967d); --about: light-dark(#e4513a, #ff967d);

7
src/includes/nav/theme-toggle.liquid
View file

@ -1,7 +1,10 @@
<script type="module" src="/assets/scripts/components/theme-toggle.js?v={% appVersion %}" crossorigin="anonymous"></script> <script type="module" src="/assets/scripts/components/theme-toggle.js?v={% appVersion %}" crossorigin="anonymous"></script>
<span class="client-side"> <span class="client-side">
<theme-toggle> <theme-toggle mode="control">
<button aria-label="Light and dark theme toggle" class="theme-toggle"> <button aria-label="Auto, light, dark theme control" class="theme-toggle">
<span class="auto">
{% tablericon "sun-moon" %}
</span>
<span class="light"> <span class="light">
{% tablericon "sun" %} {% tablericon "sun" %}
</span> </span>

13
src/layouts/base.liquid
View file

@ -49,12 +49,15 @@
<body> <body>
<script> <script>
(() => { (() => {
const currentTheme = sessionStorage.getItem('theme'); const currentTheme = sessionStorage.getItem("theme") || "auto";
const metaColorScheme = document.querySelector('meta[name="color-scheme"]'); const metaColorScheme = document.querySelector('meta[name="color-scheme"]');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches; if (currentTheme === "auto") {
const themeToSet = currentTheme || (prefersDarkScheme ? 'dark' : 'light'); metaColorScheme.setAttribute("content", "light dark");
if (!currentTheme) sessionStorage.setItem('theme', themeToSet); document.documentElement.style.colorScheme = "";
metaColorScheme.setAttribute('content', themeToSet); } else {
metaColorScheme.setAttribute("content", currentTheme);
document.documentElement.style.colorScheme = currentTheme;
}
})(); })();
</script> </script>
<div class="main-wrapper"> <div class="main-wrapper">