feat: respect OS or root class for dark mode (#759)

alchemyplatform · Aug 13, 2024 · 5fec28e · 5fec28e
1 parent 72ac2e0
commit 5fec28e
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 22 deletions.
diff --git 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
@@ -16,7 +16,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="light">
       <body className={inter.className}><Providers>{children}</Providers></body>
     </html>
   );

diff --git 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
@@ -10,12 +10,13 @@ export const Code = ({
     viewBox="0 0 14 10"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
     <path
       d="M6.19961 8.8002L7.79961 1.2002M2.99961 7.6002L0.599609 5.2002L2.99961 2.8002M10.9996 2.8002L13.3996 5.2002L10.9996 7.6002"
       stroke="#020617"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );
diff --git 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}
         >
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M17.4588 12.751C16.2142 12.751 15.1447 13.6344 14.9096 14.8567L11.5815 32.1628C11.2736 33.7638 12.5004 35.2489 14.1307 35.2489H39.1295C40.3741 35.2489 41.4436 34.3655 41.6787 33.1433L45.0068 15.8371C45.3147 14.2362 44.0879 12.751 42.4576 12.751H17.4588ZM42.4576 14.351H17.4588C17.379 14.351 17.3011 14.3604 17.2262 14.3784L26.8748 23.6696C27.4942 24.2661 28.4495 24.3398 29.1531 23.8454L42.6406 14.3676C42.5815 14.3567 42.5203 14.351 42.4576 14.351ZM13.1527 32.4649L16.3635 15.7689L25.765 24.8221C26.9362 25.95 28.7426 26.0894 30.073 25.1545L43.3845 15.8004L40.1075 32.8411C40.0173 33.31 39.607 33.6489 39.1295 33.6489H14.1307C13.5053 33.6489 13.0346 33.0792 13.1527 32.4649Z"
             fill="currentColor"
           />
@@ -54,8 +54,8 @@ export const IllustrationStyle = ({
             fill="currentColor"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M17.9952 12.7998C16.7505 12.7998 15.681 13.6832 15.4459 14.9055L12.1178 32.2116C11.81 33.8126 13.0367 35.2978 14.6671 35.2978H39.6658C40.9105 35.2978 41.98 34.4143 42.215 33.1921L45.5431 15.886C45.851 14.285 44.6242 12.7998 42.9939 12.7998H17.9952ZM42.9939 14.3998H17.9952C17.9154 14.3998 17.8374 14.4093 17.7626 14.4272L27.4111 23.7184C28.0305 24.3149 28.9858 24.3886 29.6894 23.8942L43.177 14.4165C43.1178 14.4055 43.0566 14.3998 42.9939 14.3998ZM13.6891 32.5138L16.8998 15.8177L26.3013 24.871C27.4725 25.9988 29.2789 26.1382 30.6093 25.2033L43.9208 15.8493L40.6438 32.8899C40.5536 33.3588 40.1433 33.6978 39.6658 33.6978H14.6671C14.0416 33.6978 13.5709 33.128 13.6891 32.5138Z"
             fill="#020617"
           />
@@ -92,20 +92,20 @@ export const IllustrationStyle = ({
             fill="currentColor"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M2.7334 15.1998C2.7334 14.758 3.09157 14.3998 3.5334 14.3998H10.8885C11.3303 14.3998 11.6885 14.758 11.6885 15.1998C11.6885 15.6416 11.3303 15.9998 10.8885 15.9998H3.5334C3.09157 15.9998 2.7334 15.6416 2.7334 15.1998Z"
             fill="currentColor"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M4.39863 18.7263L10.0231 18.7263C10.465 18.7263 10.8231 19.0844 10.8231 19.5263C10.8231 19.9681 10.465 20.3263 10.0231 20.3263H4.39863C3.9568 20.3263 3.59863 19.9681 3.59863 19.5263C3.59863 19.0844 3.9568 18.7263 4.39863 18.7263Z"
             fill="currentColor"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M5.26406 23.0528L9.15794 23.0528C9.59977 23.0528 9.95794 23.411 9.95794 23.8528C9.95794 24.2947 9.59977 24.6528 9.15794 24.6528L5.26406 24.6528C4.82223 24.6528 4.46406 24.2947 4.46406 23.8528C4.46406 23.411 4.82223 23.0528 5.26406 23.0528Z"
             fill="currentColor"
           />
@@ -131,20 +131,20 @@ export const IllustrationStyle = ({
             fill="currentColor"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M2.40039 15.1998C2.40039 14.758 2.75856 14.3998 3.20039 14.3998H10.5555C10.9973 14.3998 11.3555 14.758 11.3555 15.1998C11.3555 15.6416 10.9973 15.9998 10.5555 15.9998H3.20039C2.75856 15.9998 2.40039 15.6416 2.40039 15.1998Z"
             fill="currentColor"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M4.06562 18.7263L9.69011 18.7263C10.1319 18.7263 10.4901 19.0844 10.4901 19.5263C10.4901 19.9681 10.1319 20.3263 9.69011 20.3263L4.06562 20.3263C3.6238 20.3263 3.26562 19.9681 3.26562 19.5263C3.26562 19.0844 3.6238 18.7263 4.06562 18.7263Z"
             fill="currentColor"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M4.93105 23.0528L8.82493 23.0528C9.26676 23.0528 9.62493 23.411 9.62493 23.8528C9.62493 24.2947 9.26676 24.6528 8.82493 24.6528L4.93105 24.6528C4.48923 24.6528 4.13105 24.2947 4.13105 23.8528C4.13105 23.411 4.48923 23.0528 4.93105 23.0528Z"
             fill="currentColor"
           />

diff --git 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);
+export default withAccountKitUi(config);