Expressive Code를 기존 theme 시스템과 연동하기

문제 발단

저의 블로그에서는 최상위 HTML 태그에 data-theme={dark | light} 속성을 추가하여 테마를 변경하고 있습니다. 단순히 dark와 light로 나누어 각 테마에 맞는 색상을 CSS 변수로 지정하는 방식입니다.

:root {
  html[data-theme="light"] {
    --color: 250, 252, 252;
    ...
  }
  html[data-theme="dark"] {
    --color: 37, 37, 37;
    ...
  }
}

Expressive Code에서도 비슷하게 테마를 변경할 수 있지만, 문제는 정확하게 dark와 light 라는 이름을 가진 두 가지 테마가 제공되지 않습니다.

예시) dracula, github-light, monokai

문제 해결

dark와 light 테마만 사용할 경우, 다음과 같이 간단하게 설정할 수 있습니다:

  ...
  integrations: [
    ...
    expressiveCode({
      themes: ["github-dark", "github-light"],
      themeCssSelector: theme => {
        return theme.type === "light"
          ? `[data-theme='light']`
          : `[data-theme='dark']`;
      },
    }),
  ],
  ...

확장성을 고려한 조금 더 나은 방법?

const EC_THEME = {
  dark: "github-dark",
  light: "github-light",
} as const;

themeCssSelector: theme => {
  for (const [type, value] of Object.entries(EC_THEME)) {
    if (theme.name === value) return `[data-theme='${type}']`;
  }

  return `[data-theme='${theme.name}']`;
},

완벽한 해결책은 아니지만, 어찌저찌 작동하게 만들 순 있습니다.