Lesson 20 / الدرس 20

Dark mode / الوضع الداكن

One prefix in Tailwind, one attribute in Bootstrap, and a set of design decisions that neither of them makes for you — because a dark theme is not a light one inverted.

بادئة واحدة في Tailwind وسمة واحدة في Bootstrap، ومجموعة قرارات تصميم لا يتخذها أي منهما عنك — لأن السمة الداكنة ليست الفاتحة مقلوبة.

TAILWIND — a prefix, like a breakpoint
  <div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">

BOOTSTRAP — an attribute on the html element
  <html data-bs-theme="dark">
  Every component follows automatically.

Bootstrap's is less work and less control: one attribute themes everything. Tailwind's is more work and complete control: you state both colours everywhere, which is verbose and means nothing is ever a surprise. Run the demonstration for what changes.

Four things that do not simply invert

Shadows stop working. A shadow is the absence of light, and there is little left to remove on a dark surface. Lift a panel with a lighter background and a visible border instead.
Pure black and pure white are both wrong. White text on pure black vibrates and is tiring to read; near-black and near-white are what every good dark theme uses.
Saturated colours get brighter. A blue that reads calm on white glares on near-black. Dark themes generally want the same hue, lighter and less saturated.
Images need attention. A logo that is black on transparent disappears. So does a screenshot of a white interface, which glows like a torch.

Following the reader, and letting them choose

The operating system already knows which the reader prefers, and CSS can ask: prefers-color-scheme, from the CSS course. Both frameworks use it by default, so a page can respect the reader's choice with no toggle and no JavaScript at all. Adding a toggle is a real feature — it needs somewhere to remember the choice — and it is worth doing only after the automatic version works.

ونظام التشغيل يعرف أصلًا ما يفضّله القارئ، وتستطيع CSS السؤال: prefers-color-scheme من دورة CSS. ويستخدمه الإطاران افتراضيًا، فتستطيع صفحة احترام اختيار القارئ بلا مبدّل وبلا JavaScript إطلاقًا. وإضافة مبدّل ميزة حقيقية — تحتاج موضعًا تتذكر فيه الاختيار — وتستحق الفعل بعد أن تعمل الصيغة التلقائية فقط.

والتباين يجب أن ينجح في السمتين، وفحص واحدة لا يثبت شيئًا عن الأخرى. فـtext-slate-400 مريحة على bg-slate-900 وترسب بشدة على الأبيض؛ والرمادي الخافت الذي ينفع في الوضع الفاتح يختفي غالبًا في الداكن. وهذا الموقع يختبر كل زوج ألوان في السمتين لهذا السبب بالضبط، ووجد إخفاقات حقيقية بذلك.

A practical way to keep this manageable in Tailwind, where you would otherwise write dark: on hundreds of elements: define your colours as semantic names in the theme — surface, text, muted, border — and let those switch. Then a card is bg-surface text-text in both modes and the theme decides what those mean. That is how this site is built, and it is why its dark mode is one block of tokens rather than a thousand prefixes.

وطريقة عملية لإبقاء هذا قابلًا للإدارة في Tailwind، حيث كنت ستكتب dark: على مئات العناصر: عرّف ألوانك بأسماء دلالية في السمة — سطح ونص وخافت وحد — ودع تلك تتبدل. فتصير البطاقة bg-surface text-text في الوضعين وتقرر السمة ما تعنيه. وهكذا بُني هذا الموقع، ولهذا كان وضعه الداكن كتلة رموز واحدة لا ألف بادئة.

وتستطيع تبديل نظام تشغيلك بين الفاتح والداكن والصفحة مفتوحة ومشاهدتها تتغير حيًا — بلا إعادة تحميل، لأن prefers-color-scheme استعلام وسائط كأي آخر. ولأدوات المتصفح أيضًا تحكم لمحاكاة كل واحد، وهو أسرع من تغيير إعداد النظام كل مرة.

Try it live / جرّب بنفسك

<h1>The same page, two themes</h1>

<h2>Tailwind</h2>
<pre>&lt;div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100"&gt;</pre>

<h2>Bootstrap</h2>
<pre>&lt;html data-bs-theme="dark"&gt;</pre>

<h2>Contrast audit</h2>
<table>
  <tr><th>Pair</th><th>Light</th><th>Dark</th></tr>
  <tr><td>Body text on background</td><td>… :1</td><td>… :1</td></tr>
</table>

<h2>What needed more than inverting</h2>
<p>…</p>

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #cbd5e1; padding: .5rem .8rem; text-align: start; }
</style>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Why do shadows stop working in dark mode?

2. Why is white text on pure black a poor choice?

3. Does checking contrast in light mode tell you anything about dark mode?

Your task / مهمتك

Give one page a dark mode in both frameworks, following the reader's system preference with no toggle. Then audit it: list every text-on-background pair and measure its contrast in both themes, and find at least one thing that needed more than inverting — a shadow, an image, or a saturated colour. Say what you did about it.

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

Dark mode following the system preference, in both وضع داكن يتبع تفضيل النظام، في الاثنين
Every pair measured in BOTH themes كل زوج مقيس في السمتين
At least one thing that needed more than inverting شيء واحد على الأقل احتاج أكثر من القلب
No pure black and no pure white لا أسود خالص ولا أبيض خالص