인프런 커뮤니티 질문&답변

import type { Preview, ReactRenderer } from "@storybook/react-vite";
import { withThemeByClassName } from "@storybook/addon-themes";

import "../src/index.css";
import "@fontsource/pretendard/400.css";
import "@fontsource/pretendard/500.css";
import "@fontsource/pretendard/700.css";

const withThemeBackground = (Story, context) => {
  // context.globals에서 현재 선택된 테마 정보 가져오기
  const { theme } = context.globals;

  // 테마가 변경될 때마다 HTML 문서에 데이터 속성으로 현재 테마 설정
  // 이를 통해 CSS에서 [data-theme='dark'] 같은 선택자로 스타일 적용 가능
  document.documentElement.dataset.theme = theme;

  // 다크 테마일 경우 body에 dark 클래스 추가, 아니면 제거
  if (theme === "dark") {
    document.body.classList.add("dark");
  } else {
    document.body.classList.remove("dark");
  }

  // 원래 스토리 컴포넌트 반환
  return Story();
};

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    a11y: {
      test: "todo",
    },
  },
  // ADDED
  decorators: [
    withThemeBackground,
    withThemeByClassName<ReactRenderer>({
      themes: {
        light: "",
        dark: "dark",
      },
      defaultTheme: "light",
    }),
  ],
};

export default preview;

위와같이 설정해서, 해당 버튼이 추가됐습니다.

해당 버튼을 통해 바꾸면 컴포넌트의 다크모드 색상만 변경되는데, 왜 배경색은 같이 안바뀔까요? index.css에 추가적인 설정을 해줘야 할까요? 스토리 내부 body클래스에 dark가 추가됨은 확인했습니다.

즉, 해당 버튼을 누르면 Storybook의 컴포넌트 뿐만 아니라 Backgrounds와 함께 변경이 되었으면 좋겠는데, 현재는 개별적으로 2개의 버튼으로 밖에 설정이안되는데 위 하나의 버튼으로 함께 변경되게 설정이 가능한가요?

현재는 아래와 같이 컴포넌트만 다크모드로 변경이 됩니다.

https://ui.vueless.com/?path=/docs/1010--docs&globals=theme:light
위 사이트 느낌처럼 적용가능하고싶은데, 설정을 잘못하였는가 해서 가능한지 여쭤보고싶습니다.