웹에서의 다크모드 (Dark mode)

Nest: Development
Category: html/css
Hit: 1266
Star: 0

OS에서 다크모드를 지원하기 시작하다보니 웹에서도 슬슬 지원하기 시작하나보다.
페북 글에서 우연히 웹에서 다크모드에 관한 글을 보게 되었는데 좀 조사를 해봤다.

다음 링크에서 좀더 디테일하게 알 수 있고, css나 js로 처리할 수 있는 방법이 많다.

https://web.dev/prefers-color-scheme

다음 링크는 css로 다크모드 사용하기

https://css-tricks.com/dark-modes-with-css/

다음 링크에서 다크모드 지원 브라우저에 대하여 알 수 있다.

https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme

다음은 css media query로 다크모드 분기하는 방법

body {
  background-color: lime;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: red;
  }
}

SCSS 다크모드 믹스인

좀 더 편하게 사용하기 위하여 mixin으로 만들었다.

// dark mode
@mixin dark-mode($root: false) {
  @if ($root) {
    &[data-theme=dark] {
      @content;
    }
    &[data-theme=system],
    &:not([data-theme]),
    &[data-theme=""] {
      @media (prefers-color-scheme: dark) {
        @content;
      }
    }
  } @else {
    html[data-theme=dark] & {
      @content;
    }
    @media (prefers-color-scheme: dark) {
      html[data-theme=system] &,
      html:not([data-theme]) &,
      html[data-theme=""] & {
        @content;
      }
    }
  }
}

보통 미디어쿼리만 들어있고 끝인게 아니라 html 엘리먼트에서 <html data-theme="dark"/> 형식으로 작성하면 임의로 테마를 지정할 수 있다.

<html data-theme="system"/>: 시스템 모드에 의해 테마가 지정된다.
<html data-theme="light"/>: 라이트모드로 지정
<html data-theme="dark"/>: 다크모드로 지정

사용법은 다음과 같다.

div {
  @include dark-mode() {
    color-scheme: dark;
  }
}

// 루트 엘리먼트에서 사용한다면 다음과 같이 파라메터를 추가해줘야 한다.
:root {
  color-scheme: light;
  @include dark-mode(true) {
    color-scheme: dark;
  }
}

이번에는 좀더 개선하여 코드를 축소시킬 수 있다.

@mixin dark-mode($root: false) {
  @if ($root) {
    &[data-theme=dark] {
      @content;
    }
    @media (prefers-color-scheme: dark) {
      &:not([data-theme=light]) {
        @content;
      }
    }
  } @else {
    &:has(:root[data-theme=dark]) {
      @content;
    }
    @media (prefers-color-scheme: dark) {
      &:has(:root:not([data-theme=light])) {
        @content;
      }
    }
  }
}