단 14줄의 CSS로 밝고 어두운 모드

나는 모든 것을 어두운 모드로 좋아합니다. 하지만 라이트 모드를 선호하는 사람들도 많이 알고 있습니다! 개인 취향을 존중하고 처음부터 접근성을 고려하기 위해 새 웹 프로젝트를 시작하자마자 네이티브 라이트 및 다크 모드에 대한 지원을 추가합니다.

이 솔루션은 JavaScript를 사용하지 않으므로 밝고 어두운 모드 토글을 구축하지 않습니다. 대신 CSS 미디어 쿼리로 사용자의 시스템 설정을 감지하고 두 개의 사용자 지정 CSS 속성을 사용하여 기본 색 구성표를 결정합니다. 방법은 다음과 같습니다.

2개의 CSS 사용자 지정 속성 선언

CSS 사용자 정의 속성은 CSS variables or cascading variables이라고도 합니다. CSS 사용자 정의 속성은 CSS 파일의 어느 곳에서나 정의할 수 있으며 다른 CSS 규칙과 동일한 연속 및 특정 패턴을 따릅니다. 예를 들어 문서 루트에서 CSS 변수를 정의하고 보다 구체적인 CSS 클래스에서 재정의할 수 있습니다. 멋진 점은 스타일시트 규칙 아래에 표시되는 브라우저 개발 도구에서 선언된 CSS 변수를 검사하고 디버그할 수도 있다는 것입니다.



CSS 사용자 정의 속성은 두 개의 대시(--) 접두사가 붙은 단어로 선언되며 var() 함수를 사용하여 액세스합니다.

:root {
  --my-color-variable: #000000;
}

.element {
  /* This is calculated as #000000! */
  color: var(--my-color-variable);
}

또한 var() 함수에 두 번째 매개변수를 전달할 수 있습니다. 이 매개변수는 사용하려고 할 때 사용자 정의 속성이 존재하지 않는 경우 대체 값 역할을 합니다.

.element {
  color: var(--my-new-color, #ff0000);
}

이 밝은/어두운 모드 솔루션의 경우 문서 루트에서 두 개의 색상 변수를 정의합니다. 하나는 전경색용이고 다른 하나는 배경색용입니다. 저는 기본적으로 다크 모드를 선택하는 편이라 배경색을 검정(--color-bg ), 전경색을 흰색(--color-fg )으로 설정합니다.

:root {
  --color-bg: #000000;
  --color-fg: #ffffff;
}

prefers-color-scheme 미디어 쿼리 사용

다음으로 prefers-color-scheme CSS 미디어 쿼리를 사용하여 시스템 설정에 연결하고 배경 및 전경색에 대한 변수 선언을 뒤집습니다. 다음 코드는 밝은 테마 설정이 감지되면 --color-bg를 흰색으로, --color-fg를 검은색으로 설정합니다.

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-fg: #000000;
  }
}

바디 스타일 추가

마지막으로 CSS 사용자 지정 속성을 사용하여 HTMLbackground-color 요소에서 (페이지 색상의 경우) color 및 (텍스트의 경우) body를 설정합니다. 덮어쓰지 않으면 모든 하위 요소가 상속합니다.

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

그게 전부입니다. 단 14줄의 CSS로 기본 조명 및 어두운 모드 기본 설정을 지원합니다!

CodePen에서 코드 보기

시스템 기본 설정에 따라 밝은 모드 또는 어두운 모드를 표시하는 full example on CodePen 이 있습니다. CodePen 스위치 테마를 보려면 시스템 설정을 전환하세요!



다크 모드와 라이트 모드를 어떻게 구현합니까? .