이전 글 에서는 Dark Theme 에 대해 조사한 내용을 다루었다.

이번 글에서는 직접 프로젝트에 Dark Theme 을 적용한 코드를 기록해보려 한다.

React 프로젝트에 Dark Theme 적용하기

나는 CSS 변수와 var() 함수를 사용한 방법 이전 글 참조 으로 프로젝트에 Dark Theme 을 구현하기로 했다. 이유는 아래와 같다.

  • CSS 변수를 사용해보고 싶었다.
  • 유지보수성이 뛰어난 CSS Code 를 작성할 수 있다.

1. CSS 변수 및 var() 함수

지금까지 CSS 변수 문법이 존재하는지 몰랐기 때문에 조금의 러닝 커브가 필요했다. 그리 어렵지는 않다.

구체적인 개념은 W3S 에 잘 정리되어 있지만 간략히만 정리하자면,

  • IE 는 해당 문법을 지원하지 않는다.

  • CSS 변수는 반드시 two dashes (--) 로 시작해야한다.

  • CSS 의 var() 함수로 변수를 호출할 수 있다.

/* var() 표기법 */
var(--변수, value)

/*
* 매개변수
* --변수 : required. --변수에 저장된 값이 적용된다.
* value : optional. --변수 가 유효하지 않을 경우 적용되는 fallback value 이다.
*/

사용 예제

  • variables.css (전체 코드 링크 »)
    각 Theme 모드에 따라 CSS 변수를 선언해 각각의 다른 값을 저장한다.
/* data-theme 속성 값 "light" 를 가진 body 태그 선택 */
body[data-theme="light"] {
  /* common */
  --bg: #fff;

  /* input */
  --bg-input: #fff;
  --border-input: #2bb14c;

  /* text */
  --color-text: #333333;
  --color-green: #2bb14c;
}

/* data-theme 속성 값 "dark" 를 가진 body 태그 선택 */
body[data-theme="dark"] {
  /* common */
  --bg: #303a52;

  /* input */
  --bg-input: #383838;
  --border-input: #2bb14c;

  /* text */
  --color-text: #e5e5e5;
  --color-green: #2bb24c;
}

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

input {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
}

이런식으로 변수를 호출하며 컴포넌트를 styling 하면 된다.
색을 바꿔줄 때도 variables.css 만 수정해주면 되므로 유지보수가 간편하다.

2. Toggle UI 구현

재사용 가능한 Toggle 버튼 컴포넌트

3. Theme 전환 로직 구현

위에서 생성한 Toggle 컴포넌트의 상위 컴포넌트로 Theme 을 제어하는 로직을 가진 ThemeToggle 컴포넌트 를 생성한다.
그리고 모드를 저장하기 위해 localStorage 를 사용한다.

4. 결과

최종적으로 적용된 페이지는 프로젝트 링크 에서 확인 가능하다.

혹시 궁금한 부분 또는 부족한 부분이 있다면 댓글로 편하게 남겨주세요 !

출처