Vite Storybook - Implement Darkmode natively

[paulm17]

Summary

I can get vite, storybook to work fine with the latest version.

My problem is that the only current darkmode switcher employs a class and not a style or a data attribute.

Would be awesome if the team could spend some time to get this working natively.

edit:

this was the only addon that worked somewhat: https://github.com/hipstersmoothie/storybook-dark-mode

Even this article was no good: https://medium.com/design-bootcamp/how-to-toggle-between-dark-and-light-mode-in-storybook-7e9351eb26c1

Examples

No response

Motivation

No response

Search keywords: vite storybook

[paulm17]

Managed to implement this another way. It's good enough so will close:

import React from 'react';
import type { Preview } from '@storybook/react';
import { RaikouProvider } from "@raikou/system";
import { emotionTransform, RaikouEmotionProvider } from "@raikou/emotion";
import "@raikou/system/styles.css";
import "@stylefusion/react/styles.css";
import { useTheme } from 'next-themes';
import { IconMoonFilled, IconSunFilled } from '@tabler/icons-react';
import { ActionIcon } from '@raikou/core';

function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
  const { theme, setTheme } = useTheme();
  return (
    <>
      <ActionIcon
        size="xl"
        radius="md"
        variant="default"
        pos="fixed"
        bottom={20}
        right={20}
        onClick={theme === "light" ? () => setTheme("dark") : () => setTheme("light")}
        style={{ zIndex: 1000 }}
        aria-label="Toggle theme color direction"
      >
        {theme === 'light' ? <IconSunFilled /> : <IconMoonFilled />}
      </ActionIcon>
      {children}
    </>
  );
}

const preview: Preview = {
  decorators: [
    (Story) => <ColorSchemeWrapper>{Story()}</ColorSchemeWrapper>,
    (Story) => (
      <RaikouProvider stylesTransform={emotionTransform}>
        <RaikouEmotionProvider>
          {Story()}
        </RaikouEmotionProvider>
      </RaikouProvider>
    ),
  ],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@paulm17 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.