CSS वेरिएबल्स के साथ Vue ऐप्स में डार्क थीम कैसे जोड़ें

हमारे वेब अनुप्रयोगों में डार्क थीम लागू करना एक विलासिता से एक आवश्यकता बन गया है। डिवाइस उपयोगकर्ता अब सौंदर्य संबंधी प्राथमिकताओं और व्यावहारिक कारणों से लाइट थीम से डार्क थीम पर स्विच करना चाहते हैं और इसके विपरीत।

डार्क थीम यूजर इंटरफेस के लिए गहरे रंग का पैलेट प्रदान करती है, जिससे कम रोशनी वाले वातावरण में इंटरफ़ेस आंखों के लिए आसान हो जाता है। डार्क थीम OLED या AMOLED स्क्रीन वाले उपकरणों पर बैटरी जीवन बचाने में भी मदद करती है।

ये फायदे और बहुत कुछ उपयोगकर्ताओं को डार्क थीम पर स्विच करने का विकल्प देना अधिक उचित बनाते हैं।

परीक्षण एप्लिकेशन सेट करना

Vue में डार्क थीम कैसे जोड़ें, इसकी बेहतर समझ पाने के लिए, आपको अपने विकास का परीक्षण करने के लिए एक सरल Vue ऐप बनाना होगा।

नए Vue ऐप को आरंभ करने के लिए, अपने टर्मिनल से निम्नलिखित कमांड चलाएँ:

npm init vue@latest

यह कमांड का नवीनतम संस्करण स्थापित करेगा create-vue पैकेज, नए Vue ऐप्स आरंभ करने के लिए पैकेज। यह आपसे सुविधाओं के एक विशेष सेट में से चुनने के लिए भी कहेगा। आपको किसी का चयन करने की आवश्यकता नहीं है क्योंकि यह इस ट्यूटोरियल के दायरे के लिए आवश्यक नहीं है।

निम्नलिखित टेम्पलेट को इसमें जोड़ें ऐप.व्यू अपने आवेदन में फ़ाइल करें स्रोत निर्देशिका:

<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>

उपरोक्त कोड ब्लॉक बिना किसी स्क्रिप्ट या स्टाइल ब्लॉक के, नियमित HTML में संपूर्ण एप्लिकेशन का वर्णन करता है। आप स्टाइलिंग उद्देश्यों के लिए उपरोक्त टेम्पलेट में कक्षाओं का उपयोग करेंगे। जैसे ही आप डार्क थीम लागू करेंगे, ऐप की संरचना बदल जाएगी।

सीएसएस वेरिएबल्स के साथ टेस्ट एप्लिकेशन को स्टाइल करना

सीएसएस चर, या सीएसएस कस्टम गुण, गतिशील मान हैं जिन्हें आप अपनी स्टाइल शीट में परिभाषित कर सकते हैं। सीएसएस वैरिएबल थीम के लिए उत्कृष्ट टूलिंग प्रदान करते हैं क्योंकि वे आपको एक ही स्थान पर रंग और फ़ॉन्ट आकार जैसे मूल्यों को परिभाषित और प्रबंधित करने की अनुमति देते हैं।

आप अपने Vue एप्लिकेशन के लिए एक नियमित और एक डार्क मोड थीम जोड़ने के लिए CSS वेरिएबल्स और CSS छद्म-वर्ग चयनकर्ताओं का उपयोग करेंगे। में स्रोत/संपत्ति निर्देशिका, एक बनाएँ शैलियाँ.सीएसएस फ़ाइल।

इस style.css फ़ाइल में निम्नलिखित शैलियाँ जोड़ें:

/* 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 */
}

इन घोषणाओं में एक विशेष छद्म-वर्ग चयनकर्ता शामिल है (:जड़) और एक विशेषता चयनकर्ता ([डेटा-थीम='सही']). रूट चयनकर्ता में आपके द्वारा शामिल की गई शैलियाँ उच्चतम मूल तत्व को लक्षित करती हैं। यह वेब पेज के लिए डिफ़ॉल्ट स्टाइलिंग के रूप में कार्य करता है।

डेटा-थीम चयनकर्ता उस विशेषता को सत्य पर सेट करके HTML तत्वों को लक्षित करता है। इस विशेषता चयनकर्ता में, आप डिफ़ॉल्ट लाइट थीम को ओवरराइड करने के लिए, डार्क मोड थीम के लिए शैलियों को परिभाषित कर सकते हैं।

ये घोषणाएँ दोनों CSS वेरिएबल्स का उपयोग करके परिभाषित करती हैं -- उपसर्ग. वे रंग मान संग्रहीत करते हैं जिनका उपयोग आप हल्के और गहरे विषयों के लिए एप्लिकेशन को स्टाइल करने के लिए कर सकते हैं।

