diff --git a/bskyembed/src/color-mode.ts b/bskyembed/src/color-mode.ts index 2b392c6178..7cbdfd4801 100644 --- a/bskyembed/src/color-mode.ts +++ b/bskyembed/src/color-mode.ts @@ -1,3 +1,9 @@ +export type ColorModeValues = 'auto' | 'light' | 'dark' + +export function assertColorModeValues(value: string): value is ColorModeValues { + return ['auto', 'light', 'dark'].includes(value) +} + export function applyTheme(theme: 'light' | 'dark') { document.documentElement.classList.remove('light', 'dark') document.documentElement.classList.add(theme) diff --git a/bskyembed/src/screens/landing.tsx b/bskyembed/src/screens/landing.tsx index 14aa0497cd..856b28f0e1 100644 --- a/bskyembed/src/screens/landing.tsx +++ b/bskyembed/src/screens/landing.tsx @@ -6,7 +6,7 @@ import {useEffect, useMemo, useRef, useState} from 'preact/hooks' import arrowBottom from '../../assets/arrowBottom_stroke2_corner0_rounded.svg' import logo from '../../assets/logo.svg' -import {initColorMode} from '../color-mode' +import {assertColorModeValues, initColorMode} from '../color-mode' import {Container} from '../components/container' import {Link} from '../components/link' import {Post} from '../components/post' @@ -30,11 +30,6 @@ const agent = new BskyAgent({ render(, root) -type ColorModeValues = 'auto' | 'light' | 'dark' -function assertColorModeValues(value: string): value is ColorModeValues { - return ['auto', 'light', 'dark'].includes(value) -} - function LandingPage() { const [uri, setUri] = useState('') const [colorMode, setColorMode] = useState<'auto' | 'light' | 'dark'>('auto') diff --git a/bskyembed/src/screens/post.tsx b/bskyembed/src/screens/post.tsx index 1764442b73..5eacc3e632 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 {initColorMode} from '../color-mode' +import {applyTheme, assertColorModeValues, initColorMode} from '../color-mode' import {Container} from '../components/container' import {Link} from '../components/link' import {Post} from '../components/post' @@ -22,7 +22,18 @@ if (!uri) { throw new Error('No uri in path') } -initColorMode() +const query = new URLSearchParams(window.location.search) +const colorMode = query.get('colorMode') + +if ( + colorMode != null && + assertColorModeValues(colorMode) && + colorMode !== 'auto' +) { + applyTheme(colorMode) +} else { + initColorMode() +} agent .getPostThread({