У меня есть изображение с белым фоном, которое не смотрит на темную тему docusaurus, поэтому я хочу определять, когда пользователь меняет тему, поэтому я использую другое изображение.
Можно ли определить, находится ли докузавр в светлом или темном режиме?
Ответы (4)
Если вы используете классическую тему, вы можете использовать ловушку 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-изображения переключателя изображений
<Layout>
и ее поставщиком. imgur.com/a/AWsatsl
- person br8dy; 10.02.2021
Приведенный выше ответ 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. Тематические изображения