라이트-다크모드

light-dark

라이트-다크모드 코드 작성을 보다 편리하게 사용할 수 있도록 해주는 유틸리티 함수

기존의 방식

• 기존에는 media query를 사용해 유저 디바이스에 다크모드가 있는지부터 확인한 후 라이트-다크모드 적용

• 반복해서 같은 작업을 실행해야한다는 단점이 있음

◆ prefers-color-scheme:

• 라이트 테마나 다크 테마를 사용하는지 탐지하는데에 사용
• mdn_prefers-color-scheme

.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

● CSS 변수(CSS variables, CSS custom properties)를 사용해서 코드 작성

CSS 변수를 선언하고, var(--변수명)을 사용해 CSS 변수 사용하기

: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;
}

■ light-dark

1. color-scheme 속성을 사용해서 웹사이트가 지원하는 색 구성표를 지정

   • 브라우저가 light모드, dark 모드 모두 지원한다고 브라우저에 알리는 작업
   • 특정 요소에 어둡거나 밝은 모드를 강제 적용할 수 있도록 해줌

2. light-dark함수를 사용해 코드 스타일 코드 작성하기

   • light-dark(**라이트모드**에 적용할 색상, **다크모드**에 적용할 색상)

단점.

• 색상 값으로만 작동하기 떄문에 할 수 있는 일이 제한적임
• 현재는 Firefox 버전 120에서만 작동

:root {
  color-scheme: light dark;
}

/* 작동 */
body {
  background: light-dark(white, black);
  color: light-dark(black, white);
}

/* 작동 X */
h1 {
  font-size: light-dark(14px, 16px);
}