search

hipstersmoothie / storybook-dark-mode

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

Angular Support #130

Closed ghost closed 3 years ago

ghost commented 3 years ago

Hello Guys!!!

I'd like to know if it's possible to implement this addon using Angular???

Thanks!!!

hipstersmoothie commented 3 years ago

I don't see why you wouldn't be able to use this in an angular project. if you encounter any problems post about theme here! I like pull requests too

yusijs commented 3 years ago

I'm using it with Angular, works perfectly fine.

dkimmich-onventis commented 3 years ago

In case you are using Angular Material with angular-material-css-vars, you can set it up in your preview.js like the following:

import addons from '@storybook/addons';
const channel = addons.getChannel();

export const decorators = [
  moduleMetadata({
    imports: [MaterialCssVarsModule.forRoot()],
    providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: (materialCssVarsService) => () => {
          channel.addListener('DARK_MODE', isDark => materialCssVarsService.setDarkTheme(isDark));
        },
        deps: [MaterialCssVarsService],
        multi: true
      },
    ],
  }),
];

This is a special case, but maybe you get an idea how it could work in your project.