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

안녕하세요 좋은 질문 감사합니다.

제생각에는 스토리북의 테마 시스템과 CSS 변수가 제대로 연결되지 않아서 발생하는 문제인 것 같은데요

CSS 설정은 잘 하신 것 같고, preview.ts 에 커스텀 데코레이터를 하나 생성해서 활용하는 방법이 있을 것 같습니다.

// .storybook/preview.ts 
import { withThemeByClassName } from '@storybook/addon-themes';

// 커스텀 데코레이터 함수 생성 
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();
};

// 스토리북에 적용할 데코레이터 배열
export const decorators = [
  // 커스텀 테마 데코레이터
  withThemeBackground,
  
  // 스토리북 공식 테마 데코레이터
  withThemeByClassName({
    themes: {
      light: '', // 라이트 테마는 기본값이므로 클래스 없음
      dark: 'dark', // 다크 테마일 때 'dark' 클래스 적용
    },
    defaultTheme: 'light', // 기본 테마는 라이트
  }),
];

// 툴바에 테마 전환 버튼 설정
export const globalTypes = {
  theme: {
    name: 'Theme', // 테마 컨트롤의 이름
    description: '전역 테마 설정', // 설명
    defaultValue: 'light', // 기본값
    toolbar: {
      icon: 'circlehollow', // 아이콘 모양
      items: [
        { value: 'light', icon: 'circlehollow', title: '라이트 모드' }, // 라이트 테마 옵션
        { value: 'dark', icon: 'circle', title: '다크 모드' }, // 다크 테마 옵션
      ],
      showName: true, // 이름 표시 여부
    },
  },
};

// 스토리북 추가 파라미터 설정
export const parameters = {
  // 배경색 설정 (스토리북의 배경 패널용)
  backgrounds: {
    default: 'light', // 기본 배경
    values: [
      { name: 'light', value: 'var(--bg-color)' }, // 라이트 모드 배경색을 CSS 변수로 설정
      { name: 'dark', value: 'var(--bg-color)' } // 다크 모드 배경색도 같은 CSS 변수 사용 (값은 .dark에서 오버라이드됨)
    ],
  },
  // 문서 페이지 테마 설정
  docs: {
    theme: {
      light: {
        // 라이트 모드 docs 페이지 테마 설정
        appBg: 'var(--bg-color)', // 앱 배경색
        textColor: 'var(--text-color)', // 텍스트 색상
        // 필요한 다른 속성들 추가 가능
      },
      dark: {
        // 다크 모드 docs 페이지 테마 설정
        appBg: 'var(--bg-color)', // 앱 배경색
        textColor: 'var(--text-color)', // 텍스트 색상
        // 필요한 다른 속성들 추가 가능
      }
    }
  }
};

이제 컴포넌트에서 정의한 CSS 변수를 사용합니다:

.component {
  color: var(--text-color);
  background-color: var(--bg-color);
}

이렇게 한번 시도해보시고 그래도 안되면 다시 한번 말씀 부탁드립니다! 저도 로컬에서 구동해서 한번 디버깅 해볼게용

안녕하세요, 인프런 AI 인턴입니다.

jaiyah님, 스토리북에서 라이트 및 다크 테마 전환 문제를 해결하는 방법에 대해 설명드리겠습니다. 질문하신 사례는 Storybook의 테마 설정과 관련된 문제로 보입니다. 다음은 이러한 문제를 해결하기 위한 몇 가지 팁입니다.

스토리북 테마 설정 및 싱크 방법

1. 애드온 테마 설정: 스토리북에서 @storybook/addon-themes를 사용해 테마를 설정할 수 있습니다. 현재 기본적인 배경 색상은 decorators 데코레이터를 통해 제어할 수 있습니다.
   

예를 들어, 테마 변경에 따라 body 배경 색이 변경되도록 설정하려면 아래와 같이 구현할 수 있습니다:

   import { addDecorator } from '@storybook/react';
   import { themes } from '@storybook/theming';
   import { withThemeByClassName } from '@storybook/addon-themes';

   const themesDecorator = withThemeByClassName({
     themes: {
       light: 'light',
       dark: 'dark'
     },
     defaultTheme: 'light'
   });

   addDecorator(themesDecorator);

여기서 light 및 dark는 각각의 테마 클래스 이름입니다. 각 테마에 대해 CSS 변수를 정의했다면 이러한 클래스를 사용해 테마를 확인할 수 있습니다.

2. 싱크 문제 해결: 토글 버튼이 클래스만 제어하고 실제 배경색 변경이 되지 않는 문제는 CSS 및 스토리북 전역 스타일과의 충돌 때문일 수 있습니다. CSS var()를 사용하여 스타일 업데이트가 일관되게 적용되었는지 확인하세요.

3. 테마 전환 싱크: 각 테마에 대해 스토리북 배경을 설정하고 decorators 에서 제공하는 옵션을 사용하면 상단 패널에서의 테마 전환 시 일관된 색상 변화를 유지할 수 있습니다.

4. 스토리북 패널 싱크: 스토리북 상단 패널의 테마 설정은 특정 스토리의 컨텍스트와 애드온으로 적용된 테마 설정이 서로 다를 수 있습니다. 이를 조정하기 위해서는 parameters를 통해 전역 설정을 동기화할 수 있습니다.

추가 도움

더 구체적인 예제 및 세부 사항은 스토리북의 공식 문서를 참고하시면 도움이 됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.