« get me outta code hell

better theme colors - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2022-12-28 22:31:21 -0400
committer(quasar) nebula <qznebula@protonmail.com>2022-12-28 22:31:21 -0400
commitf09d71082b755a7ef652cf1c9eee5c27c9386701 (patch)
tree27d33c703be27f07206563953848b93b551dbf1a /src
parent65e77ad3a66cd61910f916a26da1f4ce7be54dcf (diff)
better theme colors
Diffstat (limited to 'src')
-rwxr-xr-xsrc/upd8.js24
-rw-r--r--src/util/colors.js2
2 files changed, 21 insertions, 5 deletions
diff --git a/src/upd8.js b/src/upd8.js
index d7350264..35ed7549 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -1231,11 +1231,25 @@ export function generateDocumentHTML(pageInfo, {
     socialEmbed.image &&
       html.tag('meta', {property: 'og:image', content: socialEmbed.image}),
 
-    colors &&
-      html.tag('meta', {
-        name: 'theme-color',
-        content: colors.dark,
-      }),
+    ...html.fragment(
+      colors && [
+        html.tag('meta', {
+          name: 'theme-color',
+          content: colors.dark,
+          media: '(prefers-color-scheme: dark)',
+        }),
+
+        html.tag('meta', {
+          name: 'theme-color',
+          content: colors.light,
+          media: '(prefers-color-scheme: light)',
+        }),
+
+        html.tag('meta', {
+          name: 'theme-color',
+          content: colors.primary,
+        }),
+      ]),
 
     oEmbedJSONHref &&
       html.tag('link', {
diff --git a/src/util/colors.js b/src/util/colors.js
index dea67123..c9ef69bf 100644
--- a/src/util/colors.js
+++ b/src/util/colors.js
@@ -12,6 +12,7 @@ export function getColors(themeColor, {
 
   const dark = primary.luminance(0.02);
   const dim = primary.desaturate(2).darken(1.5);
+  const light = chroma.average(['#ffffff', primary], 'rgb', [4, 1]);
 
   const bg = primary.luminance(0.008).desaturate(3.5).alpha(0.8);
   const bgBlack = primary.saturate(1).luminance(0.0025).alpha(0.8);
@@ -25,6 +26,7 @@ export function getColors(themeColor, {
 
     dark: dark.hex(),
     dim: dim.hex(),
+    light: light.hex(),
 
     bg: bg.hex(),
     bgBlack: bgBlack.hex(),