hipstersmoothie / storybook-dark-mode

A storybook addon that lets your users toggle between dark and light mode.
MIT License
439 stars 56 forks source link

Update Dark Mode For Separate Component Documentation #249

Open technbuzz opened 7 months ago

technbuzz commented 7 months ago

The below as it stand in current Readme, is deprecated as it uses addon-knobs instead of addon-controls. What is the updated solution? How we could write for Angular application?

import { themes } from '@storybook/theming';

// Add a global decorator that will render a dark background when the
// "Color Scheme" knob is set to dark
const knobDecorator = storyFn => {
  // A knob for color scheme added to every story
  const colorScheme = select('Color Scheme', ['light', 'dark'], 'light');

  // Hook your theme provider with some knobs
  return React.createElement(ThemeProvider, {
    // A knob for theme added to every story
    theme: select('Theme', Object.keys(themes), 'default'),
    colorScheme,
    children: [
      React.createElement('style', {
        dangerouslySetInnerHTML: {
          __html: `html { ${
            colorScheme === 'dark' ? 'background-color: rgb(35,35,35);' : ''
          } }`
        }
      }),
      storyFn()
    ]
  });
};

export const decorators = [knobDecorator];
hipstersmoothie commented 7 months ago

I'm not sure as I haven't upgraded in awhile. If you figure it out I can merge the docs update PR