0Pricing
Electron Desktop App Development · Lektion

Themes und Unterstützung für den Dark Mode

Fügen Sie Ihrer Electron-Oberfläche mithilfe des Moduls nativeTheme und von CSS-Variablen native helle und dunkle Themes hinzu und bauen Sie damit Ihre bisherigen Fähigkeiten zur UI-Entwicklung aus.

Themes und Unterstützung für den Dark Mode ist eine kostenlose Electron Desktop App Development-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Electron Desktop App Development-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Electron Desktop App Development-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.

Häufig gestellte Fragen

Ist die Lektion „Themes und Unterstützung für den Dark Mode“ kostenlos?

Ja — der vollständige Text von „Themes und Unterstützung für den Dark Mode“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Electron Desktop App Development-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Electron Desktop App Development-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Themes und Unterstützung für den Dark Mode“?

Fügen Sie Ihrer Electron-Oberfläche mithilfe des Moduls nativeTheme und von CSS-Variablen native helle und dunkle Themes hinzu und bauen Sie damit Ihre bisherigen Fähigkeiten zur UI-Entwicklung aus. Du übst Electron Desktop App Development mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Electron Desktop App Development zu starten?

Keine Vorkenntnisse erforderlich. Electron Desktop App Development auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Themes und Unterstützung für den Dark Mode“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Electron Desktop App Development-Lektion Code schreiben und ausführen?

Ja. Jede Electron Desktop App Development-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. HTML, CSS und JavaScript integrieren
  2. Frontend-Frameworks verwenden
  3. Responsives Desktop-Design
  4. Themes und Unterstützung für den Dark Mode
← Zurück zu Electron Desktop App Development