forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1export type ColorModeValues = 'system' | 'light' | 'dark'
2
3export function assertColorModeValues(value: string): value is ColorModeValues {
4 return ['system', 'light', 'dark'].includes(value)
5}
6
7export function applyTheme(theme: 'light' | 'dark') {
8 document.documentElement.classList.remove('light', 'dark')
9 document.documentElement.classList.add(theme)
10}
11
12export function initSystemColorMode({additionalBodyClasses = ''} = {}) {
13 if (additionalBodyClasses) {
14 document.body.classList.add(additionalBodyClasses)
15 }
16
17 applyTheme(
18 window.matchMedia('(prefers-color-scheme: dark)').matches
19 ? 'dark'
20 : 'light',
21 )
22 window
23 .matchMedia('(prefers-color-scheme: dark)')
24 .addEventListener('change', mql => {
25 applyTheme(mql.matches ? 'dark' : 'light')
26 })
27}