finishing up the implementation

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)

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(<LandingPage />, 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')

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({