Provider를 사용하지 않고 SCSS로 다크모드를 구현해보자

사이드 프로젝트를 만들던 도중에 다크모드를 구현을 해보았었는데
그때는 Styled-Components를 ThemeProvider를 사용하여 구현하였다.
이렇게 구현하는 것도 장점이 있지만 theme의 값을 전부 props로 넘겨줘야 하니
내가 느끼기에는 살짝 번거롭다는 생각이 들었다

그래서 다른 방법으로 구현 해보면 어떨까 라는 생각에 SCSS prefers-color-scheme을 사용해서 구현을 해보았다

SCSS prefers-color-scheme로 다크모드 구현하는 방법

• prefers-color-scheme 미디어 쿼리르르 사용해서 적용 할 수 있는데
  각 해상도에 따라 미디어쿼리를 적용하는 방식과 크게 다르지 않습니다 .

저의 경우에는 App.scss 파일에서
아래와 같이

:root {
  --background: #96D9B9;
  --textcolor: black;
  --messageBackground: #5496fa;
  --AppTheme: #fff;
  --interngram: #6480A3;
  --chatListback: #fff;
  --chatHeader: rgb(250, 170, 170);
  --chatbackground: skyblue;
}

변수명에 처음으로 설정 할 기본 값과

@media (prefers-color-scheme: dark) {
  :root {
    --background: #181a50;
    --textcolor: #fff;
    --messageBackground: rgb(51, 15, 179);
    --AppTheme: rgb(12, 12, 48);
    --interngram: #F0DE7A;
    --chatListback: rgb(10, 51, 104);
    --chatHeader: rgb(19, 2, 82);
    --chatbackground: rgb(51, 15, 179);
  }
}

다크모드 일 때의 값을 넣어 주었습니다 .

:root {
  --background: #96D9B9;
  --textcolor: black;
  --messageBackground: #5496fa;
  --AppTheme: #fff;
  --interngram: #6480A3;
  --chatListback: #fff;
  --chatHeader: rgb(250, 170, 170);
  --chatbackground: skyblue;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #181a50;
    --textcolor: #fff;
    --messageBackground: rgb(51, 15, 179);
    --AppTheme: rgb(12, 12, 48);
    --interngram: #F0DE7A;
    --chatListback: rgb(10, 51, 104);
    --chatHeader: rgb(19, 2, 82);
    --chatbackground: rgb(51, 15, 179);
  }
}

.background{
  background-color: var(--AppTheme);
  height: 1200px;
}

그 뒤에 헤더에 있는 토글 스위치에 아래와 같은 함수를 넣고 다크모드와 라이트 모드를 설정 해주었습니다 .

  function switchTheme(e: React.MouseEvent<HTMLInputElement>) {
    const etarget = e.target as HTMLInputElement;

    if (etarget.checked) {
      localStorage.setItem("theme", "dark");
      document.documentElement.setAttribute("data-theme", "dark");
    } else {
      localStorage.setItem("theme", "light");
      document.documentElement.setAttribute("data-theme", "light");
    }
  }

테마의 상태 값은 localStorage에 저장 해놓았습니다 .