diff --git a/bskyembed/src/components/container.tsx b/bskyembed/src/components/container.tsx
index 906c1c4653..8e142a25be 100644
--- a/bskyembed/src/components/container.tsx
+++ b/bskyembed/src/components/container.tsx
@@ -37,7 +37,7 @@ export function Container({
   return (
     <div
       ref={ref}
-      className="w-full bg-white hover:bg-neutral-50 dark:bg-dimmedBg dark:hover:bg-dimmedBgLighten relative transition-colors max-w-[600px] min-w-[300px] flex border dark:border-slate-600 dark:text-slate-200 rounded-xl"
+      className="w-full bg-white text-black hover:bg-neutral-50 dark:bg-dimmedBg dark:hover:bg-dimmedBgLighten relative transition-colors max-w-[600px] min-w-[300px] flex border dark:border-slate-600 dark:text-slate-200 rounded-xl"
       onClick={() => {
         if (ref.current && href) {
           // forwardRef requires preact/compat - let's keep it simple
diff --git a/bskyembed/tailwind.config.cjs b/bskyembed/tailwind.config.cjs
index c3b01c6094..0e9f5b8eaa 100644
--- a/bskyembed/tailwind.config.cjs
+++ b/bskyembed/tailwind.config.cjs
@@ -2,8 +2,7 @@
 module.exports = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   darkMode: ['variant', [
-    '&:is(.dark *)',
-    '@media (prefers-color-scheme: dark) { &:not(.light *) }',
+    '&:is(.dark *):not(:is(.dark .light *))',
   ]],
   theme: {
     extend: {