diff --git a/account-kit/react/src/tailwind/plugin.ts b/account-kit/react/src/tailwind/plugin.ts
index b6b3e7a724..73c097cf99 100644
--- a/account-kit/react/src/tailwind/plugin.ts
+++ b/account-kit/react/src/tailwind/plugin.ts
@@ -132,6 +132,13 @@ export const withAccountKitUi = (
config: TailwindConfig,
themeOverride?: AccountKitThemeOverride
): TailwindConfig => ({
+ darkMode: [
+ "variant",
+ [
+ "@media (prefers-color-scheme: dark) { &:not(.light, .light *) }",
+ "&:is(.dark, .dark *)",
+ ],
+ ],
...config,
content: Array.isArray(config.content)
? [...config.content, getAccountKitContentPath()]
diff --git a/examples/ui-demo/src/app/layout.tsx b/examples/ui-demo/src/app/layout.tsx
index b7dd1df351..75196d909e 100644
--- a/examples/ui-demo/src/app/layout.tsx
+++ b/examples/ui-demo/src/app/layout.tsx
@@ -16,7 +16,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
+
{children}
);
diff --git a/examples/ui-demo/src/app/providers.tsx b/examples/ui-demo/src/app/providers.tsx
index 26b2aaa29c..37aeb644dd 100644
--- a/examples/ui-demo/src/app/providers.tsx
+++ b/examples/ui-demo/src/app/providers.tsx
@@ -34,11 +34,13 @@ export const Providers = (props: PropsWithChildren<{}>) => {
const root = document.querySelector(':root') as HTMLElement;
root?.style.setProperty("--akui-fg-accent-brand", config.ui.primaryColor)
root?.style.setProperty("--akui-btn-primary", config.ui.primaryColor)
-
+
if (config.ui.theme === 'dark') {
+ root.classList.remove("light")
root.classList.add("dark")
} else {
root.classList.remove("dark")
+ root.classList.add("light")
}
}, [config])
diff --git a/examples/ui-demo/src/components/icons/code.tsx b/examples/ui-demo/src/components/icons/code.tsx
index 719a0a84d1..8d2ab17f7f 100644
--- a/examples/ui-demo/src/components/icons/code.tsx
+++ b/examples/ui-demo/src/components/icons/code.tsx
@@ -10,12 +10,13 @@ export const Code = ({
viewBox="0 0 14 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
+ {...props}
>
);
diff --git a/examples/ui-demo/src/components/icons/illustration-style.tsx b/examples/ui-demo/src/components/icons/illustration-style.tsx
index d5d40942f7..eafbae49a2 100644
--- a/examples/ui-demo/src/components/icons/illustration-style.tsx
+++ b/examples/ui-demo/src/components/icons/illustration-style.tsx
@@ -19,8 +19,8 @@ export const IllustrationStyle = ({
{...props}
>
@@ -54,8 +54,8 @@ export const IllustrationStyle = ({
fill="currentColor"
/>
@@ -92,20 +92,20 @@ export const IllustrationStyle = ({
fill="currentColor"
/>
@@ -131,20 +131,20 @@ export const IllustrationStyle = ({
fill="currentColor"
/>
diff --git a/examples/ui-demo/tailwind.config.ts b/examples/ui-demo/tailwind.config.ts
index 18c3f4d9c3..15aa8b0bd7 100644
--- a/examples/ui-demo/tailwind.config.ts
+++ b/examples/ui-demo/tailwind.config.ts
@@ -2,7 +2,6 @@ import { withAccountKitUi } from "@account-kit/react/tailwind";
import type { Config } from "tailwindcss";
const config = {
- darkMode: "selector",
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
@@ -79,4 +78,4 @@ const config = {
plugins: [require("tailwindcss-animate")],
} satisfies Config
-export default withAccountKitUi(config);
\ No newline at end of file
+export default withAccountKitUi(config);