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>

bskyembed/src/screens/post.tsx

@@ -4,7 +4,7 @@ import {AppBskyFeedDefs, AtpAgent} from '@atproto/api'
 import {h, render} from 'preact'
 
 import logo from '../../assets/logo.svg'
-import {initColorMode} from '../color-mode'
+import {applyTheme, initSystemColorMode} from '../color-mode'
 import {Container} from '../components/container'
 import {Link} from '../components/link'
 import {Post} from '../components/post'
@@ -22,7 +22,23 @@ if (!uri) {
   throw new Error('No uri in path')
 }
 
-initColorMode()
+const query = new URLSearchParams(window.location.search)
+
+// theme - default to light mode
+const colorMode = query.get('colorMode')
+
+switch (colorMode) {
+  case 'dark':
+    applyTheme('dark')
+    break
+  case 'system':
+    initSystemColorMode()
+    break
+  case 'light':
+  default:
+    applyTheme('light')
+    break
+}
 
 agent
   .getPostThread({