Storybook Angular dynamic theme switching using storybook-dark-mode

[mostmand]

I've been trying to get my head around configuring dynamic theme switching in storybook. I followed the guide provided here and it works in serving the application using ng serve but running storybook doesn't seem to work. I tried configuring webpack to load styles correctly but the problem seems to be that when I use ng serve the styles are being served properly e.g. localhost:4200/dark.css serves the CSS, but in storybook localhost:6006/dark.css returns 404. Has anyone done this before? I didn't find any issue or discussion thread about this topic. I appreciate your help.

[ParsaArvanehPA]

Greetings,
Please share the changes you made to your angular.json (or project.json if you are using NX).
To clarify, when you are inside your angular project, you can dynamically change your theme, but when you are using storybook, this does not work? Is the dark theme the only issue with storybook, or do none of the ng-zorro components have their correct style?
It would be helpful if you could create a separate repo to demonstrate the current situation, so we could clone and examine it.

[mostmand]

Hi Parsa,
Long time no see! It's a pleasure to meet you as a contributor of this awesome project. I forked the sample for dynamic theme switching of ng-zorro and migrated it to angular 16 as it was outdated. After migration I added storybook and dark-mode addon with some theme switching logic that calls the ThemeService. I used storybook 7.6.0-beta.2 because it includes a fix that plays better with styles provided in angular.json file that is not yet available in the stable version. Here is a link to the repository:
https://github.com/mostmand/nz-themes
You can observe the behavior I mentioned in the OG post in action.
Thanks in advance

[ParsaArvanehPA]

Hi Mr.Mostmand :‌),
It's so great to hear from you!
Thank you for sharing your link with me. I will get back to you as soon as I can.

[ParsaArvanehPA]

When you build your Angular app with ng build, two files named dark.css and default.css are generated in the root of your bundled build of Angular project. However, this does not happen with Storybook build. This causes an error when you try to change the Storybook theme because the dark.css file is not found. The solution is to add your dark.css and default.css files as Storybook's static assets so that they are available when you build or serve Storybook. If you want to learn how to add static assets to your Storybook, please refer to this link.

I added this line to Storybook's main.ts file:

staticDirs: ['../src/styles/story-book-themes'], //👈 Configures the static asset folder in Storybook

Now, a few notes:
• When you use .less files, Angular converts them to .css files because browsers only understand .css files as stylesheets.

• I am not sure how to configure Storybook to build .less files as .css files, so I simply copied the dark.css and default.css files that are built in your dist folder to src/styles/story-book-themes and then referenced them in main.ts file. This works as a temporary solution since your main problem is not building .less files but having no stylesheets at all. However, I suggest you find a better workaround for this later.

• By setting the staticDirs in main.ts, you can find dark.css and default.css files at the root of storybook-static folder when you build your Storybook. Now, Storybook can access these files.

I have created this pull request so that you can review the changes more easily.

I would also like to mention two points:
• The folder src/styles/story-book-themes is only for Storybook, so please do not set it as a style or asset in your angular.json file, because it will add it to your Angular build and that is unnecessary.

• In your angular.json file, it is better to reference ng-zorro style directly like this instead of copying them to your style folder. With this, you should be able to delete all .less files in your style folder:

{
    "input": "node_modules/ng-zorro-antd/ng-zorro-antd.variable.min.css",
    "bundleName": "default",
    "inject": false
},
{
    "input": "node_modules/ng-zorro-antd/ng-zorro-antd.dark.css",
    "bundleName": "dark",
    "inject": false
}

[mostmand]

Thanks for your response. This workaround works but the point is that this only works if those CSS files won't change for example when upgrading to a newer version of ng-zorro these hard-coded CSS files will change. I think the main problem is that storybook does not respect those style bundles specified in angular.json.
I mark this as an answer as it solves my problem.