تبديل السمة

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

التثبيت

أضف مفتاح تبديل السمة القابل لإعادة الاستخدام وتبعيات السمة الدلالية الخاصة به باستخدام CLI أو يدوياً:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

CLI

يدوي

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add theme-toggle

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

إعداد المشروع

الفاتح هو الافتراضي. طبّق boardui:theme القيمة قبل الترطيب لمنع وميض الرسم الأول، وإضافة suppressHydrationWarning لأن الفئة الجذرية تُعيَّن في المتصفح قبل أن يُرطّب React الصفحة.

// app/layout.tsximport Script from "next/script";import "@/styles/globals.css";
const themeScript =  '(function(){try{var dark=localStorage.getItem("boardui:theme")==="dark";document.documentElement.classList.toggle("dark",dark)}catch(e){document.documentElement.classList.remove("dark")}})();';
export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en" suppressHydrationWarning>      <body>        <Script id="boardui-theme" strategy="beforeInteractive">          {themeScript}        </Script>        {children}      </body>    </html>  );}

التبديل يدوي فقط: لا يقرأ سمة نظام التشغيل. تبديل الحركة المخفضة والمتصفحات غير المدعومة يتم فوراً دون الكشف الدائري.

الشريط الجانبي المطوي

تعيين collapsed للحصول على عنصر تحكم بأيقونة فقط بحجم 36 بكسل يناسب شريط التنقل الجانبي المدمج مع الحفاظ على نفس حالة الضغط المتاحة.

<ThemeToggle collapsed />