[OSCCA] 3. devUP UI : 코드블록 라이트모드 CSS 미적용 문제 해결기

👉 PR 바로가기 👈

Fix Table Component Scroll & Light Mode Color Issues by arty0928 · Pull Request #461 · dev-five-git/devup-ui

 

들어가며

오픈소스 컨트리뷰션 아카데미 OSCCA 에 'devupUI : zero-runtime Css-in-JS Libray'에 참여하며 Toggle 컴포넌트 문서화에 도전했습니다. 그 과정에서 기존 유일하게 작성되어 있던 button 컴포넌트를 기준으로 작성하던 중, button 컴포넌트 문서에서 마크다운 문법이 깨지는 현상을 발견했습니다. 👉 이전 글 보고 배경 이해하기 👈 앞선 포스팅에서 해당 문제를 해결하고, Table 반응형 좌우 스크롤 문제를 해결했고, 이번에는 '라이트모드 CSS 미적용 문제 해결기' 를 정리하였습니다.

 

 

문제 상황 : 테이블 컴포넌트의 ``로 감싼 코드 블록 라이트모드에서 안 보임

`` 백틱으로 감싼 코드가 다크모드에서는 약간 하얗게(?) 잘 보이지만, 라이트모드에서는 아예 구분이 가지 않습니다.

라이트 모드	다크 모드

 

그래서 기존 PropsTable 코드를 다시 살펴보았습니다.

 

원인 : PropsTable에서 코드 블록을 CustomCodeBlock을 사용하여 ``의 스타일링이 제대로 동작하지 않음

const MdxComponentsWithCodeBlock = ({ children }: { children?: string }) => {
  return (
    <Markdown
      components={{
        ...(_components as any),
        code: CustomCodeBlock,
      }}
    >
      {children}
    </Markdown>
  )
}

 

그 중에서 CodeBlock 부분인 CustomCodeBlock을 살펴보았습니다.

 

CustomCodeBlock

import { Box, Text } from '@devup-ui/react'

export function CustomCodeBlock({ children }: { children: string }) {
  return (
    <Box
      as="code"
      bg="$containerBackground"
      borderRadius="0.25rem"
      color="$text"
      padding="0.25rem"
      whiteSpace="pre-wrap"
    >
      {children.split('<br>').map((line, index) => (
        <Text key={index.toString()} whiteSpace="pre">
          {index > 0 && <br />}
          {line}
        </Text>
      ))}
    </Box>
  )
}

 

CustomCodeBlock 에서 bg="$containerBackground"와 color="$text"를 사용하고 있는데,

의심가는 원인

1. 이 CSS 변수들이 라이트모드에서 제대로 정의되지 않았거나
2. 색이 눈에띄는 차이가 없는 것

으로 예상했습니다.

 

 

1. CSS 변수가 정의되었는지 확인하기

우선 $containerBackground 변수 부분을추적했습니다.

<Card
      className={css({
        _active: {
          transform: 'none',
        },
        _hover: {
          boxShadow: 'none',
        },
        borderRadius: '10px',
        border: '1px solid $border',
        bg: '$containerBackground',
        maxW: '100%',
        flexShrink: 0,
        cursor: 'default',
        mb: '20px',
        _lastChild: {
          mb: '0',
        },
        typography: 'bodyReg',
        color: '$text',
        whiteSpace: 'pre-wrap',
      })}
    >

 

동일한 페이지 내에서 Button 예시를 보여주는 Card에 적용된 bg 컬러에는 다크모드, 라이트모드 적용했을 때 백그라운드 컬러는 잘 적용되고 있었습니다.

 

그 다음 $text도 정의는 되어 있었습니다.

그럼 이제 CSS 변수 미정의는 아니고, 남은 의심은 각 색이 눈에 띄게 대비가 되지 않았나? 해서

테마 변수 정의가 어디에서 되었는지 위치로 가서 확인해보려고 했습니다.

 

 

2. 테마 파일 찾기 

find . -name "theme.*" -o -name "tokens.*" -o -name "colors.*"

 

그래서 찾은 ./apps/landing/df/theme.d.ts 파일을 발견했습니다.

 

조금 더 따라가다 보니 devup.json 파일에서 theme 별로 라이트 모드, 다크 모드 색상을 관리하고 있었는데, 여기서 containerBackgroundColor의 색을 조금 더 진하게 해서 text 의 색상과 대비되게 변경했습니다.

{
  "theme": {
    "colors": {
      "light": {
        "primary": "#5A44FF",
        "secondary": "#85A5F2",
        "link": "#006BFF",
        "text": "#2F2F2F",
        "background": "#FFF",
        "containerBackground": "#F0F505",
...
      },
      "dark": {
        "primary": "#9086FF",
        "secondary": "#2A4586",
        "link": "#006BFF",
        "text": "#EDEDED",
        "background": "#131313",
        "containerBackground": "#373639",
....
      }
    },

 

그런데 바꿔보니 현재 containerBackground 색 자체를 바꾸기에는 다른 곳에서 이미 많이 사용 중이기에, codeBackGround라는 색상을 새롭게 정의했습니다.

 

최종 코드

{
  "theme": {
    "colors": {
      "light": {
        "primary": "#5A44FF",
        "secondary": "#85A5F2",
        "link": "#006BFF",
        "text": "#2F2F2F",
        "background": "#FFF",
        "containerBackground": "#FFF",
        "codeBackground": "#F5F5F5", //추가
 
      },
      "dark": {
        "primary": "#9086FF",
        "secondary": "#2A4586",
        "link": "#006BFF",
        "text": "#EDEDED",
        "background": "#131313",
        "containerBackground": "#373639",
        "codeBackground": "#2E2E2E", //추가
      }
    },

 

최종 결과

이제 라이트모드에서도 코드 블록 CSS 가 눈에 띄게 잘 적용되었습니다.

라이트 모드	다크 모드