[Storybook] 테마&로고 변경 , 공통 스타일 적용, 파비콘 변경

 

 

 

오늘 회사에서 적용하려고 급하게 검색으로 적용한

스토리북 테마 적용에 대해서 간단하게 정리합니다 : (

아래 코드는 다크모드는 적용하지 않고 라이트 모드만 적용한 예시입니다!

 

1. 로고 변경, 커스텀 색상 테마 적용

1-1. 테마 정의 파일 작성

  .storybook/theme.js  

import { create } from "@storybook/theming/create";
import logo from "../assets/images/storybook-icon.png";

export default create({
base: "light",
colorPrimary: " #aa418c",
colorSecondary: "#00526e",

// UI
appBg: "white",
appContentBg: "white",
appBorderColor: "grey",
appBorderRadius: 4,

// Typography
fontBase: '"Roboto", sans-serif',
fontCode: "monospace",

// Text colors
textColor: "black",
textInverseColor: "white",

// Toolbar default and active colors
barTextColor: "#343434",
barSelectedColor: "#377f95",
barBg: "white",

// Form colors
inputBg: "white",
inputBorder: "#00526e",
inputTextColor: "black",
inputBorderRadius: 4,

brandTitle: "BrandTitle",
brandUrl: "here's the brandurl",
brandImage: logo,
});`

 

1-2. manager.js 파일에 적용

  .storybook/manager.js  

import { addons } from '@storybook/addons';
// 1번에서 작성한 theme 파일
import theme from './theme';

addons.setConfig({
  theme
});

 

 

2. 공통 스타일 적용

스토리북의 global decorators이용해서 공통 스타일을 preview 파일에 적용

  .storybook/preview.js  

// 전역으로 사용하는 reset style 컴포넌트로 만들어 둔게 있어서 적용했다.
import { GlobalResetStyle } from './GlobalResetStyle';

...

export const decorators = [
  (Story) => (
    <>
      <GlobalResetStyle />
      <Story />
    </>
  ),
];

 

글로벌 스타일 적용 참고

import styled from '@emotion/styled'
import { Global } from '@emotion/core'

export const GlobalResetStyle = styled(Global)`
  * {
    background-color: blue;
  }
`

 

 

3. 파비콘 변경

.storybook/preview-head.html

위 이 파일에서 head를 설정할수 있다고 하는데
내 경우에는 제대로 적용되지 않아서 다른 경우를 참고해서 적용했다.

 

파일 import후 manager.js 파일에 추가

  .storybook/manager.js  

/* favicon 파일 추가 */
import favicon from './images/favicon.ico';

...

/* set favicon */
const link = document.createElement('link');
link.setAttribute('rel', 'shortcut icon');
link.setAttribute('href', favicon);
document.head.appendChild(link);

 

 

---

 

✔️ 참고

https://github.com/emotion-js/emotion/issues/1262

https://github.com/storybookjs/storybook/issues/12950