Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Dark Mode For Separate Component Documentation #249

Open
technbuzz opened this issue Feb 15, 2024 · 1 comment
Open

Update Dark Mode For Separate Component Documentation #249

technbuzz opened this issue Feb 15, 2024 · 1 comment

Comments

@technbuzz
Copy link

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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants