Можно ли определить, находится ли докузавр в светлом или темном режиме?

Если вы используете классическую тему, вы можете использовать ловушку useThemeContext для определения текущего настройка цветового режима. Поскольку документы поддерживают MDX, вы можете создать компонент, который условно отображает соответствующее изображение на основе значения цветового режима. предоставляется контекстом темы. Вот простой пример.

Это предложение основано на использовании следующих версий докузавра:

>= @docusaurus/[email protected] 
>= @docusaurus/[email protected]

Файл компонента ImageSwitcher

Создайте компонент React, который можно импортировать в вашу документацию.

import React from 'react';
import useThemeContext from '@theme/hooks/useThemeContext'; //docs: https://v2.docusaurus.io/docs/2.0.0-alpha.69/theme-classic#usethemecontext

const ImageSwitcher = ({lightImageSrc, darkImageSrc}) => {
  const { isDarkTheme } = useThemeContext();

  return (
    <img src={isDarkTheme ? darkImageSrc : lightImageSrc} alt="Example banner" />
  )
}

export default ImageSwitcher;

Файл документации в формате Markdown

Импортируйте компонент в свою документацию и передайте компоненту соответствующие источники изображений.

---
id: your-docs
title: Your Docs
---

import ImageSwitcher from '../../../src/ImageSwitcher.js';

<ImageSwitcher 
lightImageSrc="//satyr.io/300/black?text=LightMode"
darkImageSrc="//satyr.io/300/white?text=DarkMode"/>

Пример GIF-изображения переключателя изображений

Приведенный выше ответ br8dy работает в режиме разработки, но выдает ошибку при попытке создать проект - Docusaurus будет жаловаться, что компонент не существует внутри компонента (отображается ссылка на эта часть документации).

Решением является использование BrowserOnly, как описано здесь . Явно вам нужно изменить это:

const ImageSwitcher = ({lightImageSrc, darkImageSrc}) => {
  const { isDarkTheme } = useThemeContext();

  return (
    <img src={isDarkTheme ? darkImageSrc : lightImageSrc} alt="Example banner" />
  )
}

Примерно так:

const ImageSwitcher = ({lightImageSrc, darkImageSrc, altText}) => {
  return (
    <BrowserOnly fallback={<img src={darkImageSrc} alt={altText} />}>
      {() => {
        const { isDarkTheme } = useThemeContext();
        const imgSrc = isDarkTheme ? darkImgSrc : lightImgSrc;
        const fullImgSrc = useBaseUrl(imgSrc);

        return (
          <img src={fullImgSrc} alt={altText} />
        )
      }}
    </BrowserOnly>
  )
}

Вместо создания настраиваемого компонента вы можете использовать тематические изображения :

import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from '@docusaurus/useBaseUrl';

<ThemedImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl('/img/docusaurus_light.svg'),
    dark: useBaseUrl('/img/docusaurus_dark.svg'),
  }}
/>;

С ним у вас не будет следующей ошибки:

`useThemeContext` is used outside of `Layout` Component. 

Теперь это возможно в файле .mdx:

import ThemedImage from '@theme/ThemedImage';

<ThemedImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl('/img/docusaurus_light.svg'),
    dark: useBaseUrl('/img/docusaurus_dark.svg'),
  }}
/>;

Ссылка: Docusaurus. Тематические изображения