Styled Component로 다크모드 구성하기

시작하기 전에

몇년전부터 각종 OS나 앱에서 다크모드가 나오면서 많은 유저들이 다크모드에 대한 관심이 늘어났다. (아마 내 생각엔 애플?? 제품에서 먼저 나왔던거 같다.) 그러면서 OS세팅에 따른 다크모드/화이트모드 지원이라던지 유저의 설정에 따른 모드 지원을 해주는 사이트가 하나 둘 씩 늘어나고 있는 추세이다. 이번 글에서는 우리도 한번 Styled Component를 이용해서 다크모드를 지원하는 프로젝트 세팅을 해보려고 한다. 

 

Styled Component - themeProvider

이 글에서는 다크모드를 지원하는 구조를 Styled Component에서 제공해주는 themeProvider를 이용하여 구현 해볼 것이다. 

themeProvider란 Context API 기반으로 이루어진 Styled-Component에서 제공하는 Theme Provider이다. themeProvier로 감싼 Component들은 theme 정보를 props형태로 넘겨받아서 사용 할 수 있다.

 

기술 스택 정의

이번 글에서는 아래의 정의한 구성으로 진행 할 예정이다. 핵심 기술은 Styled-components에서 제공하는 themeProvider와 useDarkMode라고 하는 커스텀 Hook Function이다. 따라서 SPA나 SSR와 같은 큰 범위의 프로젝트 구조는 신경 쓸 필요 없다.

 

사용하는 구성 정보

[x] next.js

[x] react

[x] styled-components - themeProvider (링크)

[x] useDarkMode (링크)

 

다크모드 구현하기

먼저 다크 모드로 구현하기 전에 어떤식으로 동작하게 할 것인지 정리 해보자.

우리가 구현할 다크모드/화이트모드 구성은 처음에 사이트 방문 시 default mode로 보여주고, 그 다음 방문시에는 최종적으로 적용했던 정보를 보여주고, 만약 OS에서 모드를 변경 했을 때 그거에 맞춰서 바로 변경해주는 시나리오로 진행 해 볼 것이다. 아래의 그림과 같은 구성이다.

다크모드/화이트모드 구현 시나리오

그림으로 도식화 해보면 대충 이러한 모습이다.

그러면 바로 만들어 보자.

 

Dark Mode / White Mode Color Set 정의하기

먼저 Dark모드와 White모드에서 사용할 CSS Color들을 정의 해보자. theme.js 파일을 생성 후 dark와 light 변수로 정의 해보자.

// theme.js
const light = {
  bg: {
    primary: '#eff0f5'
  },
  text: {
    primary: '#202124'
  }
}

const dark = {
  bg: {
    primary: '#202124'
  },
  text: {
    primary: '#eff0f5'
  }
}

export const lightTheme = { ...light }
export const darkTheme = { ...dark }

우선 우리는 다크/화이트 모드를 각각 하나의 테마로 판단 할 것이다. 즉, 화이트 모드 선택 시 화이트 테마로 변경한다는 뜻이다.

우선 간단하게 background와 text의 기본 컬러를 정의하고 export 시켜놓자.

그 다음 Providers라는 Wrapper Component를 구현 해보자.

// Provider.js
import React from 'react'
import useDarkMode from 'use-dark-mode'
import { lightTheme, darkTheme } from './theme'
import { ThemeProvider } from 'styled-components'

const Providers = ({ children }) => {
  const darkMode = useDarkMode(false)
  const theme = darkMode.value ? darkTheme : lightTheme

  return (
    <ThemeProvider theme={theme}>
      {children}
    </ThemeProvider>
  )
}

export default Providers

이 컴포넌트는 모든 컴포넌트들의 최상위를 감쌀 예정이다. 나는 이번 예제를 Next.js구조에서 진행 했기 때문에 _app.js 파일을 pages폴더 안에 생성하여 재정의 해서 사용 해야 한다. (만약 SPA로 예제를 진행 한다면 app.js에서 <ThemeProvider>로 감싸기만 하면 된다.

 

_app.js에서 어떤식으로 감쌌는지 확인 해보자.

// _app.js
import React from 'react'
import App from 'next/app'
import Providers from '../Providers'

class MyApp extends App {
  render () {
    const { Component, pageProps } = this.props
    return (
      <Providers>
        <Component { ...pageProps }/>
      </Providers>
    )
  }
}

export default MyApp

이런식으로 Component를 Providers 컴포넌트로 감싸면서 themeProvider에 정의 되어 있는 theme정보를 접근 할 수 있게 해준다.

마지막으로는 mode에 따른 컬러 변경을 해주면 된다.

 

mode에 따른 컬러 변경은 개발자가 특별하게 해줘야 하는게 없다.

Styled Component안에서 theme에 있는 값을 꺼내서 쓰면된다. 코드는 아래와 같다.

import React from 'react'
import styled from 'styled-components'

const Sample = styled.a`
  background: ${({ theme }) => theme.text.primary}; // 이렇게!
`

// ...Component Codes

이런식으로 Styled Component props에 존재하는 theme를 접근해서 theme.js에 설정했던 값들을 쓰면 된다.

이렇게 하면 아래의 동영상과 같은 다크/화이트 모드를 지원할 수 있는 사이트를 만들 수 있다.

 

완성된 모습

다들 이 글을 참고하여 자신만의 화면 모드 전환 사이트를 쉽게 만들어 보면 좋을 것 같다.

 

@JJoGeon