Проектирование тёмного режима и тем
Расширьте визуальный язык приложения, обеспечив плавную поддержку светлой и тёмной тем с помощью семантических цветов, которые адаптируются без переработки каждого компонента.
«Проектирование тёмного режима и тем» — бесплатный урок Design Systems & Component Libraries на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Design Systems & Component Libraries, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Design Systems & Component Libraries содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Beyond a Single Theme
Users increasingly expect dark mode. A visual language built for one theme breaks the moment you flip the background.
This lesson shows how to design a palette that adapts across themes without duplicating your entire style guide.
Semantic Colors, Not Literal
Instead of using white for backgrounds, define semantic roles: surface, text-primary, border.
Each role maps to a different literal value per theme. The component references the role, so it adapts automatically when the theme changes.
Mapping Roles to Themes
A theme is just a lookup table from role to color. Light and dark themes share the same role names but different values.
The snippet shows the idea.
const themes = {
light: { surface: '#ffffff', text: '#1a1a1a' },
dark: { surface: '#121212', text: '#eaeaea' }
};
function color(theme, role) {
return themes[theme][role];
}
console.log('light surface', color('light', 'surface'));
console.log('dark text', color('dark', 'text'));Dark Mode Is Not Inversion
A common mistake is to simply invert colors. Pure black on pure white inverted becomes harsh and causes eye strain.
Good dark themes use dark grays (not #000000) and slightly dimmed text to reduce glare. Design each theme intentionally.
Elevation in Dark Mode
In light mode, shadows imply elevation. In dark mode, shadows are nearly invisible, so elevation is shown with lighter surface colors instead.
A raised card in dark mode is a slightly lighter gray than the page behind it. Plan surface tints for each elevation level.
Contrast Across Themes
Accessibility contrast ratios must hold in both themes. A text color that passes on white may fail on dark gray.
Check every semantic pairing (text on surface, text on primary) against WCAG AA in each theme before shipping.
Accent and Brand Colors
Your brand accent often needs adjusting per theme. A vivid blue that pops on white can feel oversaturated on dark backgrounds.
Define theme-specific accent values so the brand feels intentional, not accidentally neon, in dark mode.
Respecting System Preference
Most platforms expose a user preference via prefers-color-scheme. Default to the system setting, then let users override.
Respecting the OS choice means users land in their preferred theme automatically - a small detail that feels polished.
Images and Illustrations
Photos and illustrations designed for white backgrounds can clash in dark mode. Provide theme-aware assets or add subtle borders/overlays.
Logos especially may need a light variant. Plan asset variants as part of your visual language, not as an afterthought.
Testing Both Themes
Every new component must be reviewed in both themes before merging. A component that looks great in light mode can be unreadable in dark mode.
Build a theme toggle into your documentation so reviewers can switch instantly.
Themes as a Foundation
Designing semantic, theme-aware colors from the start makes adding future themes - high contrast, seasonal, white-label - far cheaper.
The visual language stays the same; only the value tables change.
Quick Check
Test your theming knowledge.
Recap
You learned to extend a visual language across themes:
- Use semantic color roles, not literal values.
- Design dark mode intentionally - it is not inversion.
- Show elevation with surface tints and verify contrast in every theme.
- Respect system preference and provide theme-aware assets.
A semantic palette makes multi-theme support a configuration, not a rewrite.
Часто задаваемые вопросы
Урок «Проектирование тёмного режима и тем» бесплатный?
Да — полный текст урока «Проектирование тёмного режима и тем» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Design Systems & Component Libraries, подпишись на CoddyKit PRO. Курс Design Systems & Component Libraries содержит 4 уроков всего.
Чему я научусь в уроке «Проектирование тёмного режима и тем»?
Расширьте визуальный язык приложения, обеспечив плавную поддержку светлой и тёмной тем с помощью семантических цветов, которые адаптируются без переработки каждого компонента. Ты практикуешь Design Systems & Component Libraries с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Design Systems & Component Libraries?
Предыдущий опыт не требуется. Design Systems & Component Libraries на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Проектирование тёмного режима и тем»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Design Systems & Component Libraries?
Да. Каждый урок Design Systems & Component Libraries включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Цветовые палитры и типографика
- Отступы, компоновка и иконки
- Создание руководства по визуальному стилю
- Проектирование тёмного режима и тем