كيفية تطبيق الوضع الداكن على موقع ويب باستخدام متغيرات CSS

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

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

لماذا يستحق الأمر توفير الوضع الداكن على موقعك الإلكتروني؟

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

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

يوجد أيضًا نوع بحت الجماليات وتجربة المستخدميشعر العديد من المستخدمين بأن الواجهات الداكنة أكثر أناقة وعصرية. إن توفير خيار التبديل بين الوضعين الفاتح والداكن يعكس الاهتمام بالتفاصيل ومراعاة مختلف الأذواق، مما قد يُحسّن الانطباع العام عن مشروعك، بل ويُعزز أيضاً مؤشرات تحسين محركات البحث.

المادة ذات الصلة:

كيفية تنشيط الوضع المظلم في Microsoft Edge بهذه الخطوات

متغيرات CSS: مفتاح تغيير السمات

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

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

الممارسة الأكثر شيوعًا هي تعريف هذه المتغيرات في :root، مما يشير إلى العنصر <html>على سبيل المثال، يمكنك البدء بشيء كهذا لنمط الإضاءة الافتراضي لديك:

:root {
  --color-fondo: #ffffff;
  --color-texto: #000000;
  --color-principal: #007bff;
}

من تلك اللحظة فصاعدًا، يجب أن تعتمد جميع ملفات CSS الخاصة بك على هذه المتغيرات. على سبيل المثال:

body {
  background: var(--color-fondo);
  color: var(--color-texto);
}

a {
  color: var(--color-principal);
}

لاحظ أن لا توجد ألوان "صارمة" في بقية الكود، إشارات فقط إلى var(--...)سيسمح لك هذا لاحقًا بتفعيل الوضع الداكن أو حتى العديد من السمات الإضافية ببساطة عن طريق إعادة تعريف نفس المتغيرات بقيم أخرى.

الوضع الداكن باستخدام CSS فقط ومحدد :has()

إذا كنت تريد حلاً سريعاً جداً ولا تمانع الوضع الداكن لا يتم حفظها عند تغيير الصفحاتيمكنك إعداد سمة داكنة بدون استخدام جافا سكريبت باستخدام المحدد العلائقي :has() ومربع اختيار.

