Does not toggle background

Kyoss79 commented 2 years ago

It apparently does not toggle the background of the storybook to dark, only applies the "dark" to the html.

It should also switch to dark background.

Keep up the good work :)

tranttxuan commented 2 years ago

I add .dark.body{ background: black }; in preview-head.html to switch to dark background-color.

aaronleopold commented 1 year ago

@Kyoss79 I create a storybook.css file that I import in the preview.js file that contains:

html:not(.dark) > .sb-show-main {
    /* replace color */
    background: white !important;
}

.dark > .sb-show-main {
    /* replace color */
    background: dark !important;
}

However I agree, it would be nice if this was built in

TristanBrotherton commented 1 year ago

For anyone else reading this, you'll also have to set StoryBook to toggle the dark mode manually, as explained here: https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

enix79 commented 1 year ago

I created the preview-body.html file and added only this: <body class="dark:bg-black"></body> sb seems to merge everything it needs in one single body.

gfpacheco commented 1 year ago

I forked this and I'm adding the dark class to the html in the story, this is working great for me together with the snippet @enix79 shared for the preview-body file.

You can use this lib instead @gfpacheco/storybook-tailwind-dark-mode if you wanna try it out

enix79 commented 1 year ago

With the new official storybook styling addon you don't need anything additional: https://storybook.js.org/blog/styling-addon-configure-styles-and-themes-in-storybook/

// .storybook/preview.js
import { withThemeByClassName } from "@storybook/addon-styling";

import "../src/tailwind.css";

export const decorators = [
  withThemeByClassName({
    themes: {
      light: "light",
      dark: "dark",
    },
    defaultTheme: "light",
  }),
];

hugotox commented 10 months ago

@enix79 did that work for you? I see the html class changing but the story is always rendered in light theme

enix79 commented 10 months ago

@hugotox, can you provide a codesandbox or similar? :)

hugotox commented 10 months ago

@enix79 I don't know if its possible to run storybook on codesandbox, but my relevant files are:

tailwind.config.js

import { fontFamily } from 'tailwindcss/defaultTheme'

/** @type {import('tailwindcss').Config} */
const config = {
  darkMode: 'class',
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {}
}

export default config

.storybook/main.js

/** @type { import('@storybook/svelte-vite').StorybookConfig } */
const config = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: [
    '@storybook/addon-svelte-csf',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-styling',
      options: {
        // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
        // For more details on this addon's options.
        postCss: {
          implementation: require.resolve('postcss'),
        },
      },
    },
  ],
  framework: {
    name: '@storybook/sveltekit',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

.storybook/preview.js

import { withThemeByClassName } from '@storybook/addon-styling'
import '../src/app.css'

export const parameters = {
  backgrounds: {
    default: 'light',
  },
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

export const decorators = [
  withThemeByClassName({
    themes: {
      light: 'light',
      dark: 'dark',
    },
    defaultTheme: 'light',
  }),
]

rsmelo92 commented 10 months ago

~using the new official storybook styling addon I added this line to my css and got to trigger the background change, but the components are not detecting that the class is added and they dont change to the dark:xxxx variation~

Edit: My problem was just a prefix, so this is the correct way if you have it also (using the new official storybook styling addon)

# tailwind.css
@layer base {
  .prefix-dark {
    @apply bg-black;
  }
}

// .storybook/preview.js
export const decorators = [
  withThemeByClassName({
    themes: {
      light: 'prefix-light',
      dark: 'prefix-dark',
    },
    defaultTheme: 'light',
  }),
]

renatomoor / storybook-tailwind-dark-mode

Does not toggle background #9