Уявіть: користувач перемикає тему в додатку, а інтерфейс моргає білим — Flash of Unstyled Content (FOUC). Або темна тема скидається після перезавантаження. За статистикою, до 30% користувачів покидають сайт при повторному миготінні. Ці проблеми вирішує грамотно спроєктований Theme Provider — система керування дизайн-токенами, що працює на CSS-змінних і не гальмує рендеринг.
Ми розробляємо Theme Provider для React-додатків більше 5 років: 30+ проєктів, включаючи мультибрендові портали та SaaS-панелі. Середня економія часу на доопрацювання стилів після впровадження — 40%, а вартість реалізації починається від 5000 грн. Нижче — типові складності та як ми їх вирішуємо.
Чому варто використовувати дизайн-токени замість жорстко заданих кольорів?
Дизайн-токени — це єдине джерело правди для всіх візуальних властивостей. Замість #2563eb по всьому коду ви використовуєте --color-primary. Це спрощує підтримку: зміна відтінку в одному файлі змінює кольори в усьому додатку. Ми впроваджуємо токени для кольорів, типографіки, відступів, тіней та радіусів. У великому проєкті (100+ компонентів) такий підхід скорочує час на рефакторинг стилів на 60%.
Який підхід обрати: CSS Custom Properties чи CSS-in-JS?
CSS Custom Properties — нативна технологія, яку підтримують всі сучасні браузери. Як зазначає MDN, CSS-змінні успадковуються і можуть бути перевизначені всередині компонентів. Порівняємо з альтернативою:
| Критерій | CSS Custom Properties | Context + CSS-in-JS |
|---|---|---|
| Продуктивність | Висока (в 2 рази швидше за CSS-in-JS) | Середня (перемальовування компонентів при зміні теми) |
| Простота | Низький поріг входу | Вимагає бібліотеки (styled-components, Emotion) |
| Динамічні токени | Обмежені статичними наборами | Повна гнучкість (JS-обчислення) |
| Підтримка SSR | Відмінно (CSS завантажується одразу) | Вимагає виділення CSS на сервері |
| Сумісність | Всі браузери (IE11 з поліфілами) | Залежить від бібліотеки |
CSS Custom Properties — оптимальний вибір для більшості проєктів. Ми використовуємо їх у 90% реалізацій.
Налаштування Theme Provider з підтримкою системної теми
Спочатку визначаємо токени в CSS для кожної теми. Файл themes.css:
:root,
[data-theme='light'] {
--color-bg: #ffffff;
--color-bg-secondary: #f8fafc;
--color-text: #0f172a;
--color-text-muted: #64748b;
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-border: #e2e8f0;
--color-shadow: rgb(0 0 0 / 0.08);
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
[data-theme='dark'] {
--color-bg: #0f172a;
--color-bg-secondary: #1e293b;
--color-text: #f1f5f9;
--color-text-muted: #94a3b8;
--color-primary: #3b82f6;
--color-primary-hover: #60a5fa;
--color-border: #1e293b;
--color-shadow: rgb(0 0 0 / 0.3);
}
[data-theme='sepia'] {
--color-bg: #fdf6e3;
--color-bg-secondary: #f5edd6;
--color-text: #433422;
--color-text-muted: #7c6a54;
--color-primary: #c0392b;
--color-primary-hover: #a93226;
--color-border: #e8d5b0;
}
Створення React-контексту та провайдера
Тепер створюємо React-контекст з провайдером. У ньому зберігаємо поточну тему (light, dark, sepia або system) і обчислюємо дозволену. Зберігаємо вибір у localStorage.
type ThemeId = 'light' | 'dark' | 'sepia' | 'system'
interface ThemeContextValue {
theme: ThemeId
resolvedTheme: 'light' | 'dark' | 'sepia'
setTheme: (theme: ThemeId) => void
themes: ThemeId[]
}
const ThemeContext = createContext<ThemeContextValue | null>(null)
const STORAGE_KEY = 'app-theme'
const THEMES: ThemeId[] = ['system', 'light', 'dark', 'sepia']
function getSystemTheme(): 'light' | 'dark' {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setThemeState] = useState<ThemeId>(() => {
if (typeof window === 'undefined') return 'system'
return (localStorage.getItem(STORAGE_KEY) as ThemeId) ?? 'system'
})
const resolvedTheme = useMemo<'light' | 'dark' | 'sepia'>(() => {
if (theme === 'system') return getSystemTheme()
return theme as 'light' | 'dark' | 'sepia'
}, [theme])
// Застосовуємо тему до <html>
useEffect(() => {
const root = document.documentElement
root.setAttribute('data-theme', resolvedTheme)
const metaThemeColor = document.querySelector('meta[name="theme-color"]')
const colors: Record<string, string> = {
light: '#ffffff',
dark: '#0f172a',
sepia: '#fdf6e3',
}
metaThemeColor?.setAttribute('content', colors[resolvedTheme])
}, [resolvedTheme])
// Реагуємо на зміну системної теми
useEffect(() => {
if (theme !== 'system') return
const mq = window.matchMedia('(prefers-color-scheme: dark)')
const handler = () => {
document.documentElement.setAttribute('data-theme', getSystemTheme())
}
mq.addEventListener('change', handler)
return () => mq.removeEventListener('change', handler)
}, [theme])
const setTheme = useCallback((newTheme: ThemeId) => {
setThemeState(newTheme)
localStorage.setItem(STORAGE_KEY, newTheme)
}, [])
return (
<ThemeContext.Provider value={{ theme, resolvedTheme, setTheme, themes: THEMES }}>
{children}
</ThemeContext.Provider>
)
}
function useTheme(): ThemeContextValue {
const ctx = useContext(ThemeContext)
if (!ctx) throw new Error('useTheme повинен використовуватися всередині ThemeProvider')
return ctx
}
Запобігання FOUC при SSR
При серверному рендерингу або першому завантаженні сторінка може мигнути неправильною темою. Рішення — inline-скрипт у <head>, який виконується до побудови DOM. У Next.js це виглядає так:
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="uk" suppressHydrationWarning>
<head>
<script
dangerouslySetInnerHTML={{
__html: `(function(){var s=localStorage.getItem('app-theme');var t=s&&s!=='system'?s:window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';document.documentElement.setAttribute('data-theme',t)})()`,
}}
/>
</head>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
)
}
Компонент перемикача тем
Для зручності користувачів створюємо радіо-групу:
function ThemeToggle() {
const { theme, setTheme, themes } = useTheme()
const labels: Record<ThemeId, string> = {
system: 'Системна',
light: 'Світла',
dark: 'Темна',
sepia: 'Сепія',
}
return (
<div role="radiogroup" aria-label="Тема оформлення">
{themes.map((t) => (
<label key={t}>
<input
type="radio"
name="theme"
value={t}
checked={theme === t}
onChange={() => setTheme(t)}
/>
{labels[t]}
</label>
))}
</div>
)
}
Інтеграція з Tailwind CSS
Tailwind підтримує селекторний темний режим через darkMode. Налаштування під наш підхід:
// tailwind.config.ts
export default {
darkMode: ['selector', '[data-theme="dark"]'],
theme: {
extend: {
colors: {
bg: 'var(--color-bg)',
'bg-secondary': 'var(--color-bg-secondary)',
primary: 'var(--color-primary)',
text: 'var(--color-text)',
},
},
},
}
Підтримувані теми
| Тема | Опис | Використання |
|---|---|---|
light |
Світла тема з білим фоном | За замовчуванням |
dark |
Темна тема з темним фоном | Для нічного читання |
sepia |
Тепла тема з відтінком сепії | Для комфортного читання |
system |
Автоматично вибирає світлу або темну | За налаштуваннями ОС |
Практичні рекомендації та типова вартість
Як протестувати перемикання тем?
- Перевірте, що при зміні теми атрибут
data-themeзмінюється на<html>. - Переконайтеся, що CSS-змінні застосовані (виміряйте колір фону через DevTools).
- Протестуйте системну тему: змініть налаштування ОС і перевірте автоматичне оновлення.
- Упевніться, що вибрана тема зберігається після перезавантаження (localStorage).
- Перевірте відсутність FOUC: вимкніть кеш і перезавантажте сторінку.
Чому варто обрати CSS Custom Properties?
Цей підхід дає максимальну продуктивність: браузер оптимізує CSS-змінні на рівні рендерингу, уникаючи перемальовування React-компонентів. Він універсальний — працює з будь-яким фреймворком або ванільним JS. Для SSR не потрібні додаткові налаштування: стилі застосовуються одразу після завантаження. У наших проєктах час до інтерактивності (TTI) після впровадження скорочується в середньому на 15%.
Типові помилки при реалізації
- Незбереження вибору теми — забувають встановити
localStorage. Це призводить до скидання теми при кожному завантаженні. - Відсутність fallback для старих браузерів — без поліфілів IE11 не зрозуміє
var(). Додайте--color-bg: white;як запасне значення. - Ігнорування системної теми — користувачі очікують автоматичне підстроювання. 80% користувачів віддають перевагу системній темі.
- Перевизначення токенів у кожному компоненті — порушує принцип єдиного джерела. Використовуйте токени глобально.
Що входить у роботу
- Аналіз існуючих кольорових схем і типів токенів.
- Створення CSS-файлу тем з повним набором змінних (20+ токенів).
- Реалізація ThemeProvider, хука
useThemeі перемикача. - Впровадження inline-скрипту для захисту від FOUC.
- Інтеграція з Tailwind CSS (якщо використовується).
- Тестування на 10+ браузерах (Chrome, Firefox, Safari, Edge, IE11).
- Документація з додавання нових тем.
- Гарантія відсутності глітчів при перемиканні.
Строки та вартість робіт
Ми пропонуємо реалізацію під ключ за 1-3 дні. Оцінимо ваш проект безкоштовно. Середній бюджет реалізації — від 5000 грн. Зв'яжіться з нами для точного розрахунку.
Замовте реалізацію Theme Provider для вашого проєкту. Отримайте готове рішення з гарантією відсутності FOC та підтримкою системної теми.