Rumah > Artikel > hujung hadapan web > Cara Melaksanakan Tema Gelap/Terang dalam Apl Web Anda

Cara Melaksanakan Tema Gelap/Terang dalam Apl Web Anda

王林asal: 2024-07-19 14:22:08902semak imbas

Pernahkah anda bertukar-tukar antara tema gelap dan terang pada tapak web dan berfikir, "Saya harap tapak saya boleh melakukannya"? Nah, sekarang boleh. Dalam artikel ini, saya akan menunjukkan kepada anda cara melaksanakan mod gelap dan terang dalam projek web anda menggunakan HTML, CSS dan JavaScript, memberikan pengguna anda pengalaman visual yang terbaik.

Prasyarat: Pemahaman asas HTML dan CSS diperlukan untuk memahami tutorial ini.

Pelaksanaan tema gelap/cerah

Komponen utama untuk menyediakan mod gelap/mod terang pada tapak web ialah:

Halaman web
Butang untuk bertukar antara tema
Tema atau warna yang hendak ditukar
Logik di sebalik menukar tema dan teks butang.

Halaman Web

Sediakan projek anda

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Tour App</title>
</head>
<body>
    <div class="hero-sec">
        <div class="col1">
            <h1>Everyday Is a Journey</h1>
            <p>Visit any Location Virtually, Anytime, Anywhere</p>
            <button>Tour</button>
        </div>
        <div class="col2">
            <img src="img.jpg" alt="landscape" width="560px">
        </div>
    </div>
</body>

</html>

Output halaman web biasa

Web app theming image

Butang Togol

Adalah penting untuk menambah butang togol tema. Ini ialah butang yang mencetuskan perubahan warna daripada mod terang kepada mod gelap dan sebaliknya.

    <button id="toggle-button">Dark mode</button>

How to Implement Dark/Light Themes in Your Web Apps

Tema mod terang/gelap

Ini adalah langkah penting kerana dua tema atau warna terlibat di sini. Kami memerlukan cara untuk melampirkan gaya yang berbeza pada halaman web dengan beberapa baris kod. Kami akan menggunakan pembolehubah CSS untuk tema. Sila baca artikel saya tentang Pembolehubah CSS jika ia kedengaran baru kepada anda .

Langkah 1:
Nyatakan gaya untuk tema ringan

:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme

Langkah 2:
Isytiharkan kelas untuk tema gelap

.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
// This is the class that will be added onclick of the button

Nota: Nama pembolehubah mestilah sama.

Ini boleh dilakukan tanpa pembolehubah dengan hanya menggunakan elemen badan. Walau bagaimanapun, adalah lebih baik untuk menggunakan pembolehubah CSS kerana banyak keadaan memerlukan lebih daripada warna latar belakang untuk ditukar. Sesetengah tema apl web memerlukan perubahan warna teks, warna jidar, bayang-bayang, dsb. Jadi menggunakan pembolehubah membenarkan kawalan penuh ke atas semua elemen, terutamanya dalam aplikasi besar.

Mari kita lengkapkan penggayaan halaman web kami. Pastikan CSS anda dipautkan ke fail HTML.

:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
body{
    background: var(--bg);
    color: var(--color);
    font-family: monospace
}
.hero-sec{
    display: flex;
    justify-content: space-evenly;
    color: var(--color);
    margin-top: 48px;
}
.col1{
    margin-top: 6rem;
    height: 40%;
}
h1{
    font-size: 2.5rem;
}
p{
    font-size: 1.3rem;
}
button{
    padding: 1rem 2rem;
    background-color: #3f51b5;
    color: #ffffff;
    border: none;
    cursor: pointer;
}
.hero-sec button{
    font-size: 1.3rem;
}

Output

How to Implement Dark/Light Themes in Your Web Apps

Logik di sebalik menukar tema

Apabila pengguna mengklik butang togol, kami menjangkakan dua perkara akan berlaku.

Tema atau mod warna tapak web harus berubah.
Teks pada butang sepatutnya berubah.

Untuk Menukar tema
Manipulasi DOM (Model Objek Dokumen) untuk mendapatkan butang dan badan halaman web.
Isytihar fungsi untuk menambah kelas "gelap" pada elemen badan (yang telah kami isytiharkan dalam css).
Panggil fungsi sebaik sahaja pengguna mengklik butang mod gelap/terang. Pastikan JS anda dipautkan ke HTML anda.

const toggleBtn = document.getElementById("toggle-button")
const body = document.body

function toggleTheme() {
    body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);

Untuk menukar teks
Tambahkan satu lagi blok kod pada fungsi toggleTheme. Kod ini hanya bermaksud Jika badan mengandungi kelas "gelap", togol teks kepada "Mod cahaya" dan sebaliknya.

if (body.classList.contains("dark")) {
        toggleBtn.textContent = "Light Mode";
    } else {
        toggleBtn.textContent = "Dark Mode";
    }

Ini boleh dilakukan dalam satu baris untuk kod yang lebih bersih.

 toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"

Ya, Anda boleh menukar tema sekarang. Sejuk Betul? Semak video yang dilampirkan untuk demo penuh.

dark mode website

Kesimpulannya

Dengan mengikut langkah yang digariskan dalam tutorial ini, anda boleh memberikan pengguna anda kelonggaran untuk memilih tema pilihan mereka, menjadikan apl web anda lebih menarik dan boleh diakses.
Jika anda menikmati artikel saya, anda boleh Beli Saya Kopi untuk Menyokong Kerja saya

Baca artikel saya yang lain tentang Apl Web Progresif, kerja paling dalam web, Pembolehubah CSS, panduan Pemula untuk pembangun bahagian hadapan dan banyak lagi.

Sila Suka, Komen dan Ikuti untuk lebih banyak artikel pembangun web dan berkaitan teknologi. Selamat Mengekod!!!

Atas ialah kandungan terperinci Cara Melaksanakan Tema Gelap/Terang dalam Apl Web Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html Object if switch for require using class JS function dom this border background web app

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mencegah Serangan Rantaian Bekalan dalam JavaScriptArtikel seterusnya：Mencegah Serangan Rantaian Bekalan dalam JavaScript

Artikel berkaitan

Lihat lagi