למד על משתני CSS ועל ה-API של LocalStorage בעזרת פרויקט Vue מעשי זה.

הטמעת ערכות נושא אפלות ביישומי האינטרנט שלנו הפכה מיוקרה להכרח. משתמשי מכשיר רוצים כעת לעבור מנושאים בהירים לנושאים כהים ולהיפך, הן בגלל העדפות אסתטיות והן מסיבות מעשיות.

ערכות נושא כהות מציעות פלטת צבעים כהה יותר עבור ממשקי משתמש, מה שהופך את הממשק לקל על העיניים בסביבות עם אור נמוך. ערכות נושא כהות עוזרות גם לחסוך בחיי הסוללה במכשירים עם מסכי OLED או AMOLED.

יתרונות אלו ועוד הופכים את זה להגיוני יותר לתת למשתמשים את הבחירה לעבור לנושאים אפלים.

הגדרת אפליקציית הבדיקה

כדי לקבל הבנה טובה יותר כיצד להוסיף ערכות נושא כהות ב-Vue, תצטרך ליצור אפליקציית Vue פשוטה כדי להריץ מבחן את הפיתוח שלך.

כדי לאתחל את אפליקציית Vue החדשה, הפעל את הפקודה הבאה מהמסוף שלך:

npm init vue@latest

פקודה זו תתקין את הגרסה האחרונה של ה- ליצור-נוף חבילה, החבילה לאתחול אפליקציות Vue חדשות. זה גם יבקש ממך לבחור מתוך סט מסוים של תכונות. אינך צריך לבחור כיוון שהוא אינו הכרחי עבור היקף הדרכה זו.

הוסף את התבנית הבאה ל- App.vue קובץ ביישום שלך src מַדרִיך:


<template>





instagram viewer



<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 רגיל, ללא קובצי סקריפט או סגנון. אתה תשתמש בשיעורים בתבנית לעיל למטרות סטיילינג. כאשר אתה מיישם את הנושא האפל, מבנה האפליקציה ישתנה.

עיצוב אפליקציית הבדיקה עם משתני CSS

משתני CSS, או מאפייני CSS מותאמים אישית, הם ערכים דינמיים שתוכל להגדיר בגיליונות הסגנונות שלך. משתני CSS מספקים כלים מצוינים לעיצוב נושא מכיוון שהם מאפשרים לך להגדיר ולנהל ערכים כגון צבעים וגדלי גופנים במקום אחד.

אתה תשתמש במשתני CSS ובבוררי CSS פסאודו-class כדי להוסיף ערכת נושא רגילה וערכת נושא של מצב אפל עבור אפליקציית 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 */
}

הצהרות אלה מכילות בורר פסאודו מחלקות מיוחד (:שורש) ובורר תכונות ([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;
}

מעברים אלה יוצרים שינוי הדרגתי בצבע הרקע ובצבע הטקסט כאשר מצב כהה משתנה, מה שמעניק אפקט נעים.

יישום הלוגיקה של מצב אפל

כדי ליישם את מצב ערכת הנושא האפל, תזדקק להיגיון של JavaScript כדי לעבור בין ערכות נושא בהירות לכהות. אצלך App.vue קובץ, הדבק את גוש הסקריפט הבא מתחת לבלוק התבנית שנכתב בו ה-API של קומפוזיציה של 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>

הסקריפט שלמעלה כולל את כל הלוגיקה של JavaScript למעבר בין מצבי האור והחושך באפליקציית האינטרנט שלך. התסריט מתחיל בא יְבוּא הצהרה לייבא את פונקציית ref לטיפול בנתונים תגובתיים (נתונים דינמיים) ב-Vue.

לאחר מכן, הוא מגדיר את א getInitialDarkMode פונקציה המאחזרת את העדפת המצב האפל של המשתמש של הדפדפן אחסון מקומי. זה מצהיר על מצב כהה ref, מאתחל אותו עם העדפת המשתמש שאוחזר על ידי הפונקציה getInitialDarkMode.

ה saveDarkModePreference הפונקציה מעדכנת את העדפת המצב האפל של המשתמש ב-LocalStorage של הדפדפן עם setItem שיטה. סוף - סוף, ה החלפת מצב כהה הפונקציה תאפשר למשתמשים להחליף את המצב האפל ולעדכן את ערך LocalStorage של הדפדפן עבור המצב האפל.

החלת ערכת הנושא של מצב כהה ובדיקת האפליקציה

כעת, בבלוק התבנית שלך App.vue קובץ, הוסף את בורר תכונת ה-data-theme לאלמנט השורש כדי להחיל על תנאי את ערכת הנושא של מצב כהה בהתבסס על ההיגיון שלך:


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

כאן, אתה מחייב את בורר נושא הנתונים ל-darkMode ref. זה מבטיח כי מתי מצב כהה נכון, הנושא האפל ייכנס לתוקף. מאזין אירועי הלחיצה על הכפתור עובר בין מצב בהיר לחושך.

הפעל את הפקודה הבאה בטרמינל שלך כדי להציג את היישום בתצוגה מקדימה:

npm run dev

אתה אמור לראות מסך כזה:

כאשר אתה לוחץ על הכפתור, האפליקציה אמורה לעבור בין ערכות נושא בהירות לכהות:

למד לשלב חבילות אחרות ביישומי Vue שלך

משתני CSS וממשק ה-API של LocalStorage מקלים על הוספת ערכת נושא כהה לאפליקציית Vue שלך.

ישנן ספריות רבות של צד שלישי ותוספות מובנות של Vue המאפשרות לך להתאים אישית את יישומי האינטרנט שלך ולהשתמש בתכונות נוספות.