Temi e supporto alla modalità scura
Aggiungete alla UI di Electron temi chiari e scuri nativi usando il modulo nativeTheme e le variabili CSS, valorizzando le competenze di sviluppo dell’interfaccia che già possedete.
Temi e supporto alla modalità scura è una lezione Electron Desktop App Development gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Electron Desktop App Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Electron Desktop App Development include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «Temi e supporto alla modalità scura» è gratuita?
Sì — il testo completo di «Temi e supporto alla modalità scura» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Electron Desktop App Development, passa a CoddyKit PRO. Il corso Electron Desktop App Development include 4 lezioni in totale.
Cosa imparerò in «Temi e supporto alla modalità scura»?
Aggiungete alla UI di Electron temi chiari e scuri nativi usando il modulo nativeTheme e le variabili CSS, valorizzando le competenze di sviluppo dell’interfaccia che già possedete. Eserciti Electron Desktop App Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Electron Desktop App Development?
Non è richiesta alcuna esperienza precedente. Electron Desktop App Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Temi e supporto alla modalità scura»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Electron Desktop App Development?
Sì. Ogni lezione Electron Desktop App Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Integrazione di HTML, CSS e JavaScript
- Utilizzo dei framework frontend
- Design desktop responsivo
- Temi e supporto alla modalità scura