المنطق كالتالي: تقوم بتعريف متغيرات المظهر الفاتح الافتراضي في :rootتقوم بتطبيق تلك المتغيرات على الوثيقة بأكملها من خلال body ثم تستخدم body:has(#darkmode-toggle:checked) لاستبدال القيم عند تحديد خانة الاختيار.

مثال بسيط للغاية هو:

/* Colores por defecto (modo claro) */
:root {
  --bg-color: #ffffff;
  --text-color: #222222;
}

/* Aplicar variables al documento */
body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

/* “Magia” del modo oscuro sin JS */
body:has(#darkmode-toggle:checked) {
  --bg-color: #1e1e1e;
  --text-color: #f5f5f5;
}

في لغة HTML، أنت تحتاج إلى واحد فقط مربع اختيار يعمل كمفتاح تشغيل/إيقاف وعلامة <label> لجعلها قابلة للنقر والتخصيص البصري:

<input id="darkmode-toggle" type="checkbox" />
<label class="toggle" for="darkmode-toggle">Modo oscuro</label>

عندما يقوم المستخدم بتفعيل خانة الاختيار، يتم تحديد العنصر المحدد body:has(#darkmode-toggle:checked) يأتي دورعن طريق تغيير قيم المتغيرات. كما هو الحال في بقية الموقع var(--bg-color) y var(--text-color)يتكيف التصميم بأكمله مع الوضع الداكن فوراً.

الشيء الوحيد الذي يجب قوله بخصوص هذه الخدعة هو أن لا يوجد إصرارإذا أعاد المستخدم تحميل الصفحة أو انتقل إلى مسار آخر، فسيتم فقدان الخيار لعدم وجود أي نصوص برمجية أو بيانات مخزنة. وهذا يجعله مثاليًا لصفحات الهبوط ذات الصفحة الواحدة أو العروض التوضيحية البسيطة حيث لا تحتاج إلى تذكر التفضيلات.

تبادل المواضيع عن طريق إضافة فئات إلى أيضاً

عندما ترغب في المضي قدمًا والحصول على نظام متكامل من السمات، فإن الأمر الأكثر شيوعًا هو يمكنك التحكم في المظهر باستخدام فئة في العنصر الجذر. (<html>) أو في <body>بهذه الطريقة يمكنك تحديد مجموعات من المتغيرات لكل موضوع والسماح لجزء صغير من جافا سكريبت بالتعامل مع تبديل الفئات.

قد تبدو أساسيات لغة CSS على النحو التالي:

/* Tema claro por defecto */
:root {
  --color-fondo: #ffffff;
  --color-texto: #000000;
  --color-principal: #007bff;
}

/* Tema oscuro */
:root.tema-oscuro {
  --color-fondo: #333333;
  --color-texto: #ffffff;
  --color-principal: #66b2ff;
}

أما الأنماط الأخرى فتعتمد على هذه المتغيرات، كما رأينا سابقاً:

body {
  background: var(--color-fondo);
  color: var(--color-texto);
}

a {
  color: var(--color-principal);
}

يمكن أن يكون التبديل في لغة HTML بسيطًا مثل مربع اختيار مع تسميته:

<input type="checkbox" id="interruptor-tema" />
<label for="interruptor-tema">Tema oscuro</label>

وما يحتاج جافا سكريبت إلا إلى تبديل الفئة المناسبة على العنصر. documentElement (ما هو <html>):

const interruptor = document.getElementById('interruptor-tema');

interruptor.addEventListener('change', function () {
  document.documentElement.classList.toggle('tema-oscuro');
});

بتحديد خانة الاختيار، سيتم تحديث موقعك يقوم الجهاز بالتبديل تلقائياً بين الوضع الفاتح والوضع الداكن.وذلك بفضل إعادة تعريف متغيرات CSS ضمن الفئة .tema-oscuroالميزة على الخدعة مع :has() الفكرة هي أنه يمكنك هنا بسهولة إضافة المزيد من المنطق، وقبل كل شيء، الاستمرارية.

تذكر التفضيل: التخزين المحلي هو الحل

حتى لا يضطر المستخدم إلى الاستمرار في تفعيل الوضع الداكن في كل مرة يعودون فيها إلى موقعك الإلكترونييمكنك تخزين قرارك في وحدة التخزين المحلية للمتصفح (localStorageإنها واجهة برمجة تطبيقات بسيطة للغاية تعتمد على المفتاح والقيمة، وتستمر بين الزيارات طالما لم يتم مسح بيانات المتصفح.

إحدى الطرق الشائعة للتعامل مع هذا الأمر هي:

عند تحميل الصفحةتقرأ ما إذا كانت هناك قيمة مخزنة (على سبيل المثال، tema = 'oscuro' o 'claro').
إذا كان موجوداً وكان مظلماً، أضف الفئة tema-oscuro al <html> ثم تقوم بتحديد المربع.
عندما يقوم المستخدم بتغيير المفتاح، تقوم بتحديث كل من الفئة والقيمة في localStorage.

قد يبدو الكود الكامل كالتالي:

// Al cargar la página, aplica el tema guardado
if (localStorage.getItem('tema') === 'oscuro') {
  document.documentElement.classList.add('tema-oscuro');
  document.getElementById('interruptor-tema').checked = true;
}

// Manejar cambios en el interruptor
const interruptor = document.getElementById('interruptor-tema');

interruptor.addEventListener('change', function () {
  if (this.checked) {
    document.documentElement.classList.add('tema-oscuro');
    localStorage.setItem('tema', 'oscuro');
  } else {
    document.documentElement.classList.remove('tema-oscuro');
    localStorage.setItem('tema', 'claro');
  }
});

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

الكشف التلقائي عن سمة النظام باستخدام نظام الألوان المفضل

ومن العناصر المهمة الأخرى في هذه المعادلة التشاور مع وسائل الإعلام prefers-color-schemeيُمكّن هذا ملف CSS الخاص بك من معرفة ما إذا كان المستخدم قد قام بضبط نظامه على الوضع الفاتح أو الداكن. بهذه الطريقة يمكنك قم بتكييف التصميم دون أن يضطر المستخدم إلى لمس أي شيءمع مراعاة التفضيل العام لجهازك.

يحتوي الاستعلام، بشكل أساسي، على قيمتين: light y darkمن الأنماط الشائعة جدًا تحديد الوضع الفاتح افتراضيًا أولًا، ثم التبديل إلى الوضع الداكن إذا رغب المستخدم يفضل هذا الوضع في متصفحه:

/* Tema claro por defecto */
:root {
  --body-bg: #ffffff;
  --body-color: #000000;
}

/* Tema oscuro si el sistema está en oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #000000;
    --body-color: #ffffff;
  }
}

بعد ذلك، يمكنك ببساطة استخدام هذه المتغيرات في أنماطك العامة:

body {
  background: var(--body-bg);
  color: var(--body-color);
}

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

إذا قمت بدمج هذه التقنية مع تبديل السمة و localStorageيمكنك ضبط قيمة أولية تستند إلى prefers-color-scheme ثم اسمح للمستخدم باستبدالها بزرّه. ما عليك سوى تحديد أولوية هذه العملية في منطق جافا سكريبت الخاص بك: إما للقيمة المحفوظة أو للقيمة نفسها. تفضيلات النظام.

قم بتنفيذ تبديل المظهر المرئي باستخدام HTML وCSS وJavaScript

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

مثال شائع لبنية HTML، مستوحى من تصميمات باستخدام أطر عمل مثل Bootstrap، يمكن أن يكون كالتالي:

<header class="container">
  <div class="row">
    <div class="col text-center">
      <label id="switch">
        <input type="checkbox">
        <span class="slider round"></span>
      </label>
      <h1>Mi sitio web</h1>
    </div>
  </div>
</header>

في هذا النمط، الـ يتم إخفاء خانة الاختيار بصريًا. ويتم تحقيق مظهر المفتاح بواسطة <span class="slider"> باستخدام CSS (الحدود الدائرية، والرسوم المتحركة، وما إلى ذلك). بعد ذلك، يمكنك ربط هذا المفتاح بإدارة القوالب باستخدام برنامج نصي صغير.

على سبيل المثال، تعيين سمة في <html> يرجى تحديد الموضوع الحالي:

<script>
  const colorSwitch = document.querySelector('#switch input');

  function cambiaTema(ev) {
    if (ev.target.checked) {
      document.documentElement.setAttribute('tema', 'dark');
    } else {
      document.documentElement.setAttribute('tema', 'light');
    }
  }

  colorSwitch.addEventListener('change', cambiaTema);
</script>

في ملف CSS الخاص بك، ما عليك سوى تعريف المتغيرات بناءً على تلك السمة. tema="light" o tema="dark"على سبيل المثال:

:root {
  --bg-color: #ffffff;
  --text-color: #111111;
}

:root {
  --bg-color: #111111;
  --text-color: #f5f5f5;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

هذا النهج القائم على السمات سهل القراءة للغاية و يتيح لك ذلك إضافة المزيد من الولايات في المستقبل (مثل سمة "نيون" أو "بني داكن" وما إلى ذلك) ببساطة عن طريق توسيع محددات السمات :root.

انطلق إلى أبعد من ذلك: أنظمة ألوان متعددة مع

الوضع الداكن ليس سوى البداية: باستخدام متغيرات CSS يصبح الأمر بسيطًا نسبيًا حدد عدة أنظمة ألوان ودع المستخدم يختار بينهما. الآلية هي نفسها، ولكن بدلاً من مربع اختيار بسيط، يمكنك استخدام <select> مع خيارات متنوعة.

المادة ذات الصلة:

كيفية تمكين الوضع المظلم في برنامج Paint في Windows 11

في لغة HTML، يمكنك كتابة شيء مثل:

<label for="selector-tema">Elige un tema</label>
<select id="selector-tema">
  <option value="light">Claro</option>
  <option value="dark">Oscuro</option>
  <option value="neon">Neón 90s</option>
  <option value="sepia">Sepia</option>
</select>

في لغة CSS، يمكنك تعريف المتغيرات لكل مخطط باستخدام الفئات أو السمات، على سبيل المثال باستخدام الفئات في :root:

:root.light {
  --bg-color: #ffffff;
  --text-color: #000000;
  --font-family: "Open Sans", sans-serif;
}

:root.dark {
  --bg-color: #111111;
  --text-color: #f5f5f5;
  --font-family: "Open Sans", sans-serif;
}

:root.neon {
  --bg-color: #050816;
  --text-color: #39ff14;
  --font-family: "Open Sans", sans-serif;
}

:root.sepia {
  --bg-color: #f4ecd8;
  --text-color: #4b3b2a;
  --font-family: "Georgia", serif;
}

يعيد نص الصفحة استخدام هذه الخصائص المخصصة:

body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family, "Open Sans", sans-serif);
}

وتقتصر لغة جافا سكريبت على استمع إلى التغييرات في عبارة التحديد وقم بتحديث الفئة من العنصر الجذر:

const selector = document.getElementById('selector-tema');

function setTheme(theme) {
  document.documentElement.className = theme;
  localStorage.setItem('tema', theme);
}

selector.addEventListener('change', function () {
  setTheme(this.value);
});

// Al cargar, aplicamos el tema guardado o uno por defecto
const temaGuardado = localStorage.getItem('tema') || 'light';
setTheme(temaGuardado);
selector.value = temaGuardado;

وبهذا، يمكن لموقعك الإلكتروني التعامل مع يمكنك اختيار أي عدد من أنظمة الألوان التي تريدها، والحفاظ على نظافة الكود وتركيز تعريف النمط في عدد قليل من كتل المتغيرات.

استخدم prefers-color-scheme كقيمة أولية للمحدد

إذا كنت تريد أيضًا أن يأخذ الوضع الأولي في الاعتبار تفضيلات نظام المستخدميمكنك الاعتماد عليه مرة أخرى prefers-color-schemeالفكرة، على سبيل المثال، هي تحميل القالب افتراضياً. dark إذا تم ضبط الجهاز على الوضع الداكن، ولكن يُسمح للمستخدم بتغييره لاحقًا.

يمكن تحقيق ذلك من خلال دمج CSS و JS، أو ببساطة باستخدام JavaScript عن طريق الاستعلام. window.matchMedia. على سبيل المثال:

const temaGuardado = localStorage.getItem('tema');

let temaInicial = 'light';

if (temaGuardado) {
  temaInicial = temaGuardado;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  temaInicial = 'dark';
}

setTheme(temaInicial);
selector.value = temaInicial;

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

إمكانية الوصول والتباين في الوضع الداكن

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

توصي إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) نسبة تباين دنيا تبلغ 4.5:1 بالنسبة للنصوص العادية، تكون نسبة العرض إلى الارتفاع 3:1، وكذلك بالنسبة للنصوص الكبيرة. عمليًا، هذا يعني أن مجرد وضع اللون الرمادي الفاتح على خلفية رمادية داكنة دون التحقق من سهولة القراءة غير كافٍ. توجد أدوات عبر الإنترنت تتيح لك إدخال ألوانك والتحقق من مطابقتها للمتطلبات.

بالإضافة إلى النص، انتبه إلى الأزرار والروابط والأيقونات وحالات التركيزفي الوضع الداكن، قد تُشتت بعض الألوان الزاهية الانتباه أو تُصعّب القراءة. في كثير من الحالات، يُفضّل أيضًا تعديل الظلال والحدود والخلفيات الثانوية بحيث يتناسب كل شيء بصريًا مع التصميم الجديد.

لا تنسَ أن بعض الصور قد تبدو غريبة في الوضع الليلي: قد تحتاج إلى نسخ بديلة للصناديق أو اضبط درجة شفافيتها حتى لا تبرز على خلفية داكنة. وبالمثل، إذا كنت تستخدم رسومات توضيحية بخلفيات بيضاء، ففكر في قصها أو استخدام تنسيقات شفافة حتى لا تؤثر على المظهر العام.

ما هي الخصائص التي يمكنك التحكم بها باستخدام متغيرات CSS؟

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

على سبيل المثال، يمكنك تغيير حجم الخط العالمي بحسب الموضوع:

:root.light {
  --font-size-base: 16px;
}

:root.dark {
  --font-size-base: 17px;
}

body {
  font-size: var(--font-size-base);
}

أو حدد صور خلفية مختلفة وفقًا لنظام الألوان:

:root.light {
  --bg-image: url('fondo-dia.jpg');
}

:root.dark {
  --bg-image: url('fondo-noche.jpg');
}

.hero {
  background-image: var(--bg-image);
}

يمكنك حتى اللعب بـ أنواع الخطوط المختلفة أو أنماط أكثر "مرحة" لمواضيع بديلة، مع الحرص دائمًا على الحفاظ على وضوح القراءة. شكرًا لـ var() بوجود قيم احتياطية بالفعل، يمكنك تحديد البدائل الآمنة:

body {
  font-family: var(--font-family, "Open Sans", sans-serif);
}

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

ما هو الوضع المظلم لنظام التشغيل Windows 10

المادة ذات الصلة:

كيفية تنشيط الوضع الليلي (الضوء الأزرق) في نظام التشغيل Windows 10

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

إذا قمت بتنظيم CSS الخاص بك حول خصائص مخصصة وقمت بتركيز منطق المظهر في عدد قليل من الفئات أو السمات في <html>يمكنك إضافة مفاتيح تبديل مرئية وحفظ التفضيلات باستخدام localStorage بل ويقدم أيضاً العديد من أنظمة الألوان دون تعقيد الصيانة بشكل مفرط أو التضحية بسهولة الوصول. شارك دليل البرمجة هذا حتى يعرف المستخدمون الآخرون كيفية القيام بذلك.