add next-themes to storybook

Author: thomasyuill-livekit

docs/storybook/.storybook/lk-decorators/withNextThemes.tsx

@@ -0,0 +1,48 @@
+import { DecoratorHelpers } from '@storybook/addon-themes';
+import type { ReactRenderer } from '@storybook/react';
+import { ThemeProvider, type ThemeProviderProps, useTheme } from 'next-themes';
+import { type PropsWithChildren, useEffect } from 'react';
+import type { DecoratorFunction } from 'storybook/internal/types';
+
+type ThemeSwitcherProps = PropsWithChildren<{
+  theme: string;
+}>;
+
+const ThemeSwitcher = ({ theme, children }: ThemeSwitcherProps) => {
+  const { setTheme } = useTheme();
+  useEffect(() => setTheme(theme), [theme]);
+  /**
+   * If you're using tailwind and want your background to be displayed in the preview,
+   * use <div className="bg-background">{children}</div> instead
+   */
+  return children;
+};
+
+type NextThemesDecorator = Omit<ThemeProviderProps, 'defaultTheme' | 'themes'> & {
+  themes: Record<string, string>;
+  defaultTheme: string;
+};
+
+const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
+
+export const withNextThemes = ({
+  themes,
+  defaultTheme,
+  ...props
+}: NextThemesDecorator): DecoratorFunction<ReactRenderer> => {
+  initializeThemeState(Object.keys(themes), defaultTheme);
+
+  return (Story, context) => {
+    const selectedTheme = pluckThemeFromContext(context);
+    const { themeOverride } = context.parameters.themes ?? {};
+    const selected = themeOverride ?? selectedTheme ?? defaultTheme;
+
+    return (
+      <ThemeProvider defaultTheme={defaultTheme} {...props}>
+        <ThemeSwitcher theme={selected}>
+          <Story />
+        </ThemeSwitcher>
+      </ThemeProvider>
+    );
+  };
+};

docs/storybook/.storybook/preview.js

@@ -4,7 +4,7 @@
 import '@livekit/components-styles';
 import './tailwind.css';
 
-import { withThemeByClassName } from '@storybook/addon-themes';
+import { withNextThemes } from './lk-decorators/withNextThemes';
 
 export const parameters = {
   viewMode: 'docs',
@@ -30,11 +30,16 @@ export const globalTypes = {
 };
 
 export const decorators = [
-  withThemeByClassName({
+  withNextThemes({
     themes: {
       light: '',
       dark: 'dark',
+      system: 'system',
     },
-    defaultTheme: 'light',
+    defaultTheme: 'system',
+    // All next-themes properties can be configured directly here
+    enableSystem: true,
+    disableTransitionOnChange: true,
+    attribute: 'class',
   }),
 ];

docs/storybook/package.json

@@ -33,6 +33,7 @@
     "babel-loader": "^9.0.0",
     "eslint-config-lk-custom": "workspace:*",
     "eslint-plugin-storybook": "10.1.4",
+    "next-themes": "^0.4.6",
     "postcss": "^8.5.6",
     "storybook": "^10.1.4",
     "tailwindcss": "^4.1.17",