Electron Desktop App Development · Aula

Tematização e Suporte ao Modo Escuro

Adicione temas claro e escuro nativos à sua interface do Electron usando o módulo nativeTheme e variáveis CSS, complementando suas habilidades atuais de criação de interfaces.

Tematização e Suporte ao Modo Escuro é uma aula grátis de Electron Desktop App Development no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Electron Desktop App Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Electron Desktop App Development inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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.

Perguntas Frequentes

A aula “Tematização e Suporte ao Modo Escuro” é grátis?

Sim — o texto completo de “Tematização e Suporte ao Modo Escuro” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Electron Desktop App Development, atualize para CoddyKit PRO. O curso de Electron Desktop App Development inclui 4 aulas no total.

O que vou aprender em “Tematização e Suporte ao Modo Escuro”?

Adicione temas claro e escuro nativos à sua interface do Electron usando o módulo nativeTheme e variáveis CSS, complementando suas habilidades atuais de criação de interfaces. Você pratica Electron Desktop App Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Electron Desktop App Development?

Nenhuma experiência prévia é necessária. Electron Desktop App Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Tematização e Suporte ao Modo Escuro”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Electron Desktop App Development?

Sim. Cada aula de Electron Desktop App Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Electron Desktop App Development