refactor(theming): control via class

kripod · Dec 11, 2023 · 532af83 · 532af83
1 parent 1ab9b12
commit 532af83
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,8 +1,18 @@
 import "./styles.css";
 
-import type { Preview } from "@storybook/react";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import type { Preview, ReactRenderer } from "@storybook/react";
 
 export default {
+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      themes: {
+        light: "theme-light",
+        dark: "theme-dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],
   parameters: {
     backgrounds: {
       default: "neutral-0",

diff --git a/src/styles.css b/src/styles.css
@@ -6,7 +6,7 @@
 
 @layer base {
   html {
-    @apply theme-light bg-ui-neutral-0 text-ui-neutral-5 dark:theme-dark;
+    @apply bg-ui-neutral-0 text-ui-neutral-5;
     -webkit-tap-highlight-color: transparent;
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -5,4 +5,5 @@ import tailwindPreset from "./src/tailwind-preset";
 export default {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   presets: [tailwindPreset],
+  darkMode: ["class", ".theme-dark"],
 } satisfies Config;