CSS 변수와 JavaScript를 사용하여 내 웹사이트에 대한 사용자 정의 가능한 다크 모드를 만들려면 어떻게 해야 합니까?

CSS 변수 및 JavaScript로 다크 모드 사용자 정의

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

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

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

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

<code class="css">:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

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

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

테마 감지 및 전환을 위한 JavaScript

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

<code class="javascript">function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();</code>

JavaScript를 사용하여 밝은 테마와 어두운 테마 간 전환:

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

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);</code>

테마 전환을 위한 HTML

사용자 제어 테마 전환을 위한 HTML 확인란 만들기:

<code class="html"><label id="theme-switch" class="theme-switch" for="checkbox_theme">
    <input type="checkbox" id="checkbox_theme">
</label></code>

이 접근 방식을 사용하면 사용자 테마를 자동으로 감지하고 이를 재정의할 수 있으며 사용자 정의된 테마를 제공할 수 있습니다. 다양한 브라우저와 플랫폼을 경험해보세요.

위 내용은 CSS 변수와 JavaScript를 사용하여 내 웹사이트에 대한 사용자 정의 가능한 다크 모드를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!