Fix tailwind dark selector

src-web/components/Dialog.tsx

@@ -1,7 +1,6 @@
+import * as D from '@radix-ui/react-dialog';
 import classnames from 'classnames';
 import React from 'react';
-import * as D from '@radix-ui/react-dialog';
-import { Cross2Icon } from '@radix-ui/react-icons';
 import { IconButton } from './IconButton';
 import { HStack, VStack } from './Stacks';
 
@@ -17,7 +16,7 @@ export function Dialog({ children, open, onOpenChange, title, description }: Pro
   return (
     <D.Root open={open} onOpenChange={onOpenChange}>
       <D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
-        <D.Overlay className="fixed inset-0 bg-background/80" />
+        <D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-background opacity-80" />
         <D.Content
           className={classnames(
             'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50 w-[20rem] max-h-[20rem]',

src-web/components/Dropdown.tsx

@@ -91,8 +91,6 @@ export function Dropdown({ children, items }: DropdownProps) {
   );
 }
 
-const dropdownMenuClasses = 'bg-background rounded-md shadow-lg p-1.5 border border-gray-100';
-
 interface DropdownMenuPortalProps {
   children: ReactNode;
 }
@@ -137,7 +135,11 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProp
       <D.Content
         ref={initDivRef}
         align="start"
-        className={classnames(className, dropdownMenuClasses, 'overflow-auto m-1')}
+        className={classnames(
+          className,
+          'bg-background rounded-md shadow-lg p-1.5 border border-gray-100',
+          'overflow-auto m-1',
+        )}
         style={styles}
         {...props}
       >
@@ -161,7 +163,7 @@ function DropdownMenuItem({
     <D.Item
       asChild
       disabled={disabled}
-      className={classnames(className, { 'opacity-30': disabled })}
+      className={classnames(className, disabled && 'opacity-30')}
       {...props}
     >
       <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>

src-web/components/Input.tsx

@@ -1,8 +1,7 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
-import classnames from 'classnames';
-import { placeholders } from './Editor/widgets';
-import { HStack, VStack } from './Stacks';
-import Editor from './Editor/Editor';
+import classnames from "classnames";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import Editor from "./Editor/Editor";
+import { HStack, VStack } from "./Stacks";
 
 interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
   name: string;

src-web/main.css

@@ -18,8 +18,11 @@
 html, body, #root {
     width: 100%;
     height: 100%;
-    background-color: hsl(var(--color-background));
     overflow: hidden;
+
+    /* Default colors */
+    background-color: hsl(var(--color-background));
+    color: hsl(var(--color-gray-900));
 }
 
 * {

tailwind.config.cjs

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+    darkMode: ['class', '[data-theme="dark"]'],
     content: [
         "./index.html",
         "./src-web/**/*.{js,ts,jsx,tsx}",