Obsługa motywów i trybu ciemnego
Dodadzą Państwo natywne jasne i ciemne motywy do interfejsu Electron, korzystając z modułu nativeTheme i zmiennych CSS, rozwijając dotychczasowe umiejętności budowania interfejsów.
Obsługa motywów i trybu ciemnego to bezpłatna lekcja Electron Desktop App Development na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Electron Desktop App Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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.
Ucz się JavaScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 12
- Lekcje
- 47
Często zadawane pytania
Czy lekcja „Obsługa motywów i trybu ciemnego” jest bezpłatna?
Tak — pełny tekst „Obsługa motywów i trybu ciemnego” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Electron Desktop App Development, przejdź na CoddyKit PRO. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.
Co nauczysz się w „Obsługa motywów i trybu ciemnego”?
Dodadzą Państwo natywne jasne i ciemne motywy do interfejsu Electron, korzystając z modułu nativeTheme i zmiennych CSS, rozwijając dotychczasowe umiejętności budowania interfejsów. Ćwiczysz Electron Desktop App Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Electron Desktop App Development?
Nie wymagamy żadnego doświadczenia. Electron Desktop App Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Obsługa motywów i trybu ciemnego”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Electron Desktop App Development?
Tak. Każda lekcja Electron Desktop App Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Integracja HTML, CSS i JavaScript
- Korzystanie z frameworków frontendowych
- Responsywny interfejs desktopowy
- Obsługa motywów i trybu ciemnego