اذهب إلى المحتوى

السؤال

نشر

في التحديث الأخير للارافل تم إضافة ميزة إنشاء مشروع مع  Dark Mode، من خلال الأمر:

laravel new project1 --dark

حيث أنني وجدت التالي على موقع لارافل الرسمي:

Dark Mode
If you would like Breeze to include "dark mode" support when scaffolding your application's frontend, simply provide the --dark directive when executing the breeze:install command:

`php artisan breeze:install --dark`

ولكن، عندما أقوم بعرض المشروع في المتصفح، لا أجد أي خيار للمستخدم لتفعيل  Dark Mode؟ما الذي يجب علي فعله لتفعيل ذلك؟ هل أنا بحاجة إلى استخدام tailwind أيضًا؟

Recommended Posts

  • 0
نشر

عزيزي الطالب،

لقد أشرت إلى استخدام ميزة "Dark Mode" في مشروع Laravel باستخدام Laravel Breeze. إليك الخطوات التي يجب عليك اتباعها لتفعيل وتخصيص الوضع الداكن (Dark Mode) في مشروعك:

إنشاء المشروع: أولاً، تقوم بإنشاء المشروع الجديد مع دعم الوضع الداكن باستخدام الأمر laravel new project1 --dark. هذا سيعد البنية الأساسية لمشروعك.

تثبيت Laravel Breeze: بعد ذلك، قم بتثبيت Laravel Breeze باستخدام الأمر composer require laravel/breeze --dev في مشروعك.

تفعيل الوضع الداكن في Breeze: استخدم الأمر php artisan breeze:install --dark لتفعيل الوضع الداكن في Laravel Breeze. هذا سيضيف الدعم الأساسي للوضع الداكن في واجهات المستخدم الخاصة بك.

استخدام Tailwind CSS: نعم، أنت بحاجة إلى استخدام Tailwind CSS لتخصيص وإدارة الوضع الداكن. Laravel Breeze يستخدم Tailwind CSS بشكل افتراضي، ولذلك يجب أن تكون على دراية بكيفية تخصيصه واستخدام فصول Tailwind للتحكم في الألوان والتصميم.

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...