more explicit color mode select

bluesky-social · Dec 19, 2024 · e018d9f · e018d9f
1 parent df5f3a5
commit e018d9f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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