기본 색 구성표 설정 재정의

다양한 운영 체제에서 널리 채택되면서 다크 모드 구현이 중요해졌습니다. 기본 브라우저 지원은 CSS 미디어 규칙 @media(prefers-color-scheme: dark)를 통해 존재하지만 사용자 기본 설정을 완전히 처리하지 못하거나 Microsoft Edge와 같은 지원되지 않는 브라우저를 충족시키지 못할 수 있습니다.

시스템 설정 분리 웹사이트 테마에서

최적의 사용자 제어를 제공하려면 사용자가 시스템의 색 구성표 설정을 재정의할 수 있도록 허용하는 것이 중요합니다. 이를 통해 고객은 특정 웹사이트에 대해 선호하는 테마를 선택할 수 있습니다. 이를 달성하기 위해 CSS 변수와 JavaScript의 조합이 활용됩니다.

CSS 구성

CSS 변수는 테마 매개변수를 정의합니다:

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

변수는 유연성을 보장하기 위해 스타일시트 전체에서 사용됩니다.

body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}

JavaScript 구현

JavaScript는 사용자 기본 설정을 감지하고 테마 간 전환에 중추적인 역할을 합니다.

function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();

toggleTheme 함수는 테마 전환을 처리합니다:

function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}

이 JavaScript는 자동 테마 감지를 보장하고 사용자가 확인란을 사용하여 테마를 재정의할 수 있도록 합니다.

결론

CSS 변수와 JavaScript를 결합하여 사용자가 시스템 설정에 관계없이 웹사이트의 색 구성표를 제어할 수 있는 기능을 제공합니다. . 이 접근 방식은 개인의 선호도와 다양한 브라우저의 제한 사항을 충족하면서 향상된 사용자 경험을 보장합니다.