Mencipta Penukar Mod Gelap/Cahaya CSS-tutorial css-php.cn

Mencipta Penukar Mod Gelap/Cahaya CSS

WBOY

Lepaskan： 2024-07-16 13:28:17

asal

395 orang telah melayarinya

Creating a CSS Dark/Light Mode Switcher

Penukar mod gelap dan terang telah menjadi semakin popular, menawarkan pengguna kelonggaran untuk memilih pengalaman visual pilihan mereka. Sama ada untuk mengurangkan ketegangan mata, menjimatkan hayat bateri atau hanya mengikut keutamaan peribadi, melaksanakan penukar mod gelap/cahaya boleh meningkatkan pengalaman pengguna dengan ketara. Dalam artikel ini, kami akan membimbing anda membuat penukar mod gelap/cahaya yang mudah tetapi berkesan menggunakan HTML, CSS dan JavaScript.

Mengapa Melaksanakan Mod Gelap/Cahaya?

1. Keutamaan Pengguna: Sesetengah pengguna memilih mod gelap untuk estetika atau mengurangkan ketegangan mata, terutamanya dalam persekitaran cahaya malap.

2. Kebolehcapaian: Meningkatkan kebolehaksesan dengan menawarkan tema yang boleh membantu pengguna cacat penglihatan.

3. Penjimatan Bateri: Pada skrin OLED, mod gelap boleh menjimatkan hayat bateri.

Menyediakan Struktur HTML

Mulakan dengan mencipta struktur HTML yang mudah. Kami memerlukan butang untuk menogol antara mod gelap dan terang.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark/Light Mode Switcher</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Dark/Light Mode Switcher</h1>
        <button id="modeSwitcher">Switch to Dark Mode</button>
        <p>Toggle the button to switch between dark and light modes.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Menggayakan dengan CSS

Seterusnya, kami akan menentukan gaya kami untuk kedua-dua mod gelap dan terang. Kami akan menggunakan pembolehubah CSS untuk menjadikan penukaran tema lebih mudah.

/* styles.css */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --button-bg-color: #000000;
    --button-text-color: #ffffff;
}

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

.container {
    text-align: center;
    margin-top: 50px;
}

button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
    opacity: 0.8;
}

body.dark-mode {
    --bg-color: #333333;
    --text-color: #ffffff;
    --button-bg-color: #ffffff;
    --button-text-color: #000000;
}

Salin selepas log masuk

Menambah Fungsi JavaScript

Sekarang, kami akan menambah JavaScript untuk mengendalikan suis tema. Kami juga akan menyimpan pilihan pengguna dalam localStorage supaya pilihan mereka berterusan merentas sesi.

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const switcher = document.getElementById('modeSwitcher');
    const currentMode = localStorage.getItem('theme') || 'light';

    if (currentMode === 'dark') {
        document.body.classList.add('dark-mode');
        switcher.textContent = 'Switch to Light Mode';
    }

    switcher.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        const mode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
        switcher.textContent = mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
        localStorage.setItem('theme', mode);
    });
});

Salin selepas log masuk

Penjelasan

1. Pembolehubah CSS: Kami menggunakan pembolehubah CSS untuk mentakrifkan warna bagi kedua-dua mod, menjadikannya mudah untuk bertukar antara mereka.

2. JavaScript: Kami menambahkan pendengar acara pada butang untuk menogol kelas mod gelap pada elemen badan. Kami juga mengemas kini teks butang berdasarkan mod semasa dan menyimpan mod dalam Storan setempat.

3. Tema Berterusan: Apabila halaman dimuatkan, kami menyemak localStorage untuk pilihan pengguna dan menggunakan tema yang sesuai.

Kesimpulan

Melaksanakan penukar mod gelap/cahaya meningkatkan pengalaman pengguna dengan menyediakan pilihan visual yang memenuhi pilihan dan keadaan yang berbeza. Dengan hanya beberapa baris HTML, CSS dan JavaScript, anda boleh menambahkan ciri berharga ini pada projek web anda.

Jangan ragu untuk mencuba ciri yang lebih maju, seperti peralihan lancar atau tema tambahan. Kemungkinannya tidak berkesudahan dan pengguna anda akan menghargai fleksibiliti tambahan.

Selamat mengekod!

Atas ialah kandungan terperinci Mencipta Penukar Mod Gelap/Cahaya CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!