Home-theater-designers
Menerapkan tema gelap di aplikasi web kita telah berubah dari sebuah kemewahan menjadi sebuah kebutuhan. Pengguna perangkat kini ingin beralih dari tema terang ke tema gelap dan sebaliknya karena preferensi estetika dan alasan praktis.
Video MUO hari ini GULIR UNTUK MELANJUTKAN ISI
Tema gelap menawarkan palet warna yang lebih gelap untuk antarmuka pengguna, membuat antarmuka mudah dilihat di lingkungan dengan cahaya redup. Tema gelap juga membantu menghemat masa pakai baterai pada perangkat dengan layar OLED atau AMOLED.
Keunggulan ini dan kelebihan lainnya membuatnya lebih masuk akal untuk memberi pengguna pilihan untuk beralih ke tema gelap.
Menyiapkan Aplikasi Tes
Untuk mendapatkan pemahaman yang lebih baik tentang cara menambahkan tema gelap di Vue, Anda perlu membuat aplikasi Vue sederhana untuk menguji coba pengembangan Anda.
Untuk menginisialisasi aplikasi Vue baru, jalankan perintah berikut dari terminal Anda:
npm init vue@latest
Perintah ini akan menginstal versi terbaru buat-vue paket, paket untuk menginisialisasi aplikasi Vue baru. Ini juga akan meminta Anda untuk memilih dari serangkaian fitur tertentu. Anda tidak perlu memilih apa pun karena itu tidak diperlukan dalam cakupan tutorial ini.
Tambahkan templat berikut ke app.vue file di aplikasi Anda src direktori:
<!-- App.vue -->
<template>
<div>
<h1 class="header">Welcome to My Vue App</h1>
<p>This is a simple Vue app with some text and styles.</p>
<div class="styled-box">
<p class="styled-text">Styled Text</p>
</div>
<button class="toggle-button">Toggle Dark Mode</button>
</div>
</template>
Blok kode di atas menjelaskan keseluruhan aplikasi dalam HTML biasa, tanpa blok skrip atau gaya. Anda akan menggunakan kelas dalam template di atas untuk tujuan penataan gaya. Saat Anda menerapkan tema gelap, struktur aplikasi akan berubah.
Menata Aplikasi Pengujian Dengan Variabel CSS
Variabel CSS, atau properti khusus CSS , adalah nilai dinamis yang dapat Anda tentukan di style sheet Anda. Variabel CSS menyediakan alat yang sangat baik untuk pembuatan tema karena memungkinkan Anda menentukan dan mengelola nilai seperti warna dan ukuran font di satu tempat.
Anda akan menggunakan variabel CSS dan pemilih kelas semu CSS untuk menambahkan tema mode reguler dan mode gelap untuk aplikasi Vue Anda. Dalam src/aset direktori, buat a gaya.css mengajukan.
Tambahkan gaya berikut ke file style.css ini:
/* styles.css */
:root {
--background-color: #ffffff; /* White */
--text-color: #333333; /* Dark Gray */
--box-background: #007bff; /* Royal Blue */
--box-text-color: #ffffff; /* White */
--toggle-button: #007bff; /* Royal Blue */
}
[data-theme='true'] {
--background-color: #333333; /* Dark Gray */
--text-color: #ffffff; /* White */
--box-background: #000000; /* Black */
--box-text-color: #ffffff; /* White */
--toggle-button: #000000; /* Black */
}
Deklarasi ini berisi pemilih kelas semu khusus ( :akar ) dan pemilih atribut ( [ data-tema='benar'] ). Gaya yang Anda sertakan dalam pemilih akar menargetkan elemen induk tertinggi. Ini bertindak sebagai gaya default untuk halaman web.
Pemilih tema data menargetkan elemen HTML dengan atribut yang disetel ke true. Di pemilih atribut ini, Anda kemudian dapat menentukan gaya untuk tema mode gelap, untuk menggantikan tema terang default.
Deklarasi ini mendefinisikan variabel CSS menggunakan -- awalan. Mereka menyimpan nilai warna yang kemudian dapat Anda gunakan untuk menata aplikasi untuk tema terang dan gelap.
Sunting itu src/main.js file dan impor file style.css:
// main.js
import './assets/styles.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Sekarang tambahkan beberapa gaya lagi gaya.css , dibawah tema data pemilih. Beberapa definisi ini akan mereferensikan variabel warna menggunakan dulu kata kunci. Ini memungkinkan Anda mengubah warna yang digunakan hanya dengan mengganti nilai setiap variabel, seperti yang dilakukan gaya awal.
* {
background-color: var(--background-color);
text-align: center;
color: var(--text-color);
padding: 20px;
font-family: Arial, sans-serif;
transition: background-color 0.3s, color 0.3s;
}
.header {
font-size: 24px;
margin-bottom: 20px;
}
.styled-box {
background-color: var(--box-background);
color: var(--box-text-color);
padding: 10px;
border-radius: 5px;
margin: 20px 0;
}
.styled-text {
font-size: 18px;
font-weight: bold;
}
.toggle-button {
background-color: var(--toggle-button);
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
padding: 5px 10px;
}
Anda dapat menyetel properti transisi pada semua elemen menggunakan pemilih CSS universal ( * ) untuk membuat animasi yang halus saat berpindah mode:
* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}
Transisi ini menciptakan perubahan bertahap pada warna latar belakang dan warna teks saat mode gelap diaktifkan, sehingga memberikan efek yang menyenangkan.
Menerapkan Logika Mode Gelap
Untuk menerapkan mode tema gelap, Anda memerlukan logika JavaScript untuk beralih antara tema terang dan gelap. Di dalam kamu app.vue file, tempelkan blok skrip berikut di bawah blok templat yang ditulis API Komposisi Vue :
<!-- App.vue -->
<script setup>
import { ref } from 'vue';
// Function to get the initial dark mode preference from local storage
const getInitialDarkMode = () => {
const userPreference = localStorage.getItem('darkMode');
return userPreference === 'true' ? true : false;
};
// Define the ref for darkMode and initialize it with the user preference
// or false
const darkMode = ref(getInitialDarkMode());
// Function to save the dark mode preference to local storage
const saveDarkModePreference = (isDarkMode) => {
localStorage.setItem('darkMode', isDarkMode);
};
// Function to toggle dark mode and update the local storage preference
const toggleDarkMode = () => {
darkMode.value = !darkMode.value;
saveDarkModePreference(darkMode.value);
};
</script>
Skrip di atas mencakup semua logika JavaScript untuk beralih antara mode terang dan gelap di aplikasi web Anda. Naskahnya dimulai dengan sebuah impor pernyataan untuk mengimpor fungsi ref untuk menangani data reaktif (data dinamis) di Vue.
Selanjutnya, ini mendefinisikan a dapatkanInitialDarkMode fungsi yang mengambil preferensi mode gelap pengguna browser Penyimpanan lokal . Ini menyatakan Mode gelap ref, menginisialisasinya dengan preferensi pengguna yang diambil oleh fungsi getInitialDarkMode.
Itu simpanDarkModePreference fungsi memperbarui preferensi mode gelap pengguna di Penyimpanan Lokal browser dengan setItem metode. Akhirnya, itu beralihMode Gelap Fungsi ini akan memungkinkan pengguna mengaktifkan mode gelap dan memperbarui nilai Penyimpanan Lokal browser untuk mode gelap.
cara termudah untuk membuat diagram alur
Menerapkan Tema Mode Gelap dan Menguji Aplikasi
Sekarang, di blok template Anda app.vue file, tambahkan pemilih atribut tema data ke elemen root untuk menerapkan tema mode gelap secara kondisional berdasarkan logika Anda:
<!-- App.vue -->
<template>
<!-- added the data theme attribute selector to apply the dark theme
conditionally -->
<div :data-theme="darkMode">
<h1 class="header">Welcome to My Vue App</h1>
<p>This is a simple Vue app with some text and styles.</p>
<div class="styled-box">
<p class="styled-text">Styled Text</p>
</div>
<!--added the dark mode switch button-->
<button @click="toggleDarkMode" class="toggle-button">
Toggle Dark Mode
</button>
</div>
</template>
Di sini, Anda mengikat pemilih tema data ke referensi darkMode. Hal ini memastikan bahwa kapan Mode gelap benar, tema gelap akan berlaku. Pemroses peristiwa klik pada tombol beralih antara mode terang dan gelap.
Jalankan perintah berikut di terminal Anda untuk melihat pratinjau aplikasi:
npm run dev
Anda akan melihat layar seperti ini:
Saat Anda mengeklik tombol, aplikasi akan beralih antara tema terang dan gelap:
Belajar Mengintegrasikan Paket Lain di Aplikasi Vue Anda
Variabel CSS dan API LocalStorage memudahkan penambahan tema gelap ke aplikasi Vue Anda.
Ada banyak perpustakaan pihak ketiga dan tambahan Vue bawaan yang memungkinkan Anda menyesuaikan aplikasi web dan menggunakan fitur tambahan.