تجاوز إعداد نظام الألوان الأصلي

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

فصل إعدادات النظام من موضوع موقع الويب

لتوفير التحكم الأمثل للمستخدم، من الضروري السماح للمستخدمين بتجاوز إعداد نظام الألوان الخاص بالنظام. وهذا يضمن أنه يمكنهم اختيار الموضوع الذي يفضلونه لموقع ويب معين. ولتحقيق ذلك، يتم استخدام مجموعة من متغيرات CSS وجافا سكريبت.

تكوين CSS

تحدد متغيرات CSS معلمات السمة:

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

يتم استخدام المتغيرات في جميع أنحاء ورقة الأنماط لضمان المرونة:

body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}

تنفيذ جافا سكريبت

تلعب جافا سكريبت دورًا محوريًا في اكتشاف تفضيلات المستخدم والتبديل بين السمات:

function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();

تتعامل وظيفة toggleTheme مع تبديل السمات:

function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}

يضمن جافا سكريبت هذا اكتشافًا تلقائيًا للموضوع ويسمح للمستخدمين بتجاوزه باستخدام مربع اختيار:

الاستنتاج

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