CSS와 JavaScript를 사용하여 웹사이트를 다크 모드로 전환하는 방법

소개

어두운 모드는 밝은 텍스트와 요소로 어두운 배경을 사용하는 디스플레이 설정입니다. 보기에도 좋고 여러 가지 실용적인 장점도 있어서 인기를 얻었습니다.

다크 모드의 장점은 다음과 같습니다.

1. 눈의 피로 감소: 다크 모드는 화면에서 방출되는 밝은 빛의 양을 줄여주므로 특히 저조도 환경에서 눈을 편안하게 해줍니다.
2. OLED 화면의 배터리 수명 향상: OLED(유기발광다이오드) 화면에서 다크 모드는 검은색 픽셀이 본질적으로 꺼지고 밝은 색상을 표시하는 것보다 전력 소모가 적기 때문에 배터리 수명을 절약할 수 있습니다.

이 튜토리얼에서는 CSS와 JavaScript를 사용하여 웹사이트를 다크 모드로 전환하는 방법을 다룹니다. 간단한 밝은 테마의 웹 페이지 템플릿으로 시작해 밝은/어두운 모드를 전환할 수 있는 웹사이트로 변환하여 사용자가 밝은 테마와 어두운 테마를 원활하게 전환할 수 있도록 하겠습니다.

프로젝트 설정

간단한 밝은 테마의 웹페이지 템플릿부터 시작해 보겠습니다. 그런 다음 사용자가 밝은 테마와 어두운 테마를 전환할 수 있도록 밝은/어두운 모드를 전환할 수 있는 웹사이트로 변환하겠습니다.

다크 모드 스타일 구현

색상 선택

첫 번째 단계는 사용 중인 모든 색상을 나열하고 각 색상에 대해 어두운 테마 버전을 선택하는 것입니다. 아래 표에는 페이지의 모든 색상과 해당 어두운 버전이 나열되어 있습니다.

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)

Pembolehubah Tersuai

Kami kemudian menggunakan pembolehubah CSS untuk mencipta kelas gelap dan terang pada badan dengan pembolehubah tersebut.

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);
}

Anda boleh membaca tentang pembolehubah CSS dalam Menggunakan sifat tersuai CSS. Pada asasnya, mereka ialah entiti yang ditakrifkan menggunakan dua sengkang (--) yang menyimpan nilai untuk digunakan semula dalam dokumen. Pembolehubah CSS menjadikan penyelenggaraan lebih mudah dengan membenarkan perubahan dikemas kini secara automatik.

Warna Elemen Dinamik

Kami menggunakan fungsi var() CSS untuk memasukkan nilai pembolehubah CSS. Dengan cara ini, kami boleh menukar warna secara dinamik dan mengemas kini satu pembolehubah untuk mencerminkan perubahan pada keseluruhan dokumen, bukannya menukar setiap satu secara manual.

Berikut ialah contoh elemen nav dan anak-anaknya:

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);
}

Togol Mod Cahaya/Gelap dengan JavaScript

Kini kita boleh menukar kelas badan kepada gelap atau terang untuk menukar tema. Mula-mula, tambahkan butang pada pengepala dan tetapkan fungsi changeTheme() untuk acara kliknya:

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

Tentukan fungsi changeTheme() yang menogol kelas badan:

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');
    }
}

Dan kini pengguna boleh menukar tema tapak web dengan mengklik pada butang.

Anda boleh melihat kod tutorial dalam CodePen di bawah

Langkah Seterusnya

Selain itu, anda boleh menyimpan pilihan tema pengguna dalam storan setempat. Mengemas kini fungsi changeTheme() untuk menyimpan tema yang dipilih dan menyemaknya apabila halaman dimuatkan akan memastikan pilihan pengguna diingati dan digunakan secara automatik pada lawatan seterusnya.

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);
});

Menambah skema warna: gelap; hartanah semasa dalam tema gelap juga boleh memastikan bahawa sesetengah elemen, yang sebaliknya sukar untuk digayakan, akan diubah gayanya oleh penyemak imbas.

body.dark {
  color-scheme: dark;
}

Kesimpulan

Kesimpulannya, menambahkan mod gelap pada tapak web anda boleh meningkatkan pengalaman pengguna dengan mengurangkan ketegangan mata dan memanjangkan hayat bateri pada skrin OLED. Dengan mengikuti panduan ini, anda boleh menyediakan togol mod terang/gelap dengan mudah menggunakan CSS dan JavaScript. Sesuaikan mod gelap agar sesuai dengan reka bentuk anda.

Kongsi pelaksanaan anda atau tanya soalan dalam ulasan di bawah.

위 내용은 CSS와 JavaScript를 사용하여 웹사이트를 다크 모드로 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!