是否可以检测出背甲处于亮还是暗模式？

问题描述

我有一个白色背景的图像，看起来像是圆角龙深色主题，所以我想检测用户何时更改主题，所以我使用其他图像。

解决方法

如果您使用 classic theme，您可以利用 useThemeContext 挂钩来检测当前的颜色模式设置。由于文档支持 MDX，您可以创建一个组件，根据主题上下文提供的颜色模式值有条件地显示适当的图像。这是一个基本示例。

此建议基于使用以下 docusaurus 版本：

>= @docusaurus/core@2.0.0-alpha.70 
>= @docusaurus/preset-classic@2.0.0-alpha.70

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"/>

Example Image Switcher Gif

,

br8dy 上面的回答适用于开发模式，但是当您尝试构建项目时会抛出错误 - Docusaurus 会抱怨该组件不存在于组件中（显示对 this part of the docs 的引用）。

解决方案是使用 BrowserOnly，如 documented here。 明确地说，您需要对此进行更改：

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>
  )
}

,

您可以使用 Themed Images 代替创建自定义组件：

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'),}}
/>;

参考：Docusaurus. Themed images