Cara Paling Mudah untuk Menambah Mod Gelap pada Tapak Web Anda-tutorial js-php.cn

Cara Paling Mudah untuk Menambah Mod Gelap pada Tapak Web Anda

WBOY

Lepaskan： 2024-07-29 04:46:23

asal

482 orang telah melayarinya

The Easiest Way to Add Dark Mode to Your Website

Keupayaan untuk menggunakan tapak web dan aplikasi dalam mod gelap semakin popular sejak beberapa tahun kebelakangan ini. Ia melegakan ketegangan mata, memanjangkan hayat bateri pada peranti penapisan OLED dan menawarkan pengganti yang menyenangkan dari segi estetika untuk tema cahaya tradisional. Tutorial ini akan menunjukkan kepada anda cara menggunakan JavaScript untuk menogol tema dan pembolehubah CSS untuk menambah mod gelap pada tapak web anda.

Langkah 1: Menyediakan HTML Anda

Pertama, mari kita mulakan dengan struktur HTML asas. Cipta fail index.html dengan kandungan berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to Dark Mode Tutorial</h1>
        <button id="theme-toggle">Toggle Dark Mode</button>
    </header>
    <main>
        <p>This is a sample website to demonstrate dark mode implementation.</p>
    </main>
    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Fail HTML ini termasuk pengepala dengan tajuk dan butang untuk menogol mod gelap, kawasan kandungan utama dengan beberapa teks dan pautan ke fail CSS dan JavaScript kami.

Langkah 2: Menentukan Pembolehubah CSS

Sekarang mari kita tentukan pembolehubah dalam CSS kita. Buat fail styles.css dengan kandungan berikut:

:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --header-background-color: #f1f1f1;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

header {
    background-color: var(--header-background-color);
    padding: 20px;
    text-align: center;
}

button {
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
}

.dark-mode {
    --background-color: #181818;
    --text-color: #ffffff;
    --header-background-color: #242424;
}

Salin selepas log masuk

Kami menggunakan :root untuk mentakrifkan sekumpulan pembolehubah CSS dalam fail CSS ini. Untuk mod cahaya, pembolehubah ini menentukan warna latar belakang, warna teks dan warna latar belakang pengepala. Selain itu, kelas .dark-mode ditakrifkan dan tetapannya diutamakan daripada pembolehubah ini. Peralihan lancar antara tema dijamin oleh sifat peralihan elemen badan.

Langkah 3: Menambah JavaScript untuk Togol Tema

Sekarang, mari tambah JavaScript untuk mengendalikan togol tema. Cipta fail script.js dengan kandungan berikut:

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved user preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    body.classList.add(savedTheme);
}

// Toggle dark mode
themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save user preference
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark-mode');
    } else {
        localStorage.removeItem('theme');
    }
});

Salin selepas log masuk

Skrip ini memilih butang togol tema dan elemen badan. Apabila butang diklik, ia menogol kelas mod gelap pada badan. Skrip juga menyimpan pilihan tema pengguna dalam localStorage, jadi tema itu berterusan merentasi muat semula halaman.

Langkah 4: Menguji Pelaksanaan

Lancarkan pelayar web anda dan buka fail index.html untuk menguji pelaksanaan. Untuk bertukar antara tema terang dan gelap, klik butang "Togol Mod Gelap".
Ingat bahawa memuat semula halaman tidak sepatutnya menjejaskan pilihan tema.

Kesimpulan

Anda boleh menambah togol mod gelap dengan cepat ke tapak web anda dengan menggunakan pembolehubah CSS dan sedikit JavaScript. Metodologi ini memudahkan peralihan tema yang lancar dan menawarkan pengalaman pengguna yang dipertingkatkan. Sila berasa bebas untuk menambah lebih banyak elemen pada halaman anda dan mengubah suai gaya untuk membina pelajaran ini.

Selamat mengekod :D

Atas ialah kandungan terperinci Cara Paling Mudah untuk Menambah Mod Gelap pada Tapak Web Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!