Cara Mudah Menambah Mod Gelap pada Tapak Web Anda

Hei! Jadi, jika anda seperti saya dan menyukai keseluruhan getaran mod gelap, anda mungkin terfikir untuk menambahkannya pada tapak web anda. Ia agak mudah untuk disediakan dengan hanya sedikit CSS dan JavaScript. Begini cara saya melakukannya.

Langkah 1: Menyediakan HTML

Mula-mula, anda memerlukan butang atau suis yang pengguna boleh klik untuk menogol antara mod terang dan gelap. Saya menggunakan butang mudah untuk contoh ini (anda boleh menggunakan ikon jika anda mahu):

<button id="dark-mode-toggle">Toggle Dark Mode</button>

Butang ini akan menjadi pencetus untuk menukar mod.

Langkah 2: Menambah CSS untuk Mod Cerah dan Gelap

Seterusnya, anda perlu menentukan rupa mod terang dan mod gelap anda. Dalam CSS anda, anda akan menyediakan gaya lalai (yang akan menjadi mod terang anda) dan kemudian menambah kelas mod gelap yang mengatasi gaya ini.

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

Berikut ialah perkara yang berlaku:

• Mod Cahaya (Lalai): Badan mempunyai latar belakang putih dan teks hitam. Saya menambah peralihan untuk menjadikan perubahan lancar apabila bertukar antara mod.
• Mod Gelap: Kelas .mod gelap menukar latar belakang kepada kelabu gelap dan teks kepada putih.

Langkah 3: Beralih Antara Mod dengan JavaScript

Kini tiba bahagian di mana kita membuat butang itu sebenarnya melakukan sesuatu. Sedikit JavaScript ini akan menogol kelas .dark-mode pada badan apabila butang diklik.

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

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

    // Save the user's preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

Berikut ialah pecahan:

• Togol Kelas: Apabila butang diklik, kami togol kelas .dark-mode pada badan. Ini menukar gaya antara mod terang dan gelap.
• Menyimpan Keutamaan: Saya menambah sedikit tambahan dengan menyimpan pilihan pengguna dalam localStorage. Ini bermakna jika mereka memilih mod gelap, ia akan kekal begitu walaupun mereka keluar dan kembali ke tapak.

Langkah 4: Memuatkan Keutamaan Pengguna pada Muatan Halaman

Untuk memastikan tapak dimuatkan dalam mod pilihan pengguna, anda perlu menyemak localStorage apabila halaman dimuatkan dan menetapkan mod dengan sewajarnya.

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
    }
});

Jika anda menggunakan React, prosesnya agak serupa, tetapi anda akan mengendalikan perkara dalam komponen anda. Begini cara melakukannya:

1. Sediakan Kelas Negeri dan CSS untuk Mod Gelap:

Gunakan useState React untuk mengurus keadaan mod gelap dan gunakan kelas yang sesuai pada elemen akar anda:

   import React, { useState } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(false);

       const toggleDarkMode = () => {
           setDarkMode(!darkMode);
       };

       return (
           <div className={darkMode ? 'dark-mode' : ''}>
               <button onClick={toggleDarkMode}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               </button>
           </div>
       );
   }

   export default App;

Dalam contoh ini:

• Keadaan darkMode menentukan sama ada mod gelap aktif.
• Fungsi toggleDarkMode menghidupkan dan mematikan mod gelap.

1. CSS untuk Mod Gelap:

Tambahkan kelas .dark-mode pada CSS anda, sama seperti sebelum ini:

   body {
       background-color: white;
       color: black;
       transition: background-color 0.3s, color 0.3s;
   }

   .dark-mode {
       background-color: #121212;
       color: #ffffff;
   }

1. Storan Setempat:

Jika anda mahu pilihan tema berterusan, anda boleh menambah tweak kecil ini:

   import React, { useState, useEffect } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(() => {
           const savedTheme = localStorage.getItem('theme');
           return savedTheme === 'dark';
       });

       useEffect(() => {
           localStorage.setItem('theme', darkMode ? 'dark' : 'light');
       }, [darkMode]);

       return (
           <div className={darkMode ? 'dark-mode' : ''}>
               <button onClick={() => setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               </button>
           </div>
       );
   }

   export default App;

Berikut ialah perkara yang berlaku:

• Keadaan Awal: Keadaan awal darkMode ditetapkan berdasarkan nilai yang disimpan dalam localStorage.
• Cangkok Kesan: Cangkuk useEffect menyimpan pilihan tema semasa apabila mod gelap berubah.

Dan itu sahaja! Ini ialah cara yang lebih mudah untuk menambahkan mod gelap pada apl React anda tanpa merumitkan perkara.

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