[CSS] 다크/라이트 모드 구현 방법

다크/라이트 모드 구현 방법

들어가며

• CSS를 이용하여 홈페이지에 다크/라이트 모드를 적용할 수 있다.
• 보통 토글(Toggle) 버튼을 만들어서 사용자가 기호에 따라 원하는 모드로 변경할 수 있도록 한다. (자바스크립트 또는 제이쿼리를 사용해서 구현할 수 있다.)

 

방법

방법 ① : prefers-color-scheme 미디어 쿼리 이용하기

• prefers-color-scheme 미디어 쿼리는 사용자의 OS에 설정된 라이트/다크 모드를 실시간으로 감지하여 최적화된 CSS 스타일이 적용되도록 해준다.
• 감지하는 역할만 하기 때문에, 아쉽게도 토글 버튼 등을 이용하여 속성을 변경시킬 수는 없다. (light ↔ dark)

@media (prefers-color-scheme: light) {
  /* 라이트 모드에 적용할 스타일 정의 */
}

@media (prefers-color-scheme: dark) {
  /* 다크 모드에 적용할 스타일 정의 */
}

 

방법 ② : CSS 변수 이용하기

• CSS 변수(Variable)을 이용하여 변경해주기 때문에 유지 보수가 쉬워진다.
  • CSS 변수는 '--변수이름' 형식으로 선언하며, 사용할 때는 var(--변수이름)을 사용한다.
• 토글 버튼 등을 이용하여 간단하게 라이트/다크 모드를 변경할 수 있도록 할 수 있다.

:root {
  --background: #fff;
  --text: #363636;
  --heading-text: #000;
  --anchor-text: #0076d1;
  --code-background: #efefef;
  --code-text: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #202b38;
    --text: #dbdbdb;
    --heading-text: #fff;
    --anchor-text: #0076d1;
    --code-background: #161f27;
    --code-text: #ffbe85;
  }
}

body {
  background: var(--background);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

h1,
h2,
h3 {
  color: var(--heading-text);
}

p,
dl {
  color: var(--text);
}

a {
  color: var(--anchor-text);
  text-decoration: none;
}

code {
  color: var(--code-text);
  background: var(--code-background);
  border-radius: 6px;
  padding: 2.5px 5px;
}

 

 

구현할 때 도움되는 사이트

• https://www.daleseo.com/css-prefers-color-scheme/
• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp
• https://marshallku.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
• https://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