Темы оформления и поддержка тёмного режима
Добавьте в интерфейс 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.
Изучай JavaScript с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 12
- Уроки
- 47
Часто задаваемые вопросы
Урок «Темы оформления и поддержка тёмного режима» бесплатный?
Да — полный текст урока «Темы оформления и поддержка тёмного режима» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 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 включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Интеграция HTML, CSS и JavaScript
- Использование фронтенд-фреймворков
- Адаптивный дизайн настольных приложений
- Темы оформления и поддержка тёмного режима