[bskyembed] Fix landing page for iOS 26 safari dark mode (#10257)

This commit is contained in:
Samuel Newman
2026-04-15 10:05:22 -07:00
committed by GitHub
parent ecc78efb12
commit 19e2dc939a
2 changed files with 7 additions and 3 deletions
+5 -1
View File
@@ -9,7 +9,11 @@ export function applyTheme(theme: 'light' | 'dark') {
document.documentElement.classList.add(theme) document.documentElement.classList.add(theme)
} }
export function initSystemColorMode() { export function initSystemColorMode({additionalBodyClasses = ''} = {}) {
if (additionalBodyClasses) {
document.body.classList.add(additionalBodyClasses)
}
applyTheme( applyTheme(
window.matchMedia('(prefers-color-scheme: dark)').matches window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark' ? 'dark'
+2 -2
View File
@@ -28,7 +28,7 @@ export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js`
const root = document.getElementById('app') const root = document.getElementById('app')
if (!root) throw new Error('No root element') if (!root) throw new Error('No root element')
initSystemColorMode() initSystemColorMode({additionalBodyClasses: 'dark:bg-dimmedBgDarken'})
const agent = new AtpAgent({ const agent = new AtpAgent({
service: 'https://public.api.bsky.app', service: 'https://public.api.bsky.app',
@@ -119,7 +119,7 @@ function LandingPage() {
}, [uri]) }, [uri])
return ( return (
<main className="w-full min-h-screen flex flex-col items-center gap-8 py-14 px-4 md:pt-32 dark:bg-dimmedBgDarken dark:text-slate-200"> <main className="w-full min-h-dvh flex flex-col items-center gap-8 py-14 px-4 md:pt-32 dark:text-slate-200">
<Link <Link
href="https://bsky.social/about" href="https://bsky.social/about"
className="transition-transform hover:scale-110"> className="transition-transform hover:scale-110">