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