Storybook docs page tailwind dark mode

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-border;
  }

  body,
  .docs-story {
    @apply bg-background text-foreground;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
  }
}

manager.tsx

import { useEffect } from 'react';

import { addons, types, useGlobals } from '@storybook/manager-api';

const ExampleToolbar = () => {
  const [globals] = useGlobals();

  useEffect(() => {
    const elements = document.querySelectorAll('.docs-story');

    elements.forEach((element) => {
      element.classList.add(globals['theme'] as string);
    });
  }, [globals]);

  return null;
};

addons.register('docs-theme', () => {
  addons.add('docs-theme-addon', {
    title: 'Addon to change docs story theme',
    type: types.TOOL,
    match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
    render: ExampleToolbar,
  });
});