Hooks

useTheme

Текущая тема как внешнее состояние DOM, без мигания при загрузке.

Текущая тема как внешнее состояние DOM. Хук не хранит тему у себя — он читает атрибут data-theme на <html>, поэтому смена темы из любого места приложения доходит до всех сразу.

Пример

Выбор пользователя: dark
Что на экране: dark

Меняется тема всего сайта — состояние живёт в атрибуте на <html>, а не внутри компонента.

import { useTheme } from "@toimetdev/pathlogs-hooks";

function Toggle() {
  const { preference, resolved, setTheme, toggle } = useTheme();

  return (
    <button onClick={toggle}>
      {resolved === "dark" ? "Светлая" : "Тёмная"}
    </button>
  );
}

Готовый переключатель уже есть — ThemeToggle из @toimetdev/pathlogs-core. Хук нужен, когда переключатель свой или тема влияет на логику: например, на цвет графика.

Что возвращает

Проп	Тип	По умолчанию	Описание
`preference`	`"light" \| "dark" \| "system"`	—	Что выбрал пользователь.
`resolved`	`"light" \| "dark"`	—	«system» уже развёрнут в то, что видно на экране.
`setTheme`	`(theme: ThemePreference) => void`	—	Применяет тему и запоминает выбор.
`toggle`	`() => void`	—	Переключает светлую и тёмную. «system» разворачивается в противоположность текущей.

preference"light" | "dark" | "system"

Что выбрал пользователь.

resolved"light" | "dark"

«system» уже развёрнут в то, что видно на экране.

setTheme(theme: ThemePreference) => void

Применяет тему и запоминает выбор.

toggle() => void

Переключает светлую и тёмную. «system» разворачивается в противоположность текущей.

Единственный аргумент — ключ в localStorage (по умолчанию "theme"). Он должен совпадать с ключом, переданным в themeScript().

Мигание при загрузке

Тему нужно применить до первой отрисовки, иначе страница мигнёт. Для этого в <head> ставится крошечный синхронный скрипт:

tsx

import { themeScript } from "@toimetdev/pathlogs-tokens";

<html lang="ru" suppressHydrationWarning>
  <head>
    <script dangerouslySetInnerHTML={{ __html: themeScript() }} />
  </head>
</html>

Подписка слушает и атрибут, и системную настройку: последняя важна, только пока выбран system.

Без React

Те же операции доступны как обычные функции — их зовёт и инлайн-скрипт, и тесты:

tsx

import {
  getThemePreference,
  getResolvedTheme,
  setThemePreference,
  toggleTheme,
  subscribeTheme,
  themeScript,
} from "@toimetdev/pathlogs-tokens";

Запись в localStorage может упасть (приватный режим, отключённые куки) — это не роняет переключатель: тема всё равно уже применена, просто не переживёт перезагрузку.