寻求fumadocs内置prose使用最佳实践及代码优化方案

原代码冗余问题分析 #

原代码存在三处核心冗余：

1. 重复编写三次@supports浏览器特性检测逻辑
2. 分别处理.dark .prose和html[data-theme="dark"] .prose两种暗黑模式选择器，代码完全重复
3. 滥用!important强制覆盖样式，易引发后续优先级冲突

优化后代码 #

/* 基础浅色模式下的Prose文本颜色 */
.prose {
  --tw-prose-body: var(--color-neutral-500);
}

/* 合并暗黑模式选择器，覆盖两种常见触发方式 */
.dark .prose,
html[data-theme="dark"] .prose {
  --tw-prose-body: var(--color-neutral-400);
}

/* 全局统一处理浏览器对color-mix的支持 */
@supports (color: color-mix(in lab, red, red)) {
  .prose {
    --tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 90%, transparent);
  }
}

优化思路说明 #

1. 合并重复选择器：将两种暗黑模式的选择器合并为选择器组，消除重复代码，同时覆盖类名和data属性两种常见的暗黑模式触发方式
2. 抽离特性检测：@supports检测只需全局执行一次，无需在每个样式块中重复编写——只要浏览器支持color-mix，无论明暗模式都使用混合色，逻辑更统一
3. 移除!important：通过调整选择器特异性（若默认样式优先级较高，可改为html .prose进一步提升优先级）替代!important，避免样式优先级混乱

Fumadocs Prose 使用最佳实践 #

• 复用框架原生变量：优先使用Fumadocs内置的颜色变量，减少自定义变量的重复定义
• 统一暗黑模式切换逻辑：尽量采用Fumadocs官方推荐的暗黑模式触发方式（如统一使用data-theme属性），避免同时维护多种切换逻辑
• 全局管理特性检测：浏览器兼容性相关的检测逻辑统一放在全局样式块中，避免分散编写
• 慎用!important：优先通过提升选择器特异性来覆盖默认样式，仅在极端场景下使用!important

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