نحوه اضافه کردن تم های تیره به برنامه های Vue با متغیرهای CSS

با این پروژه کاربردی Vue در مورد متغیرهای CSS و LocalStorage API بیاموزید.

پیاده سازی تم های تیره در برنامه های کاربردی وب ما از یک امر لوکس به یک ضرورت تبدیل شده است. کاربران دستگاه اکنون به دلیل ترجیحات زیبایی شناختی و دلایل عملی می خواهند از تم های روشن به تم های تیره و بالعکس تغییر رنگ دهند.

تم‌های تیره، پالت رنگ تیره‌تری را برای رابط‌های کاربری ارائه می‌دهند، که این رابط را در محیط‌های کم نور برای چشم‌ها آسان می‌کند. تم های تیره همچنین به حفظ عمر باتری دستگاه های دارای صفحه نمایش OLED یا AMOLED کمک می کنند.

این مزایا و موارد دیگر باعث می‌شود که کاربران بتوانند به تم‌های تیره انتخاب کنند.

راه اندازی برنامه آزمایشی

برای درک بهتر نحوه اضافه کردن تم های تیره در Vue، باید یک برنامه ساده Vue ایجاد کنید تا برنامه توسعه خود را آزمایش کند.

برای مقداردهی اولیه برنامه جدید Vue، دستور زیر را از ترمینال خود اجرا کنید:

npm init vue@latest

این دستور آخرین نسخه بسته create-vue را نصب می کند، بسته ای که برای مقداردهی اولیه برنامه های جدید 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 مقادیر پویایی هستند که می توانید در شیوه نامه خود تعریف کنید. متغیرهای CSS ابزار بسیار خوبی برای قالب بندی ارائه می دهند زیرا به شما امکان می دهند مقادیری مانند رنگ ها و اندازه فونت ها را در یک مکان تعریف و مدیریت کنید.

شما از متغیرهای CSS و انتخابگرهای شبه کلاس CSS برای اضافه کردن یک تم معمولی و حالت تاریک برای برنامه Vue خود استفاده خواهید کرد. در فهرست src/assets، یک فایل styles.css ایجاد کنید.

استایل های زیر را به این فایل 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 */
}

این اعلان ها حاوی یک انتخابگر شبه کلاس ویژه (:root) و یک انتخابگر ویژگی ([data-theme=’true’]) هستند. سبک هایی که در یک انتخابگر ریشه قرار می دهید بالاترین عنصر والد را هدف قرار می دهند. به عنوان یک ظاهر طراحی پیش فرض برای صفحه وب عمل می کند.

انتخابگر تم داده، عناصر HTML را با آن ویژگی که روی true تنظیم شده است، هدف قرار می دهد. در این انتخابگر ویژگی، سپس می‌توانید سبک‌هایی را برای تم حالت تاریک تعریف کنید تا تم روشن پیش‌فرض را لغو کنید.

این اعلان ها هر دو متغیرهای 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، در زیر انتخابگر تم داده اضافه کنید. برخی از این تعاریف با استفاده از کلمه کلیدی var به متغیرهای رنگ اشاره می کنند. این به شما امکان می دهد رنگ های مورد استفاده را به سادگی با تغییر مقدار هر متغیر تغییر دهید، همانطور که سبک های اولیه انجام می دهند.

* {
    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’s Composition 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>

اسکریپت بالا شامل تمام منطق جاوا اسکریپت برای جابجایی بین حالت روشن و تاریک در برنامه وب شما است. اسکریپت با یک دستور import برای وارد کردن تابع ref برای مدیریت داده های واکنشی (داده های پویا) در Vue شروع می شود.

سپس یک تابع getInitialDarkMode تعریف می‌کند که تنظیمات حالت تاریک کاربر را از LocalStorage مرورگر بازیابی می‌کند. این ref darkMode را اعلام می‌کند و آن را با اولویت کاربر بازیابی شده توسط تابع getInitialDarkMode مقداردهی اولیه می‌کند.

تابع saveDarkModePreference تنظیمات حالت تاریک کاربر را در LocalStorage مرورگر با روش setItem به روز می کند. در نهایت، عملکرد toggleDarkMode به کاربران اجازه می دهد تا حالت تاریک را تغییر دهند و مقدار LocalStorage مرورگر را برای حالت تاریک به روز کنند.

اعمال تم حالت تاریک و آزمایش برنامه

اکنون، در بلوک قالب فایل App.vue خود، انتخابگر ویژگی data-theme را به عنصر ریشه اضافه کنید تا تم حالت تاریک را بر اساس منطق خود به صورت شرطی اعمال کنید:

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

در اینجا، انتخابگر تم داده را به مرجع darkMode متصل می‌کنید. این تضمین می‌کند که وقتی darkMode درست است، تم تیره اعمال می‌شود. شنونده رویداد کلیک روی دکمه بین حالت روشن و تاریک جابجا می شود.

برای پیش نمایش برنامه، دستور زیر را در ترمینال خود اجرا کنید:

npm run dev

شما باید صفحه ای مانند این را ببینید:

وقتی روی دکمه کلیک می‌کنید، برنامه باید بین تم‌های روشن و تاریک جابجا شود:

یاد بگیرید که بسته های دیگر را در برنامه های Vue خود ادغام کنید

متغیرهای CSS و LocalStorage API اضافه کردن یک تم تیره به برنامه Vue را آسان می کند.

بسیاری از کتابخانه های شخص ثالث و امکانات اضافی Vue داخلی وجود دارد که به شما امکان می دهد برنامه های وب خود را سفارشی کنید و از ویژگی های اضافی استفاده کنید.

منبع مقاله