في عالم تطوير الويب المتزايد في التعقيد والتنوع، يعتبر توفير واجهة مستخدم مستجيبة وجذابة أمرًا حيويًا. في هذا السياق، قد تكون إضافة إمكانية اختيار السمة اللونية المفضلة من قبل المستخدم خطوة مهمة لتحسين تجربة المستخدم. تبدو لديك فهم جيد لكيفية إنشاء وتبديل بين ورقات الأنماط CSS بواسطة JavaScript، ولكن تحديد السمة اللونية الافتراضية والاحتفاظ بها بعد إعادة تحميل الصفحة أو الانتقال إلى صفحة جديدة يمكن أن يكون مهمة إضافية.
لحل هذه المشكلة، يمكنك استخدام مخزن محلي (local storage) لتخزين تفضيلات المستخدم بشكل دائم. ببساطة، عندما يختار المستخدم الوضع اللوني المظلم، يتم تخزين هذا الاختيار في مخزن محلي. ثم، عندما يعيد المستخدم تحديث الصفحة أو ينتقل إلى صفحة جديدة، يمكنك فحص مخزن المفضلات وتحميل ورقة الأنماط المناسبة وفقًا للاختيار السابق.
فيما يلي مثال على كيفية تنفيذ ذلك باستخدام JavaScript:
htmlhtml>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تبديل ورقة الأنماطtitle>
<link id="style-link" rel="stylesheet" href="light.css">
head>
<body>
<p>لقد قمت بإنشاء ورقة أنماط فاتحة وأخرى داكنة لموقعي على الويب. تعمل الورقة الفاتحة كافتراضية، والورقة الداكنة كبديل. يعمل الأمر بشكل مثالي بفضل JavaScript. ومع ذلك، يواجهني الآن مشكلة: عندما يختار المستخدم الإصدار الداكن ويقوم بتحديث الصفحة أو الانتقال إلى الصفحة التالية، يعود الأمر إلى الورقة الفاتحة مرة أخرى. أرغب في جعل موقعي يحمل الورقة الداكنة كورقة أنماط افتراضية إذا اختار المستخدم الورقة الداكنة. كيف يمكن تحقيق ذلك؟ هل هو بفضل JavaScript؟ إذا كان الأمر كذلك، يرجى توفير رموز البرمجة الخاصة.p>
<script>
// تحقق إذا كانت هناك تفضيلات محفوظة في مخزن المفضلات
const preferredStyle = localStorage.getItem('preferredStyle');
// حدد ورقة الأنماط المناسبة وفقًا للاختيار المحفوظ
const styleLink = document.getElementById('style-link');
if (preferredStyle === 'dark') {
styleLink.href = 'dark.css';
}
// استمع إلى تغييرات اختيار المستخدم وقم بتحديث مخزن المفضلات وورقة الأنماط
window.addEventListener('changeStyle', (event) => {
const newStyle = event.detail.style;
localStorage.setItem('preferredStyle', newStyle);
styleLink.href = `${newStyle}.css`;
});
script>
<button onclick="changeStyle('light')">اختيار الورقة الفاتحةbutton>
<button onclick="changeStyle('dark')">اختيار الورقة الداكنةbutton>
<script>
// دالة لتغيير ورقة الأنماط وإطلاق حدث changeStyle
function changeStyle(style) {
const changeEvent = new CustomEvent('changeStyle', { detail: { style } });
window.dispatchEvent(changeEvent);
}
script>
body>
html>
يتيح للمستخدمين اختيار الورقة الأنماط المفضلة لديهم بسهولة، ويتم تخزين هذا الاختيار في مخزن محلي لضمان استمرارية التفضيلات بين الصفحات والتحديثات.
المزيد من المعلومات
بالطبع، دعنا نوسع على المعلومات المقدمة. لتحسين تجربة المستخدم في تطبيق النمط المظلم، يمكنك أيضًا استخدام مكتبات أو إطارات عمل جاهزة مثل Bootstrap أو Tailwind CSS التي تدعم بنية النمط المظلم بشكل مدمج.
علاوة على ذلك، يُفضل استخدام متغيرات CSS لتحديد الألوان بحيث يمكن تغييرها بسهولة دون الحاجة إلى تغيير الشيفرة البرمجية. يمكنك تعريف متغيرات لألوان الخلفية والنص وغيرها، ثم استخدامها في التعريفات الخاصة بالنمط الفاتح والداكن. على سبيل المثال:
css:root {
--background-light: #ffffff;
--text-light: #333333;
--background-dark: #121212;
--text-dark: #ffffff;
}
.light-theme {
background-color: var(--background-light);
color: var(--text-light);
}
.dark-theme {
background-color: var(--background-dark);
color: var(--text-dark);
}
ثم يمكنك تعيين الفئات المناسبة للعناصر في صفحتك وفقًا لاختيار المستخدم:
javascriptfunction loadLightTheme() {
document.body.classList.remove('dark-theme');
document.body.classList.add('light-theme');
}
function loadDarkTheme() {
document.body.classList.remove('light-theme');
document.body.classList.add('dark-theme');
}
هذا الأسلوب يجعل تحديث الألوان أمرًا سهلاً دون الحاجة إلى تعديل الشيفرة البرمجية بشكل كبير.
أخيرًا، يمكنك استخدام خصائص تخزين المتصفح مثل Local Storage للحفاظ على تفضيلات المستخدم حتى بعد إغلاق المتصفح. يمكنك تحديث الأسلوب الذي ذكرته سابقًا لاستخدام Local Storage بدلاً من Session Storage.
javascript// عند اختيار المستخدم للنسخة الداكنة
localStorage.setItem('theme', 'dark');
// في كل صفحة، قم بفحص قيمة متغير الارتباط
const themePreference = localStorage.getItem('theme');
هذه الإضافات تجعل تجربة المستخدم أكثر تكاملًا وتمكنك من تقديم واجهة مستخدم متعددة الأوجه بشكل أفضل.
