From f09d71082b755a7ef652cf1c9eee5c27c9386701 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 28 Dec 2022 22:31:21 -0400 Subject: better theme colors --- src/upd8.js | 24 +++++++++++++++++++----- src/util/colors.js | 2 ++ 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/upd8.js b/src/upd8.js index d735026..35ed754 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 dea6712..c9ef69b 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(), -- cgit 1.3.0-6-gf8a5