NextJS+Tailwind项目中React Iconify图标主题色适配问题排查

你的checkTheme函数返回的是MediaQueryList对象，而非布尔值。在JavaScript中，对象属于“真值”，所以无论系统主题是什么，checkTheme()都会被判定为true，导致图标颜色始终为白色。

方案一：修复基础判断逻辑 #

修改函数，通过matches属性获取系统主题的布尔匹配结果：

function checkTheme() {
  return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
}

注意：该方案仅依赖系统主题偏好，若你通过手动添加/移除dark类切换主题（符合Tailwind darkMode: "class"配置），此函数无法同步页面实际主题状态。

方案二：适配Tailwind的class模式 #

因为你配置了darkMode: "class"，页面主题由根元素的dark类控制，直接检测该类是否存在更准确：

function checkTheme() {
  if (typeof window === "undefined") return false; // 服务端渲染时默认返回浅色
  return document.documentElement.classList.contains('dark');
}

方案三：支持动态主题切换的状态监听 #

若用户可手动切换主题，静态函数无法触发组件重新渲染，需用useState和useEffect监听主题变化：

import { useState, useEffect } from 'react';

function useTheme() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    // 初始化主题：优先使用页面dark类，其次使用系统偏好
    const updateTheme = () => {
      const hasDarkClass = document.documentElement.classList.contains('dark');
      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
      setIsDark(hasDarkClass || prefersDark);
    };

    updateTheme();

    // 监听系统主题变化（仅无手动设置时跟随系统）
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleSystemChange = (e) => {
      if (!document.documentElement.classList.contains('dark')) {
        setIsDark(e.matches);
      }
    };
    mediaQuery.addEventListener('change', handleSystemChange);

    // 监听页面dark类的手动修改
    const classObserver = new MutationObserver((mutations) => {
      mutations.forEach(mut => {
        if (mut.attributeName === 'class') {
          setIsDark(document.documentElement.classList.contains('dark'));
        }
      });
    });
    classObserver.observe(document.documentElement, { attributes: true });

    // 清理监听
    return () => {
      mediaQuery.removeEventListener('change', handleSystemChange);
      classObserver.disconnect();
    };
  }, []);

  return isDark;
}

在组件中使用该Hook：

const isDark = useTheme();

<Icon
  className="cursor-pointer"
  icon="entypo-social:linkedin-with-circle"
  width={24}
  color={isDark ? "white" : "black"}
  height={24}
  onClick={() => openInNewTab("https://www.linkedin.com/")}
/>

方案四：用Tailwind类直接控制颜色（最简洁） #

无需手动判断主题，利用Tailwind的dark变体直接设置颜色，完全符合Tailwind设计思路：

<Icon
  className="cursor-pointer text-black dark:text-white"
  icon="entypo-social:linkedin-with-circle"
  width={24}
  height={24}
  onClick={() => openInNewTab("https://www.linkedin.com/")}
/>

只要页面根元素存在dark类，图标自动变为白色，否则为黑色，无需额外逻辑。

内容的提问来源于stack exchange，提问作者Abhishek AN