تخصيص الوضع المظلم باستخدام متغيرات CSS وجافا سكريبت

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

للمعالجة هذا، يمكننا الاستفادة من متغيرات CSS وجافا سكريبت لإدارة إعدادات السمات.

تخصيص CSS مع المتغيرات والسمات

تحديد متغيرات CSS على المستوى الجذر أو الافتراضي، وتحديد مظهر داكن:

:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    ...
    --bg-color: #333;
}

استدعاء المتغيرات عند الحاجة لضبط الأنماط ديناميكيًا.

جافا سكريبت لاكتشاف السمات وتبديلها

في قسم الرأس في HTML الخاص بك، أضف جافا سكريبت لاكتشاف السمة المفضلة للمستخدم:

function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();

استخدم JavaScript للتبديل بين السمات الفاتحة والداكنة:

const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);

HTML لتبديل السمات

إنشاء مربع اختيار HTML لتبديل السمات التي يتحكم فيها المستخدم:

باستخدام هذا الأسلوب، يمكنك اكتشاف سمة المستخدم تلقائيًا، والسماح له بتجاوزها، وتوفير تجربة مخصصة عبر المتصفحات والأنظمة الأساسية.