Bu pratik Vue projesiyle CSS değişkenleri ve LocalStorage API'si hakkında bilgi edinin.
Web uygulamalarımızda karanlık temaların uygulanması lüks olmaktan çıkıp bir gerekliliğe dönüştü. Cihaz kullanıcıları artık hem estetik tercihlerden hem de pratik nedenlerden dolayı açık temalardan koyu temalara ve tam tersi yönde geçiş yapmak istiyor.
Koyu temalar, kullanıcı arayüzleri için daha koyu bir renk paleti sunarak arayüzün düşük ışıklı ortamlarda gözleri yormasını sağlar. Koyu temalar ayrıca OLED veya AMOLED ekranlı cihazlarda pil ömrünün korunmasına da yardımcı olur.
Bu avantajlar ve daha fazlası, kullanıcılara karanlık temalara geçme seçeneği sunmayı daha makul hale getiriyor.
Test Uygulamasını Kurma
Vue'da karanlık temaların nasıl ekleneceğini daha iyi anlamak için, geliştirmenizi test etmek amacıyla basit bir Vue uygulaması oluşturmanız gerekecektir.
Yeni Vue uygulamasını başlatmak için terminalinizden aşağıdaki komutu çalıştırın:
npm init vue@latest
Bu komut, uygulamanın en son sürümünü yükleyecektir.
yarat-vue paket, yeni Vue uygulamalarını başlatmak için kullanılan paket. Ayrıca sizden belirli bir dizi özellik arasından seçim yapmanızı isteyecektir. Bu eğitimin kapsamı için gerekli olmadığından herhangi birini seçmenize gerek yoktur.Aşağıdaki şablonu ekleyin App.vue başvurunuzun dosyasında kaynak dizin:
<template>
<div>
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>
<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>
<buttonclass="toggle-button">Toggle Dark Modebutton>
div>
template>
Yukarıdaki kod bloğu, uygulamanın tamamını, komut dosyası veya stil blokları olmadan normal HTML'de açıklar. Yukarıdaki şablondaki sınıfları stil oluşturma amacıyla kullanacaksınız. Karanlık temayı uyguladıkça uygulamanın yapısı değişecektir.
Test Uygulamasını CSS Değişkenleriyle Şekillendirme
CSS değişkenleri veya CSS özel özellikleri, stil sayfalarınızda tanımlayabileceğiniz dinamik değerlerdir. CSS değişkenleri, renkler ve yazı tipi boyutları gibi değerleri tek bir yerden tanımlamanıza ve yönetmenize olanak tanıdığından temalandırma için mükemmel araçlar sağlar.
Vue uygulamanıza normal ve karanlık mod teması eklemek için CSS değişkenlerini ve CSS sözde sınıf seçicilerini kullanacaksınız. İçinde kaynak/varlıklar dizin oluşturun stiller.css dosya.
Bu stilleri.css dosyasına aşağıdaki stilleri ekleyin:
/* 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 */
}
Bu bildirimler özel bir sözde sınıf seçici içerir (:kök) ve bir özellik seçici ([veri-teması='doğru']). Kök seçiciye dahil ettiğiniz stiller en yüksek ana öğeyi hedefler. Web sayfası için varsayılan stil görevi görür.
Veri teması seçici, bu özelliğin true olarak ayarlandığı HTML öğelerini hedefler. Bu özellik seçicide, varsayılan açık temayı geçersiz kılmak için karanlık mod temasına yönelik stilleri tanımlayabilirsiniz.
Bu bildirimlerin her ikisi de CSS değişkenlerini şunu kullanarak tanımlar: -- önek. Daha sonra uygulamayı açık ve koyu temalara göre şekillendirmek için kullanabileceğiniz renk değerlerini saklarlar.
Düzenle src/main.js Styles.css dosyasını dosyalayın ve içe aktarın:
// main.js
import'./assets/styles.css'
import { createApp } from'vue'
import App from'./App.vue'
createApp(App).mount('#app')
Şimdi biraz daha stil ekleyin stiller.css, altında veri teması seçici. Bu tanımlardan bazıları renk değişkenlerine referans verecektir. var anahtar kelime. Bu, başlangıçtaki stillerde olduğu gibi, her değişkenin değerini değiştirerek kullanımdaki renkleri değiştirmenize olanak tanır.
* {
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;
}
Evrensel CSS seçiciyi kullanarak tüm öğelere bir geçiş özelliği ayarlayabilirsiniz (*) modları değiştirirken düzgün bir animasyon oluşturmak için:
* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}
Bu geçişler, karanlık mod değiştirildiğinde arka plan renginde ve metin renginde kademeli bir değişiklik oluşturarak hoş bir etki yaratır.
Karanlık Mod Mantığını Uygulamak
Koyu tema modunu uygulamak için açık ve koyu temalar arasında geçiş yapmak üzere JavaScript mantığına ihtiyacınız olacak. senin içinde App.vue dosyasında, aşağıdaki komut dosyası bloğunu, içinde yazılan şablon bloğunun altına yapıştırın. Vue'nun Kompozisyon API'si :
<scriptsetup>
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>
Yukarıdaki komut dosyası, web uygulamanızda açık ve koyu modlar arasında geçiş yapmaya yönelik tüm JavaScript mantığını içerir. Senaryo bir ile başlıyor içe aktarmak Vue'da reaktif verileri (dinamik veriler) işlemek için ref işlevini içe aktarma ifadesi.
Daha sonra, bir tanımlar getInitialDarkMode kullanıcının karanlık mod tercihini alan işlev tarayıcının Yerel depolama. beyan eder karanlıkMod ref, getInitialDarkMode işlevi tarafından alınan kullanıcının tercihiyle başlatılıyor.
saveDarkModePreference işlev, kullanıcının tarayıcının LocalStorage'ındaki karanlık mod tercihini setItem yöntem. Son olarak, Karanlık Modu değiştir işlevi, kullanıcıların karanlık modu değiştirmesine ve karanlık mod için tarayıcının LocalStorage değerini güncellemesine olanak tanıyacak.
Karanlık Mod Temasının Uygulanması ve Uygulamanın Test Edilmesi
Şimdi, şablon bloğunuzda App.vue dosyasında, karanlık mod temasını mantığınıza göre koşullu olarak uygulamak için veri teması öznitelik seçicisini kök öğeye ekleyin:
<template>
<div:data-theme="darkMode">
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>
<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>
<button @click="toggleDarkMode"class="toggle-button">
Toggle Dark Mode
button>
div>
template>
Burada veri teması seçiciyi darkMode ref'e bağlıyorsunuz. Bu, ne zaman karanlıkMod doğruysa karanlık tema etkili olacaktır. Düğmedeki tıklama olayı dinleyicisi, açık ve koyu modlar arasında geçiş yapar.
Uygulamayı önizlemek için terminalinizde aşağıdaki komutu çalıştırın:
npm run dev
Bunun gibi bir ekran görmelisiniz:
Düğmeye tıkladığınızda uygulamanın açık ve koyu temalar arasında geçiş yapması gerekir:
Diğer Paketleri Vue Uygulamalarınıza Entegre Etmeyi Öğrenin
CSS değişkenleri ve LocalStorage API, Vue uygulamanıza karanlık bir tema eklemenizi kolaylaştırır.
Web uygulamalarınızı özelleştirmenize ve ekstra özellikleri kullanmanıza olanak tanıyan birçok üçüncü taraf kitaplığı ve yerleşik Vue ekstraları vardır.