diff options
| -rwxr-xr-x | src/upd8.js | 24 | ||||
| -rw-r--r-- | src/util/colors.js | 2 |
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(), |