API браузера

Управление состоянием

Компонент ThemeProvider

Уровень приложения

читает из

читает из

читает из

записывает в

обновляет

Корень приложения

Дочерние компоненты

ThemeProvider

ThemeContext

Хуки useState

Хуки useEffect

isDarkMode: boolean

prefersReducedMotion: boolean

theme: ThemeBase

localStorage
ключ ui:dark

matchMedia
prefers-color-scheme

matchMedia
prefers-reduced-motion

document.documentElement
classList.toggle('dark')

Поток обновления

Поток инициализации

Да

Нет

Да

Нет

Монтирование ThemeProvider

Проверка localStorage
window.localStorage.getItem('ui:dark')

stored !== null?

Парсинг сохраненного значения
stored === '1' → true
stored === '0' → false

Проверка системного предпочтения
window.matchMedia('(prefers-color-scheme: dark)')

matchMedia
поддерживается?

Получить значение .matches

По умолчанию false

setIsDarkMode(value)

Изменение состояния isDarkMode

document.documentElement.classList.toggle('dark', isDarkMode)

document.documentElement.style.colorScheme = isDarkMode ? 'dark' : 'light'

localStorage.setItem('ui:dark', isDarkMode ? '1' : '0')

export type ThemeBase = {
  name: string;
  rounded: Record<string, any> & { default: any };
  buttonSize: Record<string, any> & { default: any };
  isNavFixed?: boolean;
};

import { useTheme } from '@ui8kit/core';

function ThemeToggle() {
  const { isDarkMode, toggleDarkMode } = useTheme();
  
  return (
    <button onClick={toggleDarkMode}>
      {isDarkMode ? '☀️' : '🌙'}
    </button>
  );
}

const { toggleDarkMode } = useTheme();
// Вызов toggleDarkMode() переключает между светлой и темной темой

const { setDarkMode } = useTheme();
// setDarkMode(true)  → Принудительно включить темную тему
// setDarkMode(false) → Принудительно включить светлую тему

Мониторинг во время выполнения

Инициализация

Очистка

Размонтирование компонента

removeEventListener

Монтирование компонента

window.matchMedia('prefers-reduced-motion: reduce')

setPrefersReducedMotion(matches)

Обработчик событий MediaQueryList

Обработчик события изменения

setPrefersReducedMotion(e.matches)

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ... другая конфигурация
}

<div className="bg-white dark:bg-slate-900 text-black dark:text-white">
  Контент адаптируется к темной теме
</div>

import { ThemeProvider, modernUITheme } from '@ui8kit/core';

export function App() {
  return (
    <ThemeProvider theme={modernUITheme}>
      <YourApp />
    </ThemeProvider>
  );
}