संपादित करें src/main.js style.css फ़ाइल फ़ाइल करें और आयात करें:

// main.js
import'./assets/styles.css'
import { createApp } from'vue'
import App from'./App.vue'
createApp(App).mount('#app')

अब इसमें कुछ और शैलियाँ जोड़ें शैलियाँ.सीएसएस, नीचे डेटा-विषय चयनकर्ता. इनमें से कुछ परिभाषाएँ रंग चर का संदर्भ देंगी वर कीवर्ड. यह आपको प्रारंभिक शैलियों की तरह, प्रत्येक चर के मान को स्विच करके उपयोग में आने वाले रंगों को बदलने की सुविधा देता है।

* {
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;
}

आप यूनिवर्सल सीएसएस चयनकर्ता का उपयोग करके सभी तत्वों पर एक संक्रमण गुण सेट कर सकते हैं (*) मोड स्विच करते समय एक सहज एनीमेशन बनाने के लिए:

* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}

डार्क मोड चालू होने पर ये बदलाव पृष्ठभूमि रंग और टेक्स्ट रंग में धीरे-धीरे बदलाव लाते हैं, जो एक सुखद प्रभाव देता है।

डार्क मोड लॉजिक को लागू करना

डार्क थीम मोड को लागू करने के लिए, आपको लाइट और डार्क थीम के बीच स्विच करने के लिए जावास्क्रिप्ट लॉजिक की आवश्यकता होगी। आपके में ऐप.व्यू फ़ाइल, निम्नलिखित स्क्रिप्ट ब्लॉक को लिखे गए टेम्पलेट ब्लॉक के नीचे चिपकाएँ Vue की संरचना एपीआई :

<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>

उपरोक्त स्क्रिप्ट में आपके वेब ऐप में प्रकाश और अंधेरे मोड के बीच स्विच करने के लिए सभी जावास्क्रिप्ट तर्क शामिल हैं। स्क्रिप्ट की शुरुआत एक से होती है आयात Vue में प्रतिक्रियाशील डेटा (गतिशील डेटा) को संभालने के लिए रेफरी फ़ंक्शन आयात करने के लिए कथन।

इसके बाद, यह एक को परिभाषित करता है आरंभिकडार्कमोड प्राप्त करें फ़ंक्शन जो उपयोगकर्ता की डार्क मोड प्राथमिकता को पुनः प्राप्त करता है ब्राउज़र का स्थानीय भंडारण. यह घोषित करता है डार्कमोड रेफरी, इसे getInitialDarkMode फ़ंक्शन द्वारा पुनर्प्राप्त उपयोगकर्ता की प्राथमिकता के साथ प्रारंभ करना।

saveDarkModePreference फ़ंक्शन ब्राउज़र के लोकलस्टोरेज में उपयोगकर्ता की डार्क मोड प्राथमिकता को अपडेट करता है सेटआइटम तरीका। अंततः डार्कमोड टॉगल करें फ़ंक्शन उपयोगकर्ताओं को डार्क मोड को टॉगल करने और डार्क मोड के लिए ब्राउज़र के लोकलस्टोरेज मान को अपडेट करने देगा।

डार्क मोड थीम लागू करना और एप्लिकेशन का परीक्षण करना

अब, आपके टेम्पलेट ब्लॉक में ऐप.व्यू फ़ाइल, अपने तर्क के आधार पर डार्क मोड थीम को सशर्त रूप से लागू करने के लिए रूट तत्व में डेटा-थीम विशेषता चयनकर्ता जोड़ें:

<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>

यहां, आप डेटा-थीम चयनकर्ता को डार्कमोड रेफरी से बांध रहे हैं। इससे यह सुनिश्चित होता है कि कब डार्कमोड सच है, डार्क थीम प्रभावी होगी। बटन पर क्लिक इवेंट श्रोता प्रकाश और अंधेरे मोड के बीच टॉगल करता है।

एप्लिकेशन का पूर्वावलोकन करने के लिए अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:

npm run dev

आपको इस तरह की एक स्क्रीन देखनी चाहिए:

जब आप बटन पर क्लिक करते हैं, तो ऐप को प्रकाश और अंधेरे थीम के बीच टॉगल करना चाहिए:

अपने Vue अनुप्रयोगों में अन्य पैकेजों को एकीकृत करना सीखें

CSS वेरिएबल और लोकलस्टोरेज API आपके Vue ऐप में एक डार्क थीम जोड़ना आसान बनाते हैं।

कई तृतीय-पक्ष लाइब्रेरी और अंतर्निहित Vue एक्स्ट्रा हैं जो आपको अपने वेब ऐप्स को अनुकूलित करने और अतिरिक्त सुविधाओं का उपयोग करने देते हैं।