[Next.js]다크모드 구현하기 (sass)

다크모드

안녕하세요. 오늘은 next에서 scss를 이용해서 다크 모드를 구현해볼 건데요. 왜 css 가 아닌 scss(sass)를 사용하는지 차이점을 비교하고 다크 모드를 구현해보겠습니다.

 

Sass vs Css

---

css 코드

.container {
  background-color: yellow;
}

.container div {
  background-color: green;
}

.container div a {
  color: red;
}

 

Scss 코드

.container {
  background-color: yellow;
  
  div {
    background-color: green;
    a {
      color: red;
    }
  }
}

첫 번째로 nesting이 가능하다는 것인데요.

 

또한, scss에서는 변수, 함수 선언이 가능하고 Mixin incloude, import 기능들을 사용 가능합니다. 

좀 더 자세히 알고 싶으면 아래를 참고하시면 됩니다.

https://sass-lang.com/documentation

Sass: Documentation

 

Sass 설치

---

일단 Sass를 next에서 사용하기 위해서는 npm or yarn을 이용해서 패키지를 설치해 줘야 합니다.

$ npm install scss
$ yarn add scss

 

index.jsx

---

 

import { useEffect, useState } from 'react';

import style from '../styles/theme.module.scss';

export default function Home() {
  const [mode, setmode] = useState('light');

  const onDark = () => {
    setmode('dark');
  }

  const onLight = () => {
    setmode('light');
  }

  const getStyle = (st, name) => {
    const style = mode === 'light' ? `${name} ${st.light}` : `${name} ${st.dark}`;
    return style;
  }

  return (
    <div className={getStyle(style, style.main)}>
      <div className={getStyle(style, style.container)}>
        <div className={getStyle(style, style.btn)}>
          <button onClick={onLight}>Light Mode</button>
          <button onClick={onDark}>Dark Mode</button>
        </div>
        <div className={getStyle(style, style.contents)}>Now: {mode}</div>
      </div>
    </div>
  )
}

1. 현재 mode를 useState hook을 사용해서 현재 mode 상태 관리를 해주었습니다. 

2. button 클릭 시에 mode를 변경해주는 onLight, onDark 함수를 만들어 주었습니다.

3. light 모드일 때와 dark 모드일 때를 나누어 className을 지어주는 getStyle 함수를 만들어 주었습니다.

4. 모드가 변경될 때 변경될 점이 있는 tag 들에 getstyle 함수를 사용해 주었습니다. 

- button을 클릭하면 mode가 변경되고  mode에 맞게 className도 변경됩니다.

 

 

theme.module.scss

---

@import "./theme.scss";

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  @include get-color(background-color, bg-color);

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 4rem;
    border: 1px solid;
    @include get-color(border-color, br-color);

    width: 20rem;
    .btn {
      margin-bottom: 5rem;
      display: flex;
      width: 100%;
      justify-content: space-between;
    }

    .contents {
      @include get-color(color, text-color);
    }
  }
}

변경되어야 색상을 앞으로 만들게 될 get-color 함수에 첫 번째 인자에는 key값을 두 번째 인자에는 value를 적어줍니다.

여기서 value는 뒤에 나올 color.scss의 theme마 별 color 들입니다. 

 

theme.scss

---

@import "./color.scss";

@function get-color2($key, $type: "light") {
  @each $name, $color in map-get($colors, $type) {
    @if ($key == $name) {
      @return $color;
    }
  }
}

@mixin get-color($property, $color) {
  &.dark {
    #{$property}: get-color2($color, "dark");
  }
  &.light {
    #{$property}: get-color2($color);
  }
}

scss 기능 중에 get-color 함수를 보면 첫 번째 인자에 key값 두 번째 인자에는 value 가 들어옵니다. get-color에서는 현재 mode가 light 모드인지 dark 모드인지 확인해서 get-color2 함수의 두 번째 인자에 type을 넘겨줍니다.

get-color2 에서는 $color를 color.scss 에 있는 theme 별로 $color의 값을 반환해 줍니다.

color.scss

---

$colors: (
  light: (
    bg-color: #fff,
    text-color: rgb(71, 71, 71),
    br-color: rgb(71, 71, 71),
  ),
  dark: (
    bg-color: rgb(71, 71, 71),
    text-color: #fff,
    br-color: #fff,
  ),
);

여기서는 theme 별로 바뀔 색깔들을 나눠줍니다.

결과

---