feat(embed): Add support for dark mode (#6912)

* feat(embed): Support dark mode (wip)

* finishing up the implementation

* fix tailwind color selector

* tweak design

* refactor: unify types

* fix

* fix english grammar

* refactor: unify types

* tweak design

* remove the customization part

bskyembed/src/screens/post.tsx

@@ -4,6 +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 {Container} from '../components/container'
 import {Link} from '../components/link'
 import {Post} from '../components/post'
@@ -21,6 +22,8 @@ if (!uri) {
   throw new Error('No uri in path')
 }
 
+initColorMode()
+
 agent
   .getPostThread({
     uri,
@@ -55,13 +58,13 @@ function PwiOptOut({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
         <img src={logo} className="h-6" />
       </Link>
       <div className="w-full py-12 gap-4 flex flex-col items-center">
-        <p className="max-w-80 text-center w-full text-textLight">
+        <p className="max-w-80 text-center w-full text-textLight dark:text-textDimmed">
           The author of this post has requested their posts not be displayed on
           external sites.
         </p>
         <Link
           href={href}
-          className="max-w-80 rounded-lg bg-brand text-white color-white text-center py-1 px-4 w-full mx-auto">
+          className="max-w-80 rounded-lg bg-brand text-white text-center py-1 px-4 w-full mx-auto">
           View on Bluesky
         </Link>
       </div>
@@ -77,7 +80,7 @@ function ErrorMessage() {
         className="transition-transform hover:scale-110 absolute top-4 right-4">
         <img src={logo} className="h-6" />
       </Link>
-      <p className="my-16 text-center w-full text-textLight">
+      <p className="my-16 text-center w-full text-textLight dark:text-textDimmed">
         Post not found, it may have been deleted.
       </p>
     </Container>