diff --git a/bskyembed/src/color-mode.ts b/bskyembed/src/color-mode.ts index fcca48a072..b34624e312 100644 --- a/bskyembed/src/color-mode.ts +++ b/bskyembed/src/color-mode.ts @@ -9,7 +9,7 @@ export function applyTheme(theme: 'light' | 'dark') { document.documentElement.classList.add(theme) } -export function initColorMode() { +export function initSystemColorMode() { applyTheme( window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' diff --git a/bskyembed/src/screens/landing.tsx b/bskyembed/src/screens/landing.tsx index b2b6625275..880b713372 100644 --- a/bskyembed/src/screens/landing.tsx +++ b/bskyembed/src/screens/landing.tsx @@ -9,7 +9,7 @@ import logo from '../../assets/logo.svg' import { assertColorModeValues, ColorModeValues, - initColorMode, + initSystemColorMode, } from '../color-mode' import {Container} from '../components/container' import {Link} from '../components/link' @@ -26,7 +26,7 @@ export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js` const root = document.getElementById('app') if (!root) throw new Error('No root element') -initColorMode() +initSystemColorMode() const agent = new AtpAgent({ service: 'https://public.api.bsky.app', diff --git a/bskyembed/src/screens/post.tsx b/bskyembed/src/screens/post.tsx index cea698b869..e1ef3090bd 100644 --- a/bskyembed/src/screens/post.tsx +++ b/bskyembed/src/screens/post.tsx @@ -4,7 +4,7 @@ import {AppBskyFeedDefs, AtpAgent} from '@atproto/api' import {h, render} from 'preact' import logo from '../../assets/logo.svg' -import {applyTheme, assertColorModeValues, initColorMode} from '../color-mode' +import {applyTheme, initSystemColorMode} from '../color-mode' import {Container} from '../components/container' import {Link} from '../components/link' import {Post} from '../components/post' @@ -25,12 +25,18 @@ if (!uri) { const query = new URLSearchParams(window.location.search) // theme - default to light mode -const colorMode = query.get('colorMode') ?? 'light' +const colorMode = query.get('colorMode') -if (assertColorModeValues(colorMode) && colorMode !== 'system') { - applyTheme(colorMode) -} else { - initColorMode() +switch (colorMode) { + case 'dark': + applyTheme('dark') + break + case 'system': + initSystemColorMode() + break + default: + applyTheme('light') + break } agent