Milkdown动态切换Crepe主题的三种实现方案

Milkdown作为一款现代化的Markdown编辑器，其Crepe主题提供了美观的界面设计。但在实际开发中，我们经常需要根据用户偏好或系统设置动态切换主题模式（如浅色/深色模式）。本文将详细介绍三种实现动态切换Crepe主题的技术方案。

方案一：CSS变量覆盖法

这种方法的核心思想是通过CSS变量和类名切换来实现主题变化。

首先定义两套CSS变量，分别对应浅色和深色主题：

/* 浅色主题 */
.crepe .milkdown {
  --crepe-color-background: #FDFCFF;
  --crepe-color-on-background: #1B1C1D;
  --crepe-color-surface: #F8F9FF;
  --crepe-color-surface-low: #F2F3FA;
}

/* 深色主题 */
.dark .crepe .milkdown {
  --crepe-color-background: #1B1C1D;
  --crepe-color-on-background: #F8F9FF;
  --crepe-color-surface: #111418;
  --crepe-color-surface-low: #191C20;
}

然后在JavaScript中通过切换类名来改变主题：

document.body.classList.toggle('dark');

优点：

• 实现简单直接
• 可以自定义主题变量，灵活性高
• 性能较好，只需切换类名

缺点：

• 需要手动维护CSS变量
• 主题更新时需要同步修改变量值

方案二：动态样式表切换法

这种方法通过控制link标签的disabled属性来切换不同的样式表。

HTML部分：

<link rel="stylesheet" href="light-theme.css" id="lightTheme">
<link rel="stylesheet" href="dark-theme.css" id="darkTheme" disabled>

JavaScript控制：

function switchTheme(isDark) {
  document.getElementById('lightTheme').disabled = isDark;
  document.getElementById('darkTheme').disabled = !isDark;
}

优点：

• 直接使用官方提供的主题文件
• 无需维护CSS变量
• 切换逻辑简单

缺点：

• 需要加载多个样式表
• 切换时可能会有短暂闪烁

方案三：媒体查询切换法

这是方案二的变体，利用媒体查询来控制样式表的生效状态。

HTML部分：

<link rel="stylesheet" href="light-theme.css" media="all" id="lightTheme">
<link rel="stylesheet" href="dark-theme.css" media="not all" id="darkTheme">

JavaScript控制：

function switchTheme(isDark) {
  document.getElementById('lightTheme').media = isDark ? 'not all' : 'all';
  document.getElementById('darkTheme').media = isDark ? 'all' : 'not all';
}

优点：

• 同样直接使用官方主题
• 媒体查询的切换方式更符合标准
• 可以结合prefers-color-scheme实现系统级适配

缺点：

• 与方案二类似，需要加载多个样式表

最佳实践建议

1. 简单项目：推荐使用方案一，维护成本低且性能好
2. 需要官方主题：选择方案二或三，特别是需要支持系统级主题切换时
3. 企业级应用：可以考虑结合CSS-in-JS方案，实现更精细的主题控制

无论选择哪种方案，都建议添加过渡动画来提升用户体验：

.milkdown {
  transition: background-color 0.3s ease;
}

这样在切换主题时，界面变化会更加平滑自然。