Storybook Not Displaying Custom Themes and Kendo Components Angular v20

[ellieoconnor]

Summary

After upgrading to Storybook v9 and reinstalling from scratch to fix unrelated build issues, my Angular 20 application’s themes and Kendo UI components no longer render correctly inside Storybook. There are no console errors, but styles and components (e.g., dialogs, grids) are not displaying as expected. The same components work correctly in the main Angular app. I've confirmed the stylesheets are included and modules are imported properly.

This regression occurred after reinstalling Storybook v9 cleanly. I’ve exhausted troubleshooting steps, including verifying angular.json, module imports, and decorator wrappers.

Additional information

Storybook version number 9.0.13
Angular v20.1.0
Kendo Angular v19.2.0

main.js
/** @type { import('@storybook/angular').StorybookConfig } */ const config = { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-themes', //adds the custom addon for odyssey theme selection. '@chromatic-com/storybook', '@storybook/addon-docs' ], framework: { name: '@storybook/angular', options: {} }, docs: {}, staticDirs: ['../src', '../src/assets'] }; export default config;

preview.js
`
import { Preview } from '@storybook/angular';
import { withThemeByClassName } from '@storybook/addon-themes';

const customViewPorts = {
blInfoDefault: {
name: 'BL Info Default',
styles: {
width: '1920px',
height: '1080px'
}
},
blLaptop: {
name: 'BL Laptop',
styles: {
width: '1519px',
height: '695px'
}
},
tablet: {
name: 'Tablet',
styles: {
width: '768px',
height: '1024px'
}
},
phone: {
name: 'Phone',
styles: {
width: '390px',
height: '844px'
}
}
};
/** @type { import('@storybook/angular').Preview } */
const preview = {
parameters: {
viewport: {
viewports: customViewPorts
},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i
}
},
backgrounds: {
default: 'theme-color',
values: [
{
name: 'light',
value: '#ffffff'
},
{
name: 'dark',
value: '#000000'
},
{
name: 'theme-color',
value: 'var(--accentBackgroundColor)'
}
]
}
},
decorators: [
withThemeByClassName({
themes: {
light: 'light-theme',
dark: 'dark-mode'
},
defaultTheme: 'light'
})
]
};

export default preview;
`

Create a reproduction

No response

[pavitrabhalla]

@dosu-bot

[dosubot[bot]]

There are several known issues and workarounds with Storybook v9 and Angular 20 that could explain why your custom themes and Kendo UI components aren't rendering as expected:

• Theming: In Storybook v9, the @storybook/addon-themes may not apply the data-theme attribute correctly, which can break theme rendering. A workaround is to manually set the data-theme attribute in a custom decorator in your preview.js or preview.ts file. This ensures your theme classes or attributes are applied as expected [discussion].
• Backgrounds: There's a known issue where background colors set in globals or stories aren't visually applied unless you manually select them from the toolbar. You can work around this by adding a custom decorator that sets the background color on the preview area [issue].
• Angular 19+ ESM: Storybook v9 requires explicit file paths for builder implementations due to strict ESM module resolution in Angular 19+. If you haven't already, check your node_modules/@storybook/angular/builders.json and make sure the implementation fields reference index.js files directly [issue].
• Migration checks: After upgrading, it's recommended to run the doctor command to check for duplicate dependencies or incompatible addons, which can cause subtle issues [migration guide].

There isn't specific documentation for Kendo UI integration, but double-check that your global styles and assets are loaded in Storybook as they are in your main app. If you continue to see issues, try creating a minimal reproduction or reviewing the Storybook build output for missing styles or assets.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[smlimasu]

Did you include the style sources in the angular.json styles array for the storybook builders?