Is it still possible to switch Drupal themes in Storybook?

Created on 3 April 2024, 16 days ago
Updated 18 April 2024, 1 day ago


When using CL Server in combination with the @lullabot/storybook-drupal-addon, there was a dropdown to select which Drupal theme to use for rendering the component. Available themes could be configured in Storybook's preview.js

To use the newer drupal/storybook module, I've disabled CL Server as well as the @lullabot/storybook-drupal-addon, as the path forward is this module with all its great and welcome additions.

Is there any way to tell the Storybook /storybook/stories/render/ endpoint which theme to use? Either through the *.stories.twig file or through a theme-dropdown in the Storybook UI?

What I've tried

As drupal/storybook allows to use any Twig capabilities in my stories, I tried to attach the desired theme explicitely via:

{{ attach_library('my_theme/global-styling') }}

This partially worked: the styles were loaded correctly. but because the default theme is loaded as well, I've conflicting styles :(

💬 Support request






Created by

🇩🇪Germany arnalyse

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @arnalyse
  • 🇩🇪Germany arnalyse

    I've looked into the services.yml of cl_server and storybook.

    There's still the theme.negotiator.storybook, which facilitates the theme switch. I just needed to fix the route name:

    diff --git a/storybook/src/Theme/StorybookThemeNegotiator.php b/storybook/src/Theme/StorybookThemeNegotiator.php
    index 7288b43212..dff64b8c92 100644
    --- a/storybook/src/Theme/StorybookThemeNegotiator.php
    +++ b/storybook/src/Theme/StorybookThemeNegotiator.php
    @@ -42,7 +42,7 @@ public function applies(RouteMatchInterface $route_match): bool {
           return FALSE;
         $theme = $this->getTheme();
    -    return ($route_name === 'storybook.render' && !empty($theme));
    +    return ($route_name === 'storybook.render_story' && !empty($theme));

    I can now get the render route to use a specific theme by adding the query param _drupalTheme=MY_THEME_NAME, like

    The question is: how to we get the information, which theme should be used into Storybook.js ? Do we need a Storybook.js extension like the @lullabot/storybook-drupal-addon or can we add an option/meta to our stories which theme could be used?

    Maybe @e0ipso can point me in the right direction?

  • miiimooo Europe

    @arnalyse thanks for this fix. It allows to select a different theme from the site default theme like this:

    # .storybook/preview.js

    /** @type { import('@storybook/server').Preview } */
    const preview = {
      globals: {
        _drupalTheme: 'my_theme',
      parameters: {
  • 🇩🇪Germany arnalyse

    Great. That allows for explicitely setting the theme 👍

    Do you also know how to get the theme selector from the lullabot module?

    Otherwise I would ask in the Lullabot Github repository if there are any plans to rewrite their addon to work alongside the new Drupal Storybook module …

Production build 0.62.1