إضافة زر تبديل الوضع الداكن الذي يستخدمه القراء فعلاً
كيفية توصيل زر تبديل الوضع الفاتح/الداكن على مدوّنة المستأجر باستخدام سياق next-themes الموجود بالفعل وزر شمس/قمر بسيط — دون الحاجة إلى إدارة ملفات تعريف الارتباط أو متغيرات CSS يدوياً.
الوضع الداكن هو ثاني أكثر الميزات طلباً على أي مدوّنة بعد شريط البحث. القراء يتوقعونه. البشرى الطيبة: كل مدوّنة على 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` تسلّلت عبر إعادة تعيين الثيم.