{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"الوضع الداكن (Dark mode)، أصبح الصيحة الأبرز التي تتبناها العديد من المنصات، من يوتيوب وواتساب إلى مطوري التطبيقات المستقلين الذين يطلقون نسخًا داكنة بشكل متسارع. "}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"ولكن كما هو الحال في الموضة، ليست كل الاتجاهات بالضرورة عملية أو ضرورية."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"على سبيل المثال، يعد الوضع الداكن خيارًا مثاليًا لتطبيقات تحرير الصور أو الفيديو، حيث يقلل من إجهاد العين ويساعد المستخدمين على التركيز على التفاصيل الدقيقة للصور أو الفيديوهات."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"على النقيض، يمكن أن يكون تطبيق الوضع الداكن في تطبيق تعليمي مليء بالمقالات أو المحتوى الأكاديمي الطويل أمرًا غير مثالي، إذ أن قراءة النصوص البيضاء على خلفية داكنة لفترات طويلة قد تتسبب في إجهاد العين وتجعل من الصعب على المستخدمين استيعاب المحتوى بشكل مريح."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"في هذا المقال، سنغوص في عالم الوضع الداكن، نحلل جاذبيته وتأثيره، ونكشف الأسباب التي جعلت هذه الميزة الخيار الأول للعديد من التطبيقات والمواقع في عصرنا الرقمي. "}]},{"type":"heading","attrs":{"textAlign":"right","dir":"rtl","level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"الإيجابيات والسلبيات"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"دعنا نبدأ بالسؤال المهم؛ هل الاستايل الداكن مجرد موضة تصميمية تجذب الأنظار بألوانها الداكنة وأناقتها العصرية، أم أنه يتجاوز حدود الجمال ليقدم فوائد حقيقية تُحدث فرقًا في تجربة المستخدم؟ "}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"يُعد الاستايل الداكن خيارًا مثاليًا لتقليل إجهاد العين، خاصة في ظروف الإضاءة المنخفضة أو أثناء استخدام التطبيق ليلاً، فهو يساعد المستخدمين على تصفح المحتوى لفترات أطول دون الشعور بالإرهاق البصري. "}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"بالإضافة إلى ذلك، يوفر الوضع الداكن استهلاك الطاقة على الأجهزة التي تعتمد على شاشات OLED و AMOLED، مما يجعله خيارًا اقتصاديًا وملائمًا للمستخدمين المهتمين بالبيئة وتوفير البطارية. "}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"ومن الناحية البصرية، يضفي الوضع الداكن مظهرًا عصريًا وأنيقًا على التصميم، مما يعزز تجربة المستخدم ويزيد من جاذبية التطبيق."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"على الجانب الآخر ورغم مزاياه العديدة، فإن الوضع الداكن قد يسبب مشاكل في القراءة إذا لم يتم ضبط التباين بين النص والخلفية بشكل مثالي، مما يجعل قراءة النصوص الطويلة تحديًا للمستخدمين. "}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"كما أن فعالية الوضع الداكن تختلف بين أنواع الشاشات؛ إذ يبدو رائعًا على شاشات OLED ولكنه قد يظهر بشكل باهت وغير جذاب على شاشات LCD. "}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"علاوة على ذلك، في ظروف الإضاءة القوية مثل ضوء الشمس، قد تصبح الشاشة الداكنة صعبة القراءة بسبب الوهج وانخفاض التباين، مما قد يؤثر على وضوح العناصر."}]},{"type":"heading","attrs":{"textAlign":"right","dir":"rtl","level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"التطبيق العملي"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"استكمالا للمقالات السابقة ضمن "},{"type":"text","marks":[{"type":"link","attrs":{"href":"/articles/65bf4be1789ae522f33e4069","target":"_self","rel":"noopener noreferrer nofollow","class":null}},{"type":"bold"}],"text":"السلسلة الكاملة لتعلم بناء التطبيقات"},{"type":"text","text":"، نستعرض في هذا المقال كيفية دعم الاستايل الداكن في التطبيق الذي نعمل على تطويره. "}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"أيضا يجب التوضيح أننا سنعتمد في الشرح على بعض المفاهيم الأساسية مثل التفاعلية (Reactivity) والتراكيب (Composables)، بالتالي إن لم تكن ملم بهذه المفاهيم، أنصحك بالاطلاع على مقال \""},{"type":"text","marks":[{"type":"link","attrs":{"href":"/articles/673e09094e9c5b5b41768284","target":"_self","rel":"noopener noreferrer nofollow","class":null}}],"text":"فهم التفاعلية في Vue لجعل تطبيقاتك أكثر مرونة وسلاسة"},{"type":"text","text":"\"، وكذلك مقال \""},{"type":"text","marks":[{"type":"link","attrs":{"href":"/articles/6739ebbd4e9c5b5b41767b17","target":"_self","rel":"noopener noreferrer nofollow","class":null}}],"text":"إعادة استخدام الكود بذكاء مع Composables فى Nuxt"},{"type":"text","text":"\"، حيث توفر هذه المقالات أساسًا قويًا يساعدك على تطبيق الأفكار التي سنتناولها هنا بسهولة وكفاءة."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"لجعل التطبيق يدعم اكثر من استايل، نقوم بتعديل اعدادات مكتبة vuetify من خلال تحديث ملف "},{"type":"text","marks":[{"type":"code"}],"text":"vuetify.config.ts"},{"type":"text","text":" ليصبح بالشكل التالي"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"const primary = '#1A237E';\n\nexport default defineVuetifyConfiguration({\n theme: {\n themes: {\n light: {\n colors: { primary },\n },\n dark: {\n colors: { primary },\n dark: true,\n },\n },\n },\n ...\n});"}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"لاحظ تعديل العنصر "},{"type":"text","marks":[{"type":"code"}],"text":"themes"},{"type":"text","text":" حيث أصبح يحتوي على العنصرين "},{"type":"text","marks":[{"type":"code"}],"text":"light"},{"type":"text","text":" و "},{"type":"text","marks":[{"type":"code"}],"text":"dark"},{"type":"text","text":"، وأيضا أضفنا "},{"type":"text","marks":[{"type":"code"}],"text":"primary"},{"type":"text","text":" بحيث تحتوي على اللون الرئيسي المستخدم في التطبيق."}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"الخطوة التالية، أن ننشئ ملف جديد باسم "},{"type":"text","marks":[{"type":"code"}],"text":"useMode.ts"},{"type":"text","text":" داخل المجلد "},{"type":"text","marks":[{"type":"code"}],"text":"composables"},{"type":"text","text":" ضمن ملفات التطبيق، بحيث يحتوي على الكود التالي"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"export const useMode = () => {\n const theme = useTheme();\n\n const isDark = computed({\n get() {\n return theme.global.name.value === 'dark';\n },\n set() {\n theme.global.name.value =\n theme.global.name.value === 'dark' ? 'light' : 'dark';\n },\n });\n\n const themeIcon = computed(() =>\n theme.global.name.value === 'dark'\n ? 'mdi-white-balance-sunny'\n : 'mdi-weather-night'\n );\n\n return { isDark, themeIcon };\n};"}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"هذا الكود يمثل Composable بسيط يُستخدم لإدارة الوضع الداكن أو الفاتح في التطبيق. "}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"يبدأ الكود باستخدام "},{"type":"text","marks":[{"type":"code"}],"text":"useTheme"},{"type":"text","text":" للحصول على كائن الثيمات "},{"type":"text","marks":[{"type":"code"}],"text":"theme"},{"type":"text","text":" الذي يحتوي على معلومات حول الوضع الحالي، مثل اسم الوضع "},{"type":"text","marks":[{"type":"code"}],"text":"theme.global.name.value"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"يُعرّف المتغير المحسوب "},{"type":"text","marks":[{"type":"code"}],"text":"isDark"},{"type":"text","text":" للتحقق من الوضع الحالي (داكن أو فاتح) وتغيير الوضع عند الحاجة، إذ يحتوي هذا المتغير على خاصية "},{"type":"text","marks":[{"type":"code"}],"text":"get"},{"type":"text","text":" لمعرفة الوضع الحالي، وخاصية "},{"type":"text","marks":[{"type":"code"}],"text":"set"},{"type":"text","text":" لتبديله بين الداكن والفاتح. "}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"بالإضافة إلى ذلك، يُعرّف المتغير المحسوب "},{"type":"text","marks":[{"type":"code"}],"text":"themeIcon"},{"type":"text","text":" لإرجاع أيقونة مناسبة بناءً على الوضع الحالي: أيقونة الشمس للوضع الفاتح وأيقونة القمر للوضع الداكن."}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"في النهاية، يتم إرجاع الكائن الذي يحتوي على "},{"type":"text","marks":[{"type":"code"}],"text":"isDark"},{"type":"text","text":" و "},{"type":"text","marks":[{"type":"code"}],"text":"themeIcon"},{"type":"text","text":"، مما يتيح للمكونات الأخرى في التطبيق الاستفادة منه لإدارة الوضع الداكن/الفاتح وعرض الأيقونات المناسبة في واجهة المستخدم."}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"بعد ذلك، قم بتحديث الزر في ملف "},{"type":"text","marks":[{"type":"code"}],"text":"header.vue"},{"type":"text","text":" الذي سبق إنشاؤه في دروس سابقة، بحيث يتوافق مع الكود التالي"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n\n"}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":" هذا الكود يُظهر كيفية دمج خاصية الوضع الداكن/الفاتح في واجهة المستخدم. "}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"تم تعديل زر "},{"type":"text","marks":[{"type":"code"}],"text":"v-btn"},{"type":"text","text":" بحيث أصبح يحتوي على أيقونة ديناميكية يتم تحديدها بواسطة المتغير "},{"type":"text","marks":[{"type":"code"}],"text":"themeIcon"},{"type":"text","text":"، وعند النقر على الزر، يتم عكس قيمة "},{"type":"text","marks":[{"type":"code"}],"text":"isDark"},{"type":"text","text":" لتبديل الوضع بين الداكن والفاتح."}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"في الجزء الخاص بالسكربت "},{"type":"text","marks":[{"type":"code"}],"text":"script setup"},{"type":"text","text":"، يتم استدعاء وظيفة "},{"type":"text","marks":[{"type":"code"}],"text":"useMode"},{"type":"text","text":" التي تُرجع القيمتين "},{"type":"text","marks":[{"type":"code"}],"text":"isDark"},{"type":"text","text":" و "},{"type":"text","marks":[{"type":"code"}],"text":"themeIcon"},{"type":"text","text":". "}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"يتم ربط "},{"type":"text","marks":[{"type":"code"}],"text":"isDark"},{"type":"text","text":" بتغيير الوضع، بينما يتم استخدام "},{"type":"text","marks":[{"type":"code"}],"text":"themeIcon"},{"type":"text","text":" لتحديث الأيقونة المعروضة بناءً على الوضع الحالي."}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"الخطوة الأخيرة، هي جعل الخلفية الرمادية للموقع ديناميكية بناء على الاستايل الحالي، عن طريق تحديث الكود داخل ملف "},{"type":"text","marks":[{"type":"code"}],"text":"app.vue"},{"type":"text","text":" ليصبح متوافقا مع الكود التالي"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n \n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"الآن يمكنك التوجه الى المتصفح والضغط على الأيقونة بشكل القمر أعلي يسار الشاشة، وستلاحظ تحوّل الصفحة إلى الاستايل الداكن."}]},{"type":"image","attrs":{"src":"https://ramy-images.fra1.cdn.digitaloceanspaces.com/6740aa164e9c5b5b4176871b.webp","alt":null,"title":null}},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"بإمكانك الوصول إلى الكود الكامل للتطبيق على GitHub عبر "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/ramyahm2010/products-app","target":"_blank","rel":"noopener noreferrer nofollow","class":null}}],"text":"رابط المشروع هنا"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"وفقنى الله وإياك إلى ما يحبه ويرضاه ،،"}]}]}

تطبيق الاستايل الداكن Dark mode | جـ4