CSS 변수와 JavaScript로 다크 모드 맞춤설정

앱이나 웹사이트에 다크 모드를 구현하는 것은 원활한 사용자 환경을 제공하는 데 매우 중요합니다. 기본 CSS 미디어 규칙은 브라우저가 시스템 설정 다크 모드를 감지할 수 있는 옵션을 제공하지만 사용자는 Microsoft Edge와 같이 아직 이를 지원하지 않는 특정 사이트나 브라우저에 대해 다른 테마를 선호할 수 있습니다.

이를 통해 CSS 변수와 JavaScript를 활용하여 테마 설정을 관리할 수 있습니다.

변수 및 테마를 사용한 CSS 사용자 정의

루트 또는 기본 수준에서 CSS 변수를 정의하고 어두운 테마:

:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    ...
    --bg-color: #333;
}

스타일을 동적으로 조정하는 데 필요한 변수를 호출합니다.

테마 감지 및 전환을 위한 자바스크립트

HTML의 헤더 섹션에 다음을 추가합니다. 사용자가 선호하는 테마를 감지하는 JavaScript:

function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();

JavaScript를 사용하여 밝은 테마와 어두운 테마 사이를 전환합니다.

const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);

테마 전환을 위한 HTML

사용자 제어 테마 전환을 위한 HTML 확인란을 만듭니다.

이 접근 방식을 사용하면 사용자의 테마를 자동으로 감지하고 사용자가 이를 재정의하도록 허용하며 브라우저와 플랫폼 전반에 걸쳐 맞춤형 환경을 제공할 수 있습니다.