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

الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،

الوضع الداكن (Dark mode)، أصبح الصيحة الأبرز التي تتبناها العديد من المنصات، من يوتيوب وواتساب إلى مطوري التطبيقات المستقلين الذين يطلقون نسخًا داكنة بشكل متسارع.

ولكن كما هو الحال في الموضة، ليست كل الاتجاهات بالضرورة عملية أو ضرورية.

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

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

في هذا المقال، سنغوص في عالم الوضع الداكن، نحلل جاذبيته وتأثيره، ونكشف الأسباب التي جعلت هذه الميزة الخيار الأول للعديد من التطبيقات والمواقع في عصرنا الرقمي.

الإيجابيات والسلبيات

دعنا نبدأ بالسؤال المهم؛ هل الاستايل الداكن مجرد موضة تصميمية تجذب الأنظار بألوانها الداكنة وأناقتها العصرية، أم أنه يتجاوز حدود الجمال ليقدم فوائد حقيقية تُحدث فرقًا في تجربة المستخدم؟

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

بالإضافة إلى ذلك، يوفر الوضع الداكن استهلاك الطاقة على الأجهزة التي تعتمد على شاشات OLED و AMOLED، مما يجعله خيارًا اقتصاديًا وملائمًا للمستخدمين المهتمين بالبيئة وتوفير البطارية.

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

على الجانب الآخر ورغم مزاياه العديدة، فإن الوضع الداكن قد يسبب مشاكل في القراءة إذا لم يتم ضبط التباين بين النص والخلفية بشكل مثالي، مما يجعل قراءة النصوص الطويلة تحديًا للمستخدمين.

كما أن فعالية الوضع الداكن تختلف بين أنواع الشاشات؛ إذ يبدو رائعًا على شاشات OLED ولكنه قد يظهر بشكل باهت وغير جذاب على شاشات LCD.

علاوة على ذلك، في ظروف الإضاءة القوية مثل ضوء الشمس، قد تصبح الشاشة الداكنة صعبة القراءة بسبب الوهج وانخفاض التباين، مما قد يؤثر على وضوح العناصر.

التطبيق العملي

استكمالا للمقالات السابقة ضمن السلسلة الكاملة لتعلم بناء التطبيقات، نستعرض في هذا المقال كيفية دعم الاستايل الداكن في التطبيق الذي نعمل على تطويره.

أيضا يجب التوضيح أننا سنعتمد في الشرح على بعض المفاهيم الأساسية مثل التفاعلية (Reactivity) والتراكيب (Composables)، بالتالي إن لم تكن ملم بهذه المفاهيم، أنصحك بالاطلاع على مقال "فهم التفاعلية في Vue لجعل تطبيقاتك أكثر مرونة وسلاسة"، وكذلك مقال "إعادة استخدام الكود بذكاء مع Composables فى Nuxt"، حيث توفر هذه المقالات أساسًا قويًا يساعدك على تطبيق الأفكار التي سنتناولها هنا بسهولة وكفاءة.

لجعل التطبيق يدعم اكثر من استايل، نقوم بتعديل اعدادات مكتبة vuetify من خلال تحديث ملف vuetify.config.ts ليصبح بالشكل التالي

const primary = '#1A237E';

export default defineVuetifyConfiguration({
  theme: {
    themes: {
      light: {
        colors: { primary },
      },
      dark: {
        colors: { primary },
        dark: true,
      },
    },
  },
  ...
});

لاحظ تعديل العنصر themes حيث أصبح يحتوي على العنصرين light و dark، وأيضا أضفنا primary بحيث تحتوي على اللون الرئيسي المستخدم في التطبيق.

الخطوة التالية، أن ننشئ ملف جديد باسم useMode.ts داخل المجلد composables ضمن ملفات التطبيق، بحيث يحتوي على الكود التالي

export const useMode = () => {
  const theme = useTheme();

  const isDark = computed({
    get() {
      return theme.global.name.value === 'dark';
    },
    set() {
      theme.global.name.value =
        theme.global.name.value === 'dark' ? 'light' : 'dark';
    },
  });

  const themeIcon = computed(() =>
    theme.global.name.value === 'dark'
      ? 'mdi-white-balance-sunny'
      : 'mdi-weather-night'
  );

  return { isDark, themeIcon };
};

هذا الكود يمثل Composable بسيط يُستخدم لإدارة الوضع الداكن أو الفاتح في التطبيق.

يبدأ الكود باستخدام useTheme للحصول على كائن الثيمات theme الذي يحتوي على معلومات حول الوضع الحالي، مثل اسم الوضع theme.global.name.value.

يُعرّف المتغير المحسوب isDark للتحقق من الوضع الحالي (داكن أو فاتح) وتغيير الوضع عند الحاجة، إذ يحتوي هذا المتغير على خاصية get لمعرفة الوضع الحالي، وخاصية set لتبديله بين الداكن والفاتح.

بالإضافة إلى ذلك، يُعرّف المتغير المحسوب themeIcon لإرجاع أيقونة مناسبة بناءً على الوضع الحالي: أيقونة الشمس للوضع الفاتح وأيقونة القمر للوضع الداكن.

في النهاية، يتم إرجاع الكائن الذي يحتوي على isDark و themeIcon، مما يتيح للمكونات الأخرى في التطبيق الاستفادة منه لإدارة الوضع الداكن/الفاتح وعرض الأيقونات المناسبة في واجهة المستخدم.

بعد ذلك، قم بتحديث الزر في ملف header.vue الذي سبق إنشاؤه في دروس سابقة، بحيث يتوافق مع الكود التالي

<template v-slot:append>
   <v-btn :icon="themeIcon" @click="isDark = !isDark" />
</template>

<script lang="ts" setup>
const { isDark, themeIcon } = useMode();
...
</script>

هذا الكود يُظهر كيفية دمج خاصية الوضع الداكن/الفاتح في واجهة المستخدم.

تم تعديل زر v-btn بحيث أصبح يحتوي على أيقونة ديناميكية يتم تحديدها بواسطة المتغير themeIcon، وعند النقر على الزر، يتم عكس قيمة isDark لتبديل الوضع بين الداكن والفاتح.

في الجزء الخاص بالسكربت script setup، يتم استدعاء وظيفة useMode التي تُرجع القيمتين isDark و themeIcon.

يتم ربط isDark بتغيير الوضع، بينما يتم استخدام themeIcon لتحديث الأيقونة المعروضة بناءً على الوضع الحالي.

الخطوة الأخيرة، هي جعل الخلفية الرمادية للموقع ديناميكية بناء على الاستايل الحالي، عن طريق تحديث الكود داخل ملف app.vue ليصبح متوافقا مع الكود التالي

<v-main :class="isDark ? '' : 'bg-grey-lighten-3'" style="min-height: 100vh">
   <NuxtPage />
</v-main>

<script lang="ts" setup>
const { isDark } = useMode();
</script>

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

بإمكانك الوصول إلى الكود الكامل للتطبيق على GitHub عبر رابط المشروع هنا.

وفقنى الله وإياك إلى ما يحبه ويرضاه ،،