프로그래밍/CSS

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

꾸션 2022. 7. 23. 19:36
반응형

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

일반적인 방법은 "@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 다크, 라이트모드 변경 이벤트 처리하기

사용자가 시스템의 화면모드를 라이트 혹은 다크 모드로 변경시 이에 따른 처리를 위해서 자바스크립트로 해당 이벤트를 받아서 처리하는 방법입니다. CSS 다크모드 처리 2가지 방식 다크모드를

ccusean.tistory.com

 

 

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

서버사이드(Server side)에서 사용자의 Color scheme를 미리 알고, 처리할 수 있는 방법을 공유합니다. Mac, iPhone과 같은 경우 이미 오래전부터 "다크테마"라는 것을 제공하고 있습니다. 눈의 피로도를

ccusean.tistory.com

반응형