feat: use color-scheme + light-dark

package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "coryd.dev",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "1.7.4",
+      "version": "1.8.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
         "@cdransf/select-pagination": "^1.3.1",
-        "@cdransf/theme-toggle": "^2.0.0",
+        "@cdransf/theme-toggle": "^3.0.0",
         "@daviddarnes/mastodon-post": "^1.3.0",
         "http-proxy-middleware": "3.0.3",
         "minisearch": "^7.1.0",
@@ -391,9 +391,9 @@
       "license": "MIT"
     },
     "node_modules/@cdransf/theme-toggle": {
-      "version": "2.0.0",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-3.0.0.tgz",
-      "integrity": "sha512-cB1/xUStNF3UzAL8E6DD5IDbegyLqncZUyiZkFfv/jkEU5OJquZnjLSg6zjHOQeMcCew3tapKfYDLTtEDkzHLA==",
+      "integrity": "sha512-e7QdXP9nq2L3oTNdOoUwMncrkJ0neXE+oEG80J/hzX5wLkEKS1afOOePNbHTRTRnTAf2X3ongsXAMftezHw9Eg==",
       "license": "MIT"
     },
     "node_modules/@daviddarnes/mastodon-post": {
@@ -709,12 +709,12 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "22.7.9",
+      "version": "22.8.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.9.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.0.tgz",
-      "integrity": "sha512-jrTfRC7FM6nChvU7X2KqcrgquofrWLFDeYC1hKfwNWomVvrn7JIksqf344WN2X/y8xrgqBd2dJATZV4GbatBfg==",
+      "integrity": "sha512-84rafSBHC/z1i1E3p0cJwKA+CfYDNSXX9WSZBRopjIzLET8oNt6ht2tei4C7izwDeEiLLfdeSVBv1egOH916hg==",
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.2"
+        "undici-types": "~6.19.8"
       }
     },
     "node_modules/@types/phoenix": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {
@@ -28,7 +28,7 @@
   "dependencies": {
     "@cdransf/api-text": "^1.5.0",
     "@cdransf/select-pagination": "^1.3.1",
-    "@cdransf/theme-toggle": "^2.0.0",
+    "@cdransf/theme-toggle": "^3.0.0",
     "@daviddarnes/mastodon-post": "^1.3.0",
     "http-proxy-middleware": "3.0.3",
     "minisearch": "^7.1.0",

src/assets/styles/components/theme-toggle.css

@@ -23,32 +23,13 @@ theme-toggle {
   & > .light svg {
     stroke: var(--sun);
   }
+
   & > .dark svg {
     stroke: var(--moon);
   }
 
-  & > .light,
+  .light,
-  & > .dark {
+  .dark {
     display: none;
   }
 }
-
-[data-theme="dark"] {
-  & .theme-toggle > .light {
-    display: inline;
-  }
-
-  & .theme-toggle > .dark {
-    display: none;
-  }
-}
-
-[data-theme="light"] {
-  & .theme-toggle > .light {
-    display: none;
-  }
-
-  & .theme-toggle > .dark {
-    display: inline;
-  }
-}

src/assets/styles/defaults/vars.css

@@ -20,88 +20,55 @@
   --white: #fff;
   --black: #000;
 
-  --gray-lighter: var(--gray-200);
+  --gray-lighter: light-dark(var(--gray-200), var(--gray-700));
-  --gray-light: var(--gray-300);
+  --gray-light: light-dark(var(--gray-300), var(--gray-600));
   --gray-medium: var(--gray-400);
-  --gray-dark: var(--gray-800);
+  --gray-dark: light-dark(var(--gray-800), var(--gray-300));
 
   /* base theme */
   --color-lightest: var(--white);
   --color-darkest: var(--black);
-  --text-color: var(--color-darkest);
+  --text-color: light-dark(var(--color-darkest), var(--color-lightest));
-  --background-color: var(--color-lightest);
+  --background-color: light-dark(var(--color-lightest), var(--color-darkest));
-  --text-color-inverted: var(--color-lightest);
+  --text-color-inverted: light-dark(
-  --background-color-inverted: var(--color-darkest);
+    var(--color-lightest),
-  --accent-color: var(--blue-400);
+    var(--color-darkest)
-  --accent-color-hover: var(--blue-600);
+  );
+  --background-color-inverted: light-dark(
+    var(--color-darkest),
+    var(--color-lightest)
+  );
+  --accent-color: light-dark(var(--blue-400), var(--blue-200));
+  --accent-color-hover: light-dark(var(--blue-600), var(--blue-100));
 
-  --brand-github-light: #333;
-  --brand-github-dark: #f5f5f5;
-
-  --brand-gmail: #ea4335;
-  --brand-github: #333;
-  --brand-npm: #cc3534;
-  --brand-mastodon: #6364ff;
-  --brand-listenbrainz: #e97941;
   --brand-buy-me-a-coffee: #ff5f5f;
+  --brand-github: light-dark(#333, #f5f5f5);
+  --brand-gmail: #ea4335;
+  --brand-listenbrainz: #e97941;
+  --brand-mastodon: #6364ff;
+  --brand-npm: #cc3534;
   --brand-rss: #f26522;
 
   --moon: #6a5acd;
   --sun: #ffa500;
 
-  --article-light: #007272;
+  --article: light-dark(#007272, #00ffff);
-  --about-light: #e4513a;
+  --about: light-dark(#e4513a, #ff967d);
-  --books-light: #1a7b1a;
+  --books: light-dark(#1a7b1a, #6fff6f);
-  --collected-light: #9a501a;
+  --collected: light-dark(#9a501a, #ffae73);
-  --concerts-light: #cb426e;
+  --concerts: light-dark(#cb426e, #ff82aa);
-  --country-light: #146a67;
+  --country: light-dark(#146a67, #80dcdc);
-  --error-light: #b81f1f;
+  --error: light-dark(#b81f1f, #ff8b8b);
-  --favorite-light: #b03c72;
+  --favorite: light-dark(#b03c72, #ff9ccd);
-  --link-light: #7b5cba;
+  --link: light-dark(#7b5cba, #e2b8ff);
-  --music-light: #1565c3;
+  --music: light-dark(#1565c3, #99ccff);
-  --newsletter-light: #37b0b0;
+  --newsletter: light-dark(#37b0b0, #91fffa);
-  --now-light: #cc1076;
+  --now: light-dark(#cc1076, #ff82d5);
-  --search-light: #3a6b94;
+  --search: light-dark(#3a6b94, #a0b8d9);
-  --tattoo-light: #951b1b;
+  --tattoo: light-dark(#951b1b, #ff7373);
-  --tv-light: #cc3600;
+  --tv: light-dark(#cc3600, #ff8f66);
-  --warning-light: #cc6f00;
+  --warning: light-dark(#cc6f00, #ffbf66);
-  --webrings-light: #b054b0;
+  --webrings: light-dark(#b054b0, #ffb3ff);
-
-  --article-dark: #00ffff;
-  --about-dark: #ff967d;
-  --books-dark: #6fff6f;
-  --collected-dark: #ffae73;
-  --concerts-dark: #ff82aa;
-  --country-dark: #80dcdc;
-  --error-dark: #ff8b8b;
-  --favorite-dark: #ff9ccd;
-  --link-dark: #e2b8ff;
-  --music-dark: #99ccff;
-  --newsletter-dark: #91fffa;
-  --now-dark: #ff82d5;
-  --search-dark: #a0b8d9;
-  --tattoo-dark: #ff7373;
-  --tv-dark: #ff8f66;
-  --warning-dark: #ffbf66;
-  --webrings-dark: #ffb3ff;
-
-  --article: var(--article-light);
-  --about: var(--about-light);
-  --books: var(--books-light);
-  --collected: var(--collected-light);
-  --concerts: var(--concerts-light);
-  --country: var(--country-light);
-  --error: var(--error-light);
-  --favorite: var(--favorite-light);
-  --link: var(--link-light);
-  --music: var(--music-light);
-  --newsletter: var(--newsletter-light);
-  --now: var(--now-light);
-  --search: var(--search-light);
-  --tattoo: var(--tattoo-light);
-  --tv: var(--tv-light);
-  --warning: var(--warning-light);
-  --webrings: var(--webrings-light);
 
   /* borders */
   --border-default: 1px solid var(--accent-color);
@@ -192,107 +159,8 @@
   --text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
 
   /* modals */
-  --modal-overlay-background-light: #ffffffbf;
+  --modal-overlay-background: light-dark(#ffffffbf, #000000bf);
-  --modal-overlay-background-dark: #000000bf;
-  --modal-overlay-background: var(--modal-overlay-background-light);
 
   /* input accent color */
   accent-color: var(--accent-color);
 }
-
-/* light theme */
-:root[data-theme="light"] {
-  --text-color: var(--color-darkest);
-  --background-color: var(--color-lightest);
-  --text-color-inverted: var(--color-lightest);
-  --background-color-inverted: var(--color-darkest);
-  --accent-color: var(--blue-400);
-  --accent-color-hover: var(--blue-600);
-  --gray-light: var(--gray-300);
-  --gray-lighter: var(--gray-200);
-  --gray-dark: var(--gray-800);
-  --modal-overlay-background: var(--modal-overlay-background-light);
-  --brand-github: var(--brand-github-light);
-  --article: var(--article-light);
-  --about: var(--about-light);
-  --books: var(--books-light);
-  --collected: var(--collected-light);
-  --concerts: var(--concerts-light);
-  --country: var(--country-light);
-  --error: var(--error-light);
-  --favorite: var(--favorite-light);
-  --link: var(--link-light);
-  --music: var(--music-light);
-  --newsletter: var(--newsletter-light);
-  --now: var(--now-light);
-  --search: var(--search-light);
-  --tattoo: var(--tattoo-light);
-  --tv: var(--tv-light);
-  --warning: var(--warning-light);
-  --webrings: var(--webrings-light);
-}
-
-/* dark theme */
-:root[data-theme="dark"] {
-  --text-color: var(--color-lightest);
-  --background-color: var(--color-darkest);
-  --text-color-inverted: var(--color-darkest);
-  --background-color-inverted: var(--color-lightest);
-  --accent-color: var(--blue-200);
-  --accent-color-hover: var(--blue-100);
-  --gray-light: var(--gray-600);
-  --gray-lighter: var(--gray-700);
-  --gray-dark: var(--gray-300);
-  --modal-overlay-background: var(--modal-overlay-background-dark);
-  --brand-github: var(--brand-github-dark);
-  --article: var(--article-dark);
-  --about: var(--about-dark);
-  --books: var(--books-dark);
-  --collected: var(--collected-dark);
-  --concerts: var(--concerts-dark);
-  --country: var(--country-dark);
-  --error: var(--error-dark);
-  --favorite: var(--favorite-dark);
-  --link: var(--link-dark);
-  --music: var(--music-dark);
-  --newsletter: var(--newsletter-dark);
-  --now: var(--now-dark);
-  --search: var(--search-dark);
-  --tattoo: var(--tattoo-dark);
-  --tv: var(--tv-dark);
-  --warning: var(--warning-dark);
-  --webrings: var(--webrings-dark);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text-color: var(--color-lightest);
-    --background-color: var(--color-darkest);
-    --text-color-inverted: var(--color-darkest);
-    --background-color-inverted: var(--color-lightest);
-    --accent-color: var(--blue-200);
-    --accent-color-hover: var(--blue-100);
-    --gray-light: var(--gray-600);
-    --gray-lighter: var(--gray-700);
-    --gray-dark: var(--gray-300);
-    --modal-overlay-background: var(--modal-overlay-background-dark);
-    --brand-github: var(--brand-github-dark);
-    --article: var(--article-dark);
-    --about: var(--about-dark);
-    --books: var(--books-dark);
-    --collected: var(--collected-dark);
-    --concerts: var(--concerts-dark);
-    --country: var(--country-dark);
-    --error: var(--error-dark);
-    --favorite: var(--favorite-dark);
-    --link: var(--link-dark);
-    --music: var(--music-dark);
-    --newsletter: var(--newsletter-dark);
-    --now: var(--now-dark);
-    --search: var(--search-dark);
-    --tattoo: var(--tattoo-dark);
-    --tv: var(--tv-dark);
-    --warning: var(--warning-dark);
-    --webrings: var(--webrings-dark);
-  }
-}

src/includes/base.liquid

@@ -54,6 +54,7 @@
     <link rel="preload" href="/assets/fonts/mlb.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="stylesheet" href="/assets/styles/index.css?v={% appVersion %}" type="text/css" />
     <link rel="canonical" href="{{ fullUrl }}" />
+    <meta name="color-scheme" content="light dark">
     <meta property="og:title" content="{{ pageTitle }}" data-dynamic="og:title" />
     <meta name="description" content="{{ escapedPageDescription }}" data-dynamic="description" />
     <meta property="og:description" content="{{ escapedPageDescription }}" data-dynamic="og:description" />
@@ -83,13 +84,13 @@
   <body>
     <script>
       (() => {
-        const currentTheme = sessionStorage?.getItem('theme')
+        const currentTheme = sessionStorage.getItem('theme');
-        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        const metaColorScheme = document.querySelector('meta[name="color-scheme"]');
-        const root = document.documentElement
+        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const themeToSet = currentTheme || (prefersDarkScheme ? 'dark' : 'light')
+        const themeToSet = currentTheme || (prefersDarkScheme ? 'dark' : 'light');
-        if (!currentTheme) sessionStorage?.setItem('theme', themeToSet)
+        if (!currentTheme) sessionStorage.setItem('theme', themeToSet);
-        root.setAttribute('data-theme', themeToSet)
+        metaColorScheme.setAttribute('content', themeToSet);
-      })()
+      })();
     </script>
     {{ content }}
   </body>