如何检测Docusaurus的浅色/深色模式？实现主题切换时替换图片

当然可以搞定这个需求！Docusaurus其实已经给我们提供了现成的方式来检测主题模式，不管是在React组件里还是全局脚本中都能实现，下面我给你详细拆解几种方案：

方案一：React组件内用官方主题上下文（最推荐） #

如果你是在自定义React组件里使用图片，直接用Docusaurus提供的useThemeContext钩子是最方便的——它能直接获取当前的主题状态，而且会自动响应主题切换。

import React from 'react';
import { useThemeContext } from '@docusaurus/theme-common';

export default function ThemedImage() {
  // 从主题上下文里拿到是否是深色模式的状态
  const { isDarkTheme } = useThemeContext();

  return (
    <img
      // 根据主题状态切换图片地址
      src={isDarkTheme ? '/img/dark-bg-image.png' : '/img/white-bg-image.png'}
      alt="适配主题的图片"
      // 可以加个过渡动画，切换更丝滑
      style={{ transition: 'opacity 0.3s ease' }}
    />
  );
}

之后你就可以在文档或者页面里直接引入这个组件啦，主题切换时图片会自动跟着变。

方案二：全局监听主题切换事件（适合非React场景） #

如果你的图片是直接写在静态HTML里，或者需要在全局脚本中处理，那可以通过监听Docusaurus的themeChange事件来实现，同时初始加载时也能检测当前主题：

// 先获取目标图片元素
const themedImage = document.getElementById('your-image-id');

// 定义更新图片的函数
function updateImageForTheme() {
  // Docusaurus会给html元素加对应的主题类：theme-dark或theme-light
  const isDarkMode = document.documentElement.classList.contains('theme-dark');
  themedImage.src = isDarkMode ? '/img/dark-bg-image.png' : '/img/white-bg-image.png';
}

// 页面加载时先执行一次，确保初始状态正确
updateImageForTheme();

// 监听主题切换事件，每次切换时更新图片
window.addEventListener('themeChange', (event) => {
  const { isDarkTheme } = event.detail;
  themedImage.src = isDarkTheme ? '/img/dark-bg-image.png' : '/img/white-bg-image.png';
});

可选方案：用picture元素（仅跟随系统偏好） #

如果你只需要跟随系统的深色/浅色偏好设置，可以用HTML的picture元素，让浏览器自动匹配：

<picture>
  <!-- 当系统偏好深色模式时加载这张图 -->
  <source media="(prefers-color-scheme: dark)" srcset="/img/dark-bg-image.png">
  <!-- 默认加载浅色模式的图 -->
  <img src="/img/white-bg-image.png" alt="适配主题的图片">
</picture>

⚠️ 注意：这个方法只跟着系统设置走，如果用户在Docusaurus里手动切换了和系统不同的主题，这个图片不会同步切换，所以如果要支持手动主题切换，还是优先用前两种方案。

内容的提问来源于stack exchange，提问作者Adegoke Temitope