enhance(embed): add ability to pin color mode (#7186)

* 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>
This commit is contained in:
Samuel Newman
2025-03-05 17:24:59 +00:00
committed by GitHub
parent 01a51c3275
commit 2d854091b9
6 changed files with 96 additions and 23 deletions
+7 -1
View File
@@ -1,9 +1,15 @@
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 initColorMode() {
export function initSystemColorMode() {
applyTheme(
window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'