সিএসএস ভেরিয়েবল সহ ভিউ অ্যাপে কীভাবে ডার্ক থিম যুক্ত করবেন

আপনার মত পাঠকরা MUO সমর্থন করতে সাহায্য করে। আপনি যখন আমাদের সাইটে লিঙ্ক ব্যবহার করে একটি ক্রয় করেন, আমরা একটি অনুমোদিত কমিশন উপার্জন করতে পারি। আরও পড়ুন

আমাদের ওয়েব অ্যাপ্লিকেশনগুলিতে অন্ধকার থিমগুলি প্রয়োগ করা একটি বিলাসিতা থেকে একটি প্রয়োজনীয়তায় চলে গেছে। ডিভাইস ব্যবহারকারীরা এখন হালকা থিম থেকে গাঢ় থিমে এবং এর বিপরীতে নান্দনিক পছন্দ এবং ব্যবহারিক কারণে স্যুইচ করতে চায়।

দিনের MUO ভিডিও কন্টেন্টের সাথে চালিয়ে যেতে স্ক্রোল করুন

ডার্ক থিমগুলি ব্যবহারকারী ইন্টারফেসের জন্য একটি গাঢ় রঙের প্যালেট অফার করে, যা কম আলোর পরিবেশে চোখের উপর ইন্টারফেসটিকে সহজ করে তোলে। ডার্ক থিমগুলিও OLED বা AMOLED স্ক্রিন সহ ডিভাইসগুলিতে ব্যাটারি লাইফ সংরক্ষণ করতে সহায়তা করে৷

---

---

এই সুবিধাগুলি এবং আরও অনেক কিছু ব্যবহারকারীদের গাঢ় থিমগুলিতে পরিবর্তন করার পছন্দ দেওয়ার জন্য আরও যুক্তিসঙ্গত করে তোলে।

টেস্ট অ্যাপ্লিকেশন সেট আপ করা হচ্ছে

Vue-তে কীভাবে অন্ধকার থিমগুলি যোগ করতে হয় সে সম্পর্কে আরও ভালভাবে বোঝার জন্য, আপনার বিকাশ পরীক্ষা করার জন্য আপনাকে একটি সাধারণ Vue অ্যাপ তৈরি করতে হবে।

নতুন Vue অ্যাপ চালু করতে, আপনার টার্মিনাল থেকে নিম্নলিখিত কমান্ডটি চালান:

 npm init vue@latest 

এই কমান্ডটি এর সর্বশেষ সংস্করণটি ইনস্টল করবে সৃষ্টি-ভিউ প্যাকেজ, নতুন Vue অ্যাপ শুরু করার জন্য প্যাকেজ। এটি আপনাকে বৈশিষ্ট্যগুলির একটি নির্দিষ্ট সেট থেকে চয়ন করতে বলবে৷ এই টিউটোরিয়ালের পরিধির জন্য এটি প্রয়োজনীয় নয় বলে আপনাকে কোনো নির্বাচন করতে হবে না।

নিম্নলিখিত টেমপ্লেট যোগ করুন app.vue আপনার অ্যাপ্লিকেশনের মধ্যে ফাইল src ডিরেক্টরি:

---

---

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

উপরের কোড ব্লক কোন স্ক্রিপ্ট বা শৈলী ব্লক ছাড়াই নিয়মিত HTML-এ পুরো অ্যাপ্লিকেশনটিকে বর্ণনা করে। আপনি স্টাইলিং উদ্দেশ্যে উপরের টেমপ্লেটের ক্লাসগুলি ব্যবহার করবেন। আপনি অন্ধকার থিম প্রয়োগ করার সাথে সাথে অ্যাপের কাঠামো পরিবর্তন হবে।

সিএসএস ভেরিয়েবল দিয়ে টেস্ট অ্যাপ্লিকেশন স্টাইল করা

CSS ভেরিয়েবল, বা CSS কাস্টম বৈশিষ্ট্য , গতিশীল মান যা আপনি আপনার স্টাইল শীটে সংজ্ঞায়িত করতে পারেন। CSS ভেরিয়েবল থিমিংয়ের জন্য চমৎকার টুলিং প্রদান করে কারণ তারা আপনাকে এক জায়গায় রঙ এবং ফন্টের আকারের মতো মান নির্ধারণ এবং পরিচালনা করতে দেয়।

---

---

আপনার Vue অ্যাপ্লিকেশনের জন্য একটি নিয়মিত এবং একটি অন্ধকার মোড থিম যোগ করতে আপনি CSS ভেরিয়েবল এবং CSS ছদ্ম-শ্রেণী নির্বাচক ব্যবহার করবেন। মধ্যে src/সম্পদ ডিরেক্টরি, একটি তৈরি করুন styles.css ফাইল

নির্বাচিত ডিস্কটি gpt পার্টিশন স্টাইলের

এই styles.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 */ 
} 

এই ঘোষণাগুলিতে একটি বিশেষ ছদ্ম-শ্রেণী নির্বাচক রয়েছে ( :মূল ) এবং একটি বৈশিষ্ট্য নির্বাচক ( [ ডেটা-থিম = 'সত্য'] ) রুট নির্বাচকের মধ্যে আপনি যে শৈলীগুলি অন্তর্ভুক্ত করেন তা সর্বোচ্চ মূল উপাদানকে লক্ষ্য করে। এটি ওয়েব পৃষ্ঠার জন্য ডিফল্ট স্টাইলিং হিসাবে কাজ করে।

ডেটা-থিম নির্বাচক এইচটিএমএল উপাদানগুলিকে লক্ষ্য করে যে বৈশিষ্ট্যটি সত্যে সেট করে৷ এই অ্যাট্রিবিউট সিলেক্টরে, আপনি ডিফল্ট লাইট থিমকে ওভাররাইড করতে ডার্ক মোড থিমের জন্য শৈলী নির্ধারণ করতে পারেন।

