feat(styles): Apply dark mode styles to root theme

Author: Ehesp

packages/styles/src/base.css

@@ -14,21 +14,7 @@
  * limitations under the License.
  */
 
-@theme {
-  --color-primary: var(--fui-primary);
-  --color-primary-hover: var(--fui-primary-hover);
-  --color-primary-surface: var(--fui-primary-surface);
-  --color-text: var(--fui-text);
-  --color-text-muted: var(--fui-text-muted);
-  --color-background: var(--fui-background);
-  --color-border: var(--fui-border);
-  --color-input: var(--fui-input);
-  --color-error: var(--fui-error);
-  --radius: var(--fui-radius);
-  --radius-card: var(--fui-radius-card);
-}
-
-@layer theme {
+ @layer theme {
   :root {
     /* The primary color is used for the button and link colors */
     --fui-primary: var(--color-black);
@@ -53,6 +39,38 @@
     /* The radius used for the cards */
     --fui-radius-card: var(--radius-xl);
   }
+
+  /* Apply dark mode styles when the dark variant is applied */
+  /* See https://tailwindcss.com/docs/dark-mode */
+  @variant dark {
+    :root {
+      --fui-primary: var(--color-white);
+      --fui-primary-hover: --alpha(var(--fui-primary) / 85%);
+      --fui-primary-surface: var(--color-black);
+      --fui-text: var(--color-white);
+      --fui-text-muted: var(--color-gray-200);
+      --fui-background: var(--color-black);
+      --fui-border: var(--color-gray-200);
+      --fui-input: var(--color-gray-300);
+      --fui-error: var(--color-red-500);
+      --fui-radius: var(--radius-sm);
+      --fui-radius-card: var(--radius-xl);
+    }
+  }
+}
+
+@theme {
+  --color-primary: var(--fui-primary);
+  --color-primary-hover: var(--fui-primary-hover);
+  --color-primary-surface: var(--fui-primary-surface);
+  --color-text: var(--fui-text);
+  --color-text-muted: var(--fui-text-muted);
+  --color-background: var(--fui-background);
+  --color-border: var(--fui-border);
+  --color-input: var(--fui-input);
+  --color-error: var(--fui-error);
+  --radius: var(--fui-radius);
+  --radius-card: var(--fui-radius-card);
 }
 
 @layer components {