[Documentation]: Angular theming not working!

[MurhafSousli]

Describe the problem

I am using Storybook v20 (CSF next) + Angular v21 (library)

I followed the theming documentation https://storybook.js.org/docs/essentials/themes

I could choose a dark theme, but cannot switch between dark and light!

The theme toggle appears in the toolbar, however, toggling it doesn't do what is written in the docs, it doesn't apply a class anywhere in the DOM

Preview.ts

import { definePreview } from '@storybook/angular';
import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';

import addonDocs from '@storybook/addon-docs';
import addonA11y from '@storybook/addon-a11y';
import addonThemes from '@storybook/addon-themes';
import { withThemeByClassName } from '@storybook/addon-themes'

import { themes } from 'storybook/theming';

setCompodocJson(docJson);

export default definePreview({
  tags: ['autodocs'],

  addons: [
    addonDocs(),
    addonA11y(),
    addonThemes()
  ],

  parameters: {
    docs: {
      theme: themes.dark,
    },
  },

  decorators: [
    withThemeByClassName({
      themes: {
        light: 'light-theme',
        dark: 'dark-theme',
      },
      defaultTheme: 'dark',
    }),
  ]
});

main.ts

import { defineMain } from '@storybook/angular/node';
import remarkGfm from "remark-gfm";

export default defineMain({
  stories: [
    '../src/**/*.mdx',
    '../src/**/*.stories.@(ts|tsx)'
  ],

  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-themes',
    {
      name: '@storybook/addon-docs',
      options: {
        mdxPluginOptions: {
          mdxCompileOptions: {
            remarkPlugins: [remarkGfm],
          },
        },
      },
    }
  ],

  framework: '@storybook/angular'
});

manager.ts

import { addons } from 'storybook/manager-api';
import { themes } from 'storybook/theming';

addons.setConfig({
  theme: themes.dark
});

Additional context

No response

[dosubot]

Hi @MurhafSousli! I'm Dosu and I’m helping the storybook team.

The issue you're experiencing is related to @storybook/addon-themes having a React runtime dependency that causes problems in Angular-only projects. This has been reported by other Angular users where the theme toggle appears but doesn't apply classes to the DOM.

Recommended workaround: Bypass addon-themes and implement a custom theme switcher using globalTypes and decorators:

import { definePreview } from '@storybook/angular';

export default definePreview({
  globalTypes: {
    theme: {
      description: 'Global theme for components',
      toolbar: {
        title: 'Theme',
        icon: 'circlehollow',
        items: ['light', 'dark'],
        dynamicTitle: true,
      },
    },
  },
  initialGlobals: {
    theme: 'dark',
  },
  decorators: [
    (storyFn, context) => {
      const theme = context.globals.theme || 'dark';
      // Use className if you prefer classes over data attributes
      document.documentElement.className = `${theme}-theme`;
      return storyFn();
    },
  ],
  // ...rest of your config
});

With this approach, you can remove @storybook/addon-themes from both your addons array in main.ts and the imports/decorators in preview.ts.

Could you try this custom decorator approach and let us know if it resolves the theme switching?

To reply, just mention @dosu.

---

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

   

[MurhafSousli]

Ok, I can see a toggle button but the function doesn't seem to run, no attribute is added to the HTML element

  decorators: [
    (storyFn, context) => {
      const theme = context.globals['theme'] || 'dark';
      console.log('🚨', theme);
      document.documentElement.setAttribute('data-theme', theme);
      return storyFn();
    },
  ],

For example the above code, doesn't log anything to the console.

[darshjme-codes]

Triage note:

Documentation issue: Angular theming documentation not working.

Labels applied: bug, documentation ✓

Suggested additional labels:

• framework: angular

Issue type: Either:

1. Docs are outdated
2. Docs are correct but unclear
3. Real theming bug disguised as docs issue

Action needed: Clarify if this is a docs fix or feature bug