사용자가 다크 모드/라이트 모드를 선호함

이 블로그는 라이트 모드 또는 다크 모드에 대한 사용자의 기본 설정을 기반으로 CSS의 기본 테마를 다룹니다.

CSS 변수

CSS 변수에 익숙하지 않은 경우 소개가 두 배가 됩니다. CSS 변수는 다음과 같이 문서의 최상위 수준에서 선언됩니다.

:root {
  --black: #101010;
  --white: #ffffff;
  --brand: #ff9999;
}

그런 다음 H1 태그에 대한 변수를 다음과 같이 호출할 수 있습니다.

h1 {
  background: var(--white);
  color: var(--black);
}

사용자 기본 설정 및 변수를 사용하여 페이지 업데이트

하나의 요소로 시작하여 다크 모드와 라이트 모드 사이를 전환해 보겠습니다. 사용자 기본 설정 쿼리를 활용하여 사용자가 어두운 모드 또는 밝은 모드를 선호하는지 확인할 수 있습니다. CSS 변수와 함께 CSS 파일은 다음과 같이 읽습니다.

:root {
  --black: #101010;
  --white: #ffffff;
  --brand: #ff9999;
}
h1 {
  background: var(--white);
  color: var(--black);
  padding: 5vh 0;
  text-align: center;
  transition: 1s;
}
@media (prefers-color-scheme: dark) {
  h1 {
    background: var(--black);
    color: var(--white);
  }
} 

몇 줄의 CSS를 추가하면 사용자가 기본 설정을 변경할 때 H1이 업데이트됩니다. 그것은 매우 반응이 좋습니다.

전체 테마로 확장

개념을 한 단계 더 발전시켜 코드를 리팩토링하여 사용자가 다크 모드를 선호하는 경우 변수 자체를 변경할 수 있습니다. 그런 다음 사용자 선호도에 관계없이 동일한 CSS 변수를 사용할 수 있습니다.

:root {
  --background: #ffffff;
  --text: #101010;
  --brand: #ff9999;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #101010;
    --text: #ffffff;
  }
}
body {
  background: var(--background);
  color: var(--text);
}
h1 {
  border: 2px solid var(--brand);
  padding: 5vh 0;
  text-align: center;
  transition: 1s;
}

기본적이지만 개념이 잘 작동하고 코드가 거의 없습니다. 이 부분을 더 깊이 파고들면 테두리 색상을 넘어 접근 가능한 방식으로 브랜드 색상을 통합하기 위해 노력할 것입니다.