CSS と JavaScript を使用して Web サイトをダークモードに切り替える方法

導入

ダーク モードは、暗い背景に明るいテキストと要素を使用する表示設定です。見た目が良く、いくつかの実用的な利点があるため、人気が高まっています。

ダーク モードの利点は次のとおりです:

1. 目の負担の軽減: ダーク モードは、画面から発せられる明るい光の量を減らすため、特に暗い環境で目に負担がかかりません。
2. OLED スクリーンのバッテリー寿命の向上: OLED (有機発光ダイオード) スクリーンでは、ダーク モードは黒ピクセルが基本的にオフになり、明るい色の表示に比べて消費電力が少なくなるため、バッテリー寿命を節約できます。

このチュートリアルでは、CSS と JavaScript を使用して Web サイトをダーク モードに切り替える方法について説明します。シンプルなライトテーマの Web ページテンプレートから始めて、それを切り替え可能なライト/ダークモードを備えた Web サイトに変換します。これにより、ユーザーはライトテーマとダークテーマをスムーズに切り替えることができます。

プロジェクトのセットアップ

シンプルな光をテーマにした Web ページ テンプレートから始めましょう。次に、これを切り替え可能なライト/ダーク モードを備えた Web サイトに変換し、ユーザーがライト テーマとダーク テーマを切り替えられるようにします。

ダークモードスタイルの実装

色の選択

最初のステップは、使用しているすべての色をリストし、それぞれにダークテーマのバージョンを選択することです。以下の表に、ページ上のすべての色と、それに対応するダーク バージョンを示します。

Name	Light version	Dark version
body-bg	#f4f4f4	#121212
primary-text	#333333	#e0e0e0
header-footer-bg	#333333	#181818
header-footer-text	#ffffff	#ffffff
section-bg	#ffffff	#1f1f1f
secondary-text	#006baf	#1e90ff
shadow	rgba(0, 0, 0, 0.1)	rgba(0, 0, 0, 0.2)

맞춤 변수

그런 다음 CSS 변수를 사용하여 해당 변수로 몸체에 어둡고 밝은 클래스를 만듭니다.

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

CSS 사용자 정의 속성 사용에서 CSS 변수에 대해 읽을 수 있습니다. 기본적으로 이는 문서에서 재사용할 값을 저장하는 두 개의 대시(--)를 사용하여 정의된 엔터티입니다. CSS 변수를 사용하면 변경 사항이 자동으로 업데이트되므로 유지 관리가 더 쉬워집니다.

동적 요소 색상

CSS 변수의 값을 삽입하기 위해 var() CSS 함수를 사용합니다. 이렇게 하면 각 변수를 수동으로 변경하는 대신 동적으로 색상을 변경하고 하나의 변수를 업데이트하여 전체 문서의 변경 사항을 반영할 수 있습니다.

다음은 nav 요소와 해당 하위 요소의 예입니다.

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

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

JavaScript로 라이트/다크 모드 전환

이제 바디 클래스를 dark 또는 light로 변경하여 테마를 전환할 수 있습니다. 먼저 헤더에 버튼을 추가하고 해당 클릭 이벤트에 대한changeTheme() 함수를 설정합니다.

<button onclick="changeTheme()" class="theme-toggle">
    <svg> <!-- icon --> </svg>
</button>

본문의 클래스를 전환하는 ChangeTheme() 함수를 정의합니다.

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

이제 사용자는 버튼을 클릭하여 웹사이트 테마를 변경할 수 있습니다.

아래 CodePen에서 튜토리얼 코드를 보실 수 있습니다

다음 단계

또한 사용자의 테마 기본 설정을 로컬 저장소에 저장할 수도 있습니다. 선택한 테마를 저장하고 페이지가 로드될 때 이를 확인하도록 ChangeTheme() 함수를 업데이트하면 사용자의 선택이 기억되어 다음 방문 시 자동으로 적용됩니다.

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

색 구성표 추가: 어두움; 어두운 테마에 있을 때 속성을 사용하면 스타일을 지정하기 어려운 일부 요소의 스타일이 브라우저에 의해 변경되도록 할 수도 있습니다.

body.dark {
  color-scheme: dark;
}

결론

결론적으로 웹사이트에 다크 모드를 추가하면 OLED 화면에서 눈의 피로를 줄이고 배터리 수명을 연장하여 사용자 환경을 개선할 수 있습니다. 이 가이드를 따르면 CSS 및 JavaScript를 사용하여 밝은/어두운 모드 전환을 쉽게 설정할 수 있습니다. 디자인에 맞게 다크 모드를 맞춤 설정하세요.

아래 댓글로 구현 내용을 공유하거나 질문을 남겨주세요.

以上がCSS と JavaScript を使用して Web サイトをダークモードに切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。