এই ঘোষণাগুলি উভয়ই ব্যবহার করে CSS ভেরিয়েবলকে সংজ্ঞায়িত করে -- উপসর্গ তারা রঙের মান সঞ্চয় করে যা আপনি হালকা এবং অন্ধকার থিমের জন্য অ্যাপ্লিকেশন স্টাইল করতে ব্যবহার করতে পারেন।

সম্পাদনা করুন src/main.js ফাইল করুন এবং styles.css ফাইল আমদানি করুন:

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

এখন আরো কিছু শৈলী যোগ করুন styles.css , নিচে ডেটা-থিম নির্বাচক এই সংজ্ঞাগুলির মধ্যে কয়েকটি ব্যবহার করে রঙের ভেরিয়েবলের উল্লেখ করবে ছিল কীওয়ার্ড এটি আপনাকে প্রতিটি ভেরিয়েবলের মান পরিবর্তন করে ব্যবহার করা রং পরিবর্তন করতে দেয়, যেমন প্রাথমিক শৈলী করে।

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

আপনি সর্বজনীন CSS নির্বাচক ( * ) মোড স্যুইচ করার সময় একটি মসৃণ অ্যানিমেশন তৈরি করতে:

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

এই রূপান্তরগুলি পটভূমির রঙ এবং পাঠ্যের রঙে ধীরে ধীরে পরিবর্তন ঘটায় যখন অন্ধকার মোড টগল করা হয়, একটি আনন্দদায়ক প্রভাব দেয়।

ডার্ক মোড লজিক বাস্তবায়ন করা

অন্ধকার থিম মোড বাস্তবায়ন করতে, হালকা এবং অন্ধকার থিমের মধ্যে স্যুইচ করতে আপনার জাভাস্ক্রিপ্ট যুক্তির প্রয়োজন হবে। আপনার মধ্যে app.vue ফাইলে লেখা টেমপ্লেট ব্লকের নিচে নিচের স্ক্রিপ্ট ব্লকটি পেস্ট করুন Vue এর রচনা API :

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

উপরের স্ক্রিপ্টে আপনার ওয়েব অ্যাপে আলো এবং অন্ধকার মোডের মধ্যে স্যুইচ করার জন্য সমস্ত জাভাস্ক্রিপ্ট যুক্তি অন্তর্ভুক্ত রয়েছে। স্ক্রিপ্ট একটি দিয়ে শুরু হয় আমদানি Vue-তে প্রতিক্রিয়াশীল ডেটা (ডাইনামিক ডেটা) পরিচালনার জন্য রেফ ফাংশন আমদানি করার বিবৃতি।

পরবর্তী, এটি একটি সংজ্ঞায়িত করে GetInitialDarkMode ফাংশন যা ব্যবহারকারীর ডার্ক মোড পছন্দ পুনরুদ্ধার করে ব্রাউজার এর লোকাল স্টোরেজ . এটা ঘোষণা করে অন্ধকার মোড ref, getInitialDarkMode ফাংশন দ্বারা পুনরুদ্ধার করা ব্যবহারকারীর পছন্দের সাথে এটি আরম্ভ করা।

কীভাবে বিটা আইওএস থেকে মুক্তি পাবেন

দ্য ডার্কমোড পছন্দ সংরক্ষণ করুন ফাংশন ব্রাউজারের লোকালস্টোরেজে ব্যবহারকারীর ডার্ক মোড পছন্দ আপডেট করে সেট আইটেম পদ্ধতি অবশেষে, দ টগল ডার্কমোড ফাংশন ব্যবহারকারীদের ডার্ক মোড টগল করতে এবং ডার্ক মোডের জন্য ব্রাউজারের লোকালস্টোরেজ মান আপডেট করতে দেয়।

ডার্ক মোড থিম প্রয়োগ করা এবং অ্যাপ্লিকেশন পরীক্ষা করা

এখন, আপনার টেমপ্লেট ব্লকে app.vue ফাইল, আপনার যুক্তির উপর ভিত্তি করে ডার্ক মোড থিমটি শর্তসাপেক্ষে প্রয়োগ করতে রুট এলিমেন্টে ডেটা-থিম অ্যাট্রিবিউট নির্বাচক যোগ করুন:

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

এখানে, আপনি ডাটা-থিম নির্বাচককে ডার্কমোড রেফের সাথে আবদ্ধ করছেন। এই নিশ্চিত করে যে যখন অন্ধকার মোড সত্য, অন্ধকার থিম কার্যকর হবে। বোতামে ক্লিক ইভেন্ট লিসেনার হালকা এবং অন্ধকার মোডের মধ্যে টগল করে।

অ্যাপ্লিকেশনটির পূর্বরূপ দেখতে আপনার টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

 npm run dev 

আপনি এই মত একটি পর্দা দেখতে হবে:

আপনি যখন বোতামটি ক্লিক করেন, অ্যাপটি হালকা এবং অন্ধকার থিমের মধ্যে টগল করা উচিত:

আপনার Vue অ্যাপ্লিকেশনগুলিতে অন্যান্য প্যাকেজগুলিকে সংহত করতে শিখুন৷

CSS ভেরিয়েবল এবং LocalStorage API আপনার Vue অ্যাপে একটি অন্ধকার থিম যোগ করা সহজ করে তোলে।

অনেক থার্ড-পার্টি লাইব্রেরি এবং অন্তর্নির্মিত Vue অতিরিক্ত রয়েছে যা আপনাকে আপনার ওয়েব অ্যাপগুলি কাস্টমাইজ করতে এবং অতিরিক্ত বৈশিষ্ট্যগুলি ব্যবহার করতে দেয়।