Electron Desktop App Development · درس

دعم السمات والوضع الداكن

أضف سمات أصلية فاتحة وداكنة إلى واجهة Electron باستخدام الوحدة nativeTheme ومتغيرات CSS، مع تطوير مهاراتك الحالية في بناء واجهات المستخدم.

دعم السمات والوضع الداكن درس مجاني في Electron Desktop App Development على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Electron Desktop App Development، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Electron Desktop App Development 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Why Theming Matters

Desktop users expect apps to respect their system theme. A polished Electron app switches between light and dark automatically.

The nativeTheme Module

Electron exposes nativeTheme in the main process to read and control the OS appearance.

const { nativeTheme } = require('electron');
console.log(nativeTheme.shouldUseDarkColors);

Detecting Dark Mode

shouldUseDarkColors returns a boolean telling you the active appearance. Use it to pick initial styles.

function themeName(isDark) {
  return isDark ? 'dark' : 'light';
}
console.log(themeName(true));

Reacting to Changes

Listen for the updated event so your UI follows when the user switches their system theme live.

nativeTheme.on('updated', () => {
  const dark = nativeTheme.shouldUseDarkColors;
  win.webContents.send('theme-changed', dark);
});

CSS Variables for Themes

Define colors as CSS custom properties so switching themes only swaps a class on the root element.

:root {
  --bg: #ffffff;
  --fg: #111111;
}
.dark {
  --bg: #111111;
  --fg: #f5f5f5;
}

Applying the Theme Class

In the renderer, toggle a class based on the IPC message from the main process.

function applyTheme(isDark) {
  document.body.classList.toggle('dark', isDark);
}

Forcing a Theme

Let users override the system with nativeTheme.themeSource, which accepts 'system', 'light', or 'dark'.

function setSource(choice) {
  const valid = ['system', 'light', 'dark'];
  return valid.includes(choice) ? choice : 'system';
}
console.log(setSource('dark'));

Persisting User Choice

Save the user's theme preference so it survives restarts. A small config file or localStorage works well.

Theming Native Elements

The window title bar and menus can also follow the theme on platforms that support it, for a seamless look.

Avoiding Flash of Wrong Theme

Read the theme before the window shows, then reveal it on ready-to-show to avoid a jarring color flash.

Accessible Color Choices

Ensure both themes meet contrast ratios. Dark mode is not just inverted colors; test readability.

Quick Check

Test your theming knowledge.

Recap

You learned to support light and dark themes using nativeTheme, CSS variables, live updates via IPC, user overrides with themeSource, and persistence of preferences.

الأسئلة الشائعة

هل درس «دعم السمات والوضع الداكن» مجاني؟

نعم — نص درس «دعم السمات والوضع الداكن» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Electron Desktop App Development، انتقل إلى CoddyKit PRO. تتضمن دورة Electron Desktop App Development 4 دروس في المجموع.

ماذا ستتعلم في «دعم السمات والوضع الداكن»؟

أضف سمات أصلية فاتحة وداكنة إلى واجهة Electron باستخدام الوحدة nativeTheme ومتغيرات CSS، مع تطوير مهاراتك الحالية في بناء واجهات المستخدم. تتمرن على Electron Desktop App Development مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Electron Desktop App Development؟

لا تُشترط خبرة سابقة. Electron Desktop App Development على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «دعم السمات والوضع الداكن»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Electron Desktop App Development هذا؟

نعم. كل درس في Electron Desktop App Development يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Electron Desktop App Development