CSS 다크모드 처리 2가지 방식

다크모드를 처리하는 두 가지 방식에 대해서 설명드립니다.

일반적인 방법은 "@media"태크의 "prefers-color-schem"를 사용하는 방법이며, 또 다른 방법은 "<link href=... />"에 사용하는 파일로딩 방식입니다.

 

스크립트 방식

시스템에 설정된 light, dark 모드에 따라서 스타일시트가 적용됩니다.

<style>  
  @media (prefers-color-scheme: dark) {
    html, body {
      background-color: black;
      color: white;
    }
  }

  @media (prefers-color-scheme: light) {
    html, body {
      background-color: white;
      color: black;
    }
  }
</style>

 

파일로딩 방식

로딩한 파일중에서 시스템에 설정된 모드에 따라서 적용됩니다.

<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: light)" />

 

JavaScript 다크, 라이트모드 변경 이벤트 처리하기

 

Node.js Prefers-color-scheme 서버에서 처리하는 방법