Strorybook dark theme is not respected

[soullivaneuh]

Summary

When configuring the dark theme for storybook:

import type {
  Preview,
} from '@storybook/react';
import {
  themes,
} from '@storybook/theming';

const preview: Preview = {
  parameters: {
    // ...
    docs: {
      toc: true,
      theme: themes.dark,
    },
  },
};

export default preview;

The html preview of the plugin is not respected:

[tomillie]

It would be great if the theme would be customizable. For example by extending the addon's configuration in the preview.js and being able to amend the highlight.js implementation with it.

[tomillie]

As a temporary solution, I have overridden the styling in the managerHead property of the Storybook config in main.js:

managerHead: (head) => `
    ${head}
    <style>
      /* HTML preview in Addons panel */
      #panel-tab-content > div:has(code.language-xml):not([hidden]) {
        /* Use full height for the container and change the colours for syntax highlighting */
        [data-radix-scroll-area-content] {
          height: calc(100dvh - 40px);

          > pre {
            height: 100%;
            background-color: #1b1c1d !important;

            > code {
              filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 0 white) saturate(3);

              .linenumber {
                filter: opacity(0.5) contrast(0);
              }
            }
          }
        }
      }
    </style>
  `,