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>

1 files changed, 7 insertions, 1 deletions

diff --git a/bskyembed/src/color-mode.ts b/bskyembed/src/color-mode.ts
index 2b392c617..b34624e31 100644
--- a/bskyembed/src/color-mode.ts
+++ b/bskyembed/src/color-mode.ts
@@ -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'