إضافة زر تبديل الوضع الداكن الذي يستخدمه القراء فعلاً

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

أين يقع المزوّد

افتح `src/components/theme/theme-provider.tsx`. يُغلّف المزوّد كل صفحة من التخطيط الجذري ويقرأ `defaultTheme="system"`. يكتب سمة `data-theme` على `<html>` (light/dark/system)، ويستخدم ملف theme.css تلك السمة عبر المُحددات `body[data-theme="light"] / [data-theme="dark"]` التي أضافها لك مسبقاً سكريبت port-theme-css.

الخلاصة: الأنابيب جاهزة. ما تحتاجه هو عنصر تحكم فحسب.

أضف زر شمس/قمر إلى شريط تنقل ثيمك

افتح تخطيط home/blog/post/page الخاص بثيمك (مثل `AtelierBlogLayout.tsx`). داخل كتلة `<nav className="site-nav">`, أضف مكوناً عميلاً واحداً:

import { ThemeToggle } from "@/components/theme/theme-toggle";

// inside your nav-links group:
<ThemeToggle />

هذا كل شيء. `ThemeToggle` موجود بالفعل — يُصيّر رمز شمس أو قمر SVG بحسب الثيم المُطبَّق، ويُحرّك التبديل بـ Framer Motion، ويكتب القيمة العائدة إلى المزوّد. إنه مكوّن من 60 سطراً، بلا تبعيات لم تمتلكها مسبقاً.

اختياري: إخفاء الزر في حالة «النظام»

يُفضّل بعض المصمّمين إظهار الزر فقط حين اختار الزائر وضعاً غير افتراضي بنفسه. في `theme-toggle.tsx`، يُخبرك خطّاف `resolvedTheme` بما هو مُطبَّق فعلياً. صيّر الزر بشكل مشروط حين تكون `theme !== "system"` — من لم يختر بعد لا يرى شيئاً، وتبقى التجربة في أبسط صورها.

التحقق باستخدام لوحة المفاتيح

اضغط Tab للتنقل عبر رأس مدوّنتك. يجب أن يتلقى زر التبديل التركيز ويستجيب لـ Space/Enter. المكوّن المُشحَن يحمل `aria-label="Toggle dark mode"` و`role="button"` مع حلقة التركيز الصحيحة — لكن إن خصصت شريط التنقل بـ CSS يدوي، تحقق من أن حالة التركيز لم تُخفَ بقاعدة `outline: none` تسلّلت عبر إعادة تعيين الثيم.