时间戳

首页 > 解决方案 > 是否可以检测 docusaurus 是处于亮模式还是暗模式？

docusaurus - 是否可以检测 docusaurus 是处于亮模式还是暗模式？

问题描述

我有一个白色背景的图像，它看起来与 docusaurus 深色主题无关，所以我想检测用户何时更改主题，所以我使用不同的图像。

标签： docusaurus

解决方案

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

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

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

ImageSwitcher 组件文件

创建一个可以导入到您的文档中的反应组件

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;

文档降价文件

将组件导入您的文档并将适当的图像源传递给组件。

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

推荐阅读