SCSS 활용 팁 17. 시스템 설정에 기반하여 다크모드 적용하기

prefers-color-scheme를 이용하면 JavaScript없이도 운영체제(OS)의 설정에 따라 다크모드를 적용할 수 있습니다. 이 방식을 사용하면 사용자가 수동으로 모드를 변경할 필요 없이, 시스템 설정을 기반으로 다크모드를 적용시킵니다.

SCSS 변수 설정

_variables.scss파일을 생성하고 여기에 기본 라이트 모드와 다크 모드의 주요 색상을 변수로 지정합니다. 

$light-mode: (
  bg: #ffffff,
  text: #333333,
  primary: #007bff
);

$dark-mode: (
  bg: #121212,
  text: #ffffff,
  primary: #bb86fc
);

 

스타일 적용

style.scss에 앞서 작성한 _variables.scss파일을 임포트하고 스타일 코드를 작성합니다. prefers-color-scheme:dark를 사용하여 운영체제의 설정이 다크모드일 경우 해당하는 스타일이 적용되도록 하였습니다.

@import "variables"; // 라이트/다크 테마 변수 포함

// 기본값 (라이트 모드)
body {
  background-color: map-get($light-mode, bg);
  color: map-get($light-mode, text);
}

// 다크 모드 (시스템 설정 감지)
@media (prefers-color-scheme: dark) {
  body {
    background-color: map-get($dark-mode, bg);
    color: map-get($dark-mode, text);
  }
}

결론

prefers-color-scheme을 사용하면 JavaScript를 사용하지 않아도 다크모드를 적용할 수 있어 간단하고 편리합니다. 하지만 운영체제의 설정을 따라가는 것이기 때문에 사용자가 직접 다크모드 전환을 할 수 없고, 운영체제 설정이 라이트모드라면 다크모드를 사용할 수 없다는 단점이 있습니다.