كيفية التبديل بين الوضع الداكن والضوء في دروبال 8 (أو 9) بناءً على تفضيلات المستخدم

ما مدى روعة منح المستخدمين حرية تخصيص واجهتهم وفقًا لتفضيلاتهم؟ بينما يفضل العديد من المستخدمين واجهة فاتحة (خلفية فاتحة مع نص غامق) ، يختار بعض المستخدمين واجهة داكنة (خلفية داكنة مع نص فاتح). يُنظر إلى الواجهات الداكنة على أنها رائعة وعصرية بينما يعتقد البعض أيضًا أنها تقلل الضغط على العيون خاصة للمطورين الذين يقضون الكثير من الوقت أمام الشاشة. أعتقد أن توفير خيار للمستخدمين هو مكسب هائل من حيث إمكانية الوصول وتجربة المستخدم. هناك طريقتان يمكن من خلالها تحقيق ذلك. في هذه المقالة ، سنناقش كيفية التبديل بين أوضاع تصميم الويب المظلمة / الفاتحة وتنفيذ ذلك في دروبال 8 أو دروبال 9.

سنركز على طريقتين لتنفيذ ذلك -
1. باستخدام CSS فقط.
2. تنفيذ مفتاح تبديل CSS & JS

باستخدام CSS فقط

لتحقيق الوضع المظلم على أي موقع ويب باستخدام CSS فقط ، يجب على المرء أن يضع في اعتباره بعض متطلبات النظام. أحد هذه المتطلبات المهمة هو الوضع المظلم على مستوى النظام . إذا كان المستخدم يفضل استخدام الوضع المظلم على جهاز الكمبيوتر الخاص به ، فسيتم تزويد المستخدم بموقع ويب يعرض خلفية داكنة اللون مع نص فاتح عليها. يتم استخدام نظام الألوان المفضل (استعلام الوسائط) لتحديد ما إذا كان المستخدم قد طلب من النظام استخدام سمة ألوان فاتحة أو داكنة.

التنفيذ:

1. قم بتعريف متغيرات CSS.
2. استخدم المتغيرات حيثما كان ذلك ضروريًا.

النتائج:

ملاحظة: لمحاكاة النتيجة على بعض الأجهزة غير المدعومة ، فقط أدخل DevTool بالضغط على F12. بعد ذلك ، اضغط على CTRL + SHIFT + P ، ثم ابحث عن نظام الألوان المفضل: داكن واضغط على Enter.

تنفيذ مفتاح تبديل CSS و JS

إذا كنا نتبع هذا النهج ، فلا داعي للقلق بشأن متطلبات النظام. فقط اكتب سطرين من CSS و JS ويجب أن تكون جاهزًا. بمجرد أن نقوم بتهيئة المتغيرات ، يمكننا الإشارة إلى هذه المتغيرات في أوراق الأنماط الخاصة بنا. سيكون هذا هو هيكل HTML للتبديل بين الوضع الداكن والفاتح.

ويجب أن تؤدي بعض سطور CSS إلى هذا التبديل.

الجزء الأخير هو إضافة القليل من JavaScript لربطها معًا.
● تخزين تفضيلات المستخدم للزيارات المستقبلية
● تحقق من تفضيلات المستخدم المحفوظة ، إن وجدت ، عند تحميل موقع الويب

هذا هو! تحقق من العرض الكامل أدناه.

أو انقر هنا لمشاهدة العرض التوضيحي.

تنفيذ تبديل الظلام / الضوء في دروبال 8 (أو دروبال 9)

للبدء في إنشاء سمة مخصصة لـ Drupal 8 ، يرجى الرجوع إلى المقالة الرائعة هنا. لنبدأ الآن في إنشاء سمة لإظهار كيفية استخدام السمة الداكنة / السمة الفاتحة في دروبال 8 أو دروبال 9.

سيبدو هيكل الملف كما يلي:

الآن ، قم بتحديث قسم الرأس داخل page.html.twig بالكود التالي.

 <header aria-label="Site header" role="banner"> <div class="container"> <div class="header"> {{ page.branding }} {{ page.navigation }} <div class="switch-wrapper"> <label class="switch" for="checkbox"> <input type="checkbox"/> <div class="slider round"></div> </label> </div> </div> </div> </header>

ستعتمد بقية بنية HTML على التصميم أو المتطلبات الخاصة بك.
بمجرد الانتهاء من بنية HTML ، فقد حان الوقت لجعلها تبدو جميلة من خلال تصميم العناصر في CSS.
أولاً ، عليك إنشاء جميع المتغيرات الافتراضية التي ستكون مسؤولة عن الألوان في الوضع الفاتح / الداكن.

 style.css :root { --color-background: #f0f0f0; --color-header: rgb(14, 33, 141); --color-header-text: #aecafa; --color-text: #2c0000; --color-card-bg: #fff; --color-link: rgb(255, 0, 0); } /* Variable decleration for dark mode */ [data-theme="dark"] { --color-background: #1a1a1a; --color-header: #aecafa; --color-header-text: 0e218d; --color-text: #d3d3d3; --color-card-bg: #435561; --color-link: #24ce24; }

الآن بعد أن انتهيت من تحديد المتغيرات ، حان الوقت لإضافة نمط إلى قسم الرأس للحصول على النتيجة المطلوبة.

 style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

يرجى ملاحظة أن التصميم قد يختلف وفقًا لمتطلباتك. بعد كل التصميم ، حان الوقت الآن لكتابة بعض الوظائف في كود Jquery. سيبدو كود Jquery بهذا الشكل (script.js في حالتنا)

 script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);
script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);

ولا تنس تضمين ملفات JS و CSS داخل ملف theme_name.libraries.yml.

 global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal
global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal

الآن امسح ذاكرة التخزين المؤقت للموقع لمعرفة النتيجة. يجب أن تبدو النتيجة النهائية الخاصة بك كما يلي: