Samuel Newman
2d854091b9
* enhance(embed): add ability to pin color mode * fix: Move color mode dropdown to the root section * auto -> system * style tweaks * default to light theme * try and fix eslint * fix dropdown styles on other browsers * rm unnecessary eslintrc change * more explicit color mode select * make light explicit --------- Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
24 lines
670 B
TypeScript
24 lines
670 B
TypeScript
export type ColorModeValues = 'system' | 'light' | 'dark'
|
|
|
|
export function assertColorModeValues(value: string): value is ColorModeValues {
|
|
return ['system', 'light', 'dark'].includes(value)
|
|
}
|
|
|
|
export function applyTheme(theme: 'light' | 'dark') {
|
|
document.documentElement.classList.remove('light', 'dark')
|
|
document.documentElement.classList.add(theme)
|
|
}
|
|
|
|
export function initSystemColorMode() {
|
|
applyTheme(
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
? 'dark'
|
|
: 'light',
|
|
)
|
|
window
|
|
.matchMedia('(prefers-color-scheme: dark)')
|
|
.addEventListener('change', mql => {
|
|
applyTheme(mql.matches ? 'dark' : 'light')
|
|
})
|
|
}
|