Home-theater-designers
لقد تحول تطبيق السمات المظلمة في تطبيقات الويب لدينا من الترف إلى الضرورة. يرغب مستخدمو الأجهزة الآن في التبديل من السمات الفاتحة إلى السمات الداكنة والعكس بسبب التفضيلات الجمالية والأسباب العملية.
فيديو 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 المخصصة ، هي قيم ديناميكية يمكنك تحديدها في أوراق الأنماط الخاصة بك. توفر متغيرات CSS أدوات ممتازة للتخصيص لأنها تسمح لك بتحديد القيم وإدارتها مثل الألوان وأحجام الخطوط في مكان واحد.
ستستخدم متغيرات CSS ومحددات الفئة الزائفة CSS لإضافة سمة الوضع العادي والمظلم لتطبيق Vue الخاص بك. في ال src/assets الدليل، إنشاء style.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 مع تعيين هذه السمة على true. في محدد السمات هذا، يمكنك بعد ذلك تحديد أنماط لموضوع الوضع الداكن، لتجاوز سمة الضوء الافتراضية.
تحدد هذه الإعلانات متغيرات 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')
أضف الآن بعض الأنماط الإضافية style.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;
}
تُنشئ هذه التحولات تغييرًا تدريجيًا في لون الخلفية ولون النص عند تبديل الوضع الداكن، مما يعطي تأثيرًا ممتعًا.
تنفيذ منطق الوضع المظلم
لتنفيذ وضع المظهر الداكن، ستحتاج إلى منطق JavaScript للتبديل بين السمات الفاتحة والداكنة. في الخاص بك 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>
يتضمن البرنامج النصي أعلاه كل منطق JavaScript للتبديل بين الوضعين الفاتح والداكن في تطبيق الويب الخاص بك. يبدأ البرنامج النصي بـ يستورد عبارة لاستيراد وظيفة المرجع لمعالجة البيانات التفاعلية (البيانات الديناميكية) في Vue.
التالي، يحدد أ getInitialDarkMode الوظيفة التي تسترد تفضيلات الوضع المظلم للمستخدم من المتصفح التخزين المحلي . ويعلن darkMode المرجع، وتهيئته باستخدام تفضيلات المستخدم التي تم استردادها بواسطة وظيفة getInitialDarkMode.
ال saveDarkModePreference تعمل الوظيفة على تحديث تفضيلات الوضع المظلم للمستخدم في LocalStorage بالمتصفح باستخدام setItem طريقة. وأخيرا، فإن تبديلDarkMode ستتيح الوظيفة للمستخدمين تبديل الوضع المظلم وتحديث قيمة LocalStorage للمتصفح للوضع المظلم.
تطبيق سمة الوضع الداكن واختبار التطبيق
الآن، في كتلة القالب الخاص بك 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>
هنا، تقوم بربط محدد سمة البيانات بمرجع darkMode. وهذا يضمن أنه عندما darkMode صحيح، سوف يصبح المظهر المظلم ساري المفعول. يقوم مستمع حدث النقر الموجود على الزر بالتبديل بين الوضعين الفاتح والداكن.
قم بتشغيل الأمر التالي في جهازك الطرفي لمعاينة التطبيق:
npm run dev
يجب أن تشاهد شاشة مثل هذه:
عند النقر فوق الزر، يجب أن يقوم التطبيق بالتبديل بين السمات الفاتحة والداكنة:
كم من الوقت تستمر امدادات الطاقة للكمبيوتر الشخصي
تعلم كيفية دمج الحزم الأخرى في تطبيقات Vue الخاصة بك
تعمل متغيرات CSS وواجهة برمجة تطبيقات LocalStorage على تسهيل إضافة سمة داكنة إلى تطبيق Vue الخاص بك.
هناك العديد من مكتبات الجهات الخارجية وإضافات Vue المضمنة التي تتيح لك تخصيص تطبيقات الويب الخاصة بك واستخدام ميزات إضافية.