feat: enabled dark theme preview for components

adevinta · Mar 28, 2023 · aab6a3c · aab6a3c
1 parent 47452ce
commit aab6a3c
Show file tree

Hide file tree

Showing 6 changed files with 375 additions and 2 deletions.
diff --git a/.storybook/main.cjs b/.storybook/main.cjs
@@ -13,6 +13,7 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-styling',
   ],
   staticDirs: ['../public'],
   framework: {

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -2,4 +2,11 @@
   window.global = window
 </script>
 
+<style>
+  /* Enabled dark mode preview in story views */
+  html {
+    @apply !bg-background;
+  }
+</style>
+
 <link href="/normalize.css" rel="stylesheet" />
diff --git a/.storybook/preview.cjs b/.storybook/preview.cjs
@@ -1,4 +1,7 @@
 import '../src/tailwind.css'
+import './sb-theming.css'
+
+import { withThemeByDataAttribute } from '@storybook/addon-styling'
 
 export const parameters = {
   controls: {
@@ -8,3 +11,14 @@ export const parameters = {
     },
   },
 }
+
+export const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      light: 'light',
+      dark: 'dark',
+    },
+    defaultTheme: 'light',
+    attributeName: 'data-theme',
+  }),
+]
diff --git a/.storybook/sb-theming.css b/.storybook/sb-theming.css
@@ -0,0 +1,4 @@
+/* Enabled dark mode preview inside Canvas blocks */
+.docs-story:first-child {
+    @apply !bg-background;
+}