[CSS]다크모드 구현

DarkMode

다크모드는 소프트웨어에서 하얀 배경화면 대신에 검은 또는 어두운 배경화면을 지원하는 것을 말한다. 어두운 곳에서 눈의 피로를 줄이기도 하고 사람들의 선호에 맞게 다크모드를 사용한다.

Prefers-color-scheme

다크모드를 prefers-color-scheme CSS미디어쿼리를 사용하여 적용할 수 있다.

 

<div class="themed">Theme</div>

 

 

.themed {
  display: block;
  width: 10em;
  height: 10em;
  background: black;
  color: white;
}

@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}

 

CSS 변수 선언하기

CSS로 변수를 선언해서 다크모드를 만들면 더 편한다.

 

:root {
  --color-background: white;
  --color-text-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: black;
    --color-text-color: white;
  }
}

.themed {
  background: var(--color-background);
  color: var(--color-text-color);
}

 

 

모드 선택하기

체크박스를 사용하여 사용자가 모드를 변경할수 있게 만들어 시스템상의 테마가 아닌 사용자가 변경하도록 만들어 보겠습니다.

 

See the Pen RwowePO by intae92 (@intae92) on CodePen.

 

 

 

localStorage

사용자가 모드를 선택할 수 있게 만들었지만 브라우저를 새로고침 하면 현재 모드를 기억하지 못한다. localStorage를 활용하여 다크 모드 유무를 기억하고 localStorage에 다크모드 유무에 대한 정보가 없으면 시스템상에서의 다크모드 유무를 window.matchMedia()로 확인해서 적용시키도록 구현합니다.

 

See the Pen oNYNaYJ by intae92 (@intae92) on CodePen.

 

 

 

 

 

 

 

 

 

참고

marshall-ku.com/web/tips/%EC%9B%B9%EC%97%90%EC%84%9C-%EB%8B%A4%ED%81%AC-%EB%AA%A8%EB%93%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

웹에서 다크 모드 구현하기

velog.io/@yijaee/%EB%8B%A4%ED%81%AC%EB%AA%A8%EB%93%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

다크모드 구현하기

edykim.com/ko/post/dark-mode/

웹페이지 다크 모드 지원하기

developer.mozilla.org/ko/docs/Web/CSS/:root

:root - CSS: Cascading Style Sheets | MDN

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

prefers-color-scheme - CSS: Cascading Style Sheets | MDN