useDark

useDark определяет, включён ли сейчас тёмный режим.

Тип: () => boolean

import { useDark } from '@rspress/core/runtime';

export default function ThemeSwitchHint() {
  const isDark = useDark();
  return <div>{isDark ? 'Тёмная тема включена' : 'Светлая тема включена'}</div>;
}

Примечание

Во время SSG хук useDark не может точно отражать настройку темы браузера пользователя, поскольку SSG выполняется на этапе сборки. Этот хук вернёт правильное значение темы только после завершения клиентской гидратации.

Если вам нужно применять стили тёмной темы во время SSG, рекомендуется использовать CSS-селектор .dark для стилизации. Rspress добавляет класс dark к корневому элементу документа, который работает корректно как в SSG, так и при клиентском рендеринге:

/* Светлый режим */
.my-component {
  color: black;
  background-color: white;
}

/* Тёмный режим */
.dark .my-component {
  color: white;
  background-color: #1a1a1a;
}

#useDark

useDark