🎨 智能深色模式演示

这个页面模拟了一个风格化的网站（蓝色主题），用来对比两种深色模式方案。

操作说明：点击页面右上角的按钮切换深色/浅色模式。
深色模式下，所有颜色（蓝色、绿色、黄色、红色等）都会根据原色自动计算出对应的深色版本，而不是固定的黑灰配色。

📦 内容卡片

普通卡片

这是一个白色背景的卡片，有浅灰色边框。在深色模式下，它会变成深灰蓝背景。

里面的 inline code 是红色，会变成浅红色。

    💡 提示：这是黄色高亮块，深色模式下会变成深黄色/暗金色。

✅ 成功：这是绿色高亮块，深色模式下会变成深绿色。

📋 表格示例

方案	优点	缺点
固定配色	稳定可控	忽略原页面风格
动态计算	适配任何配色	首次生成略耗时

💻 代码块

// 动态计算深色模式颜色
function convertToDark(color) {
    const hsl = rgbToHsl(color);
    // 背景：亮度翻转并压缩到暗色域
    hsl.l = 100 - hsl.l;  // 翻转
    hsl.l *= 0.25;        // 压缩到深色
    return hslToRgb(hsl);
}

🔗 链接与按钮

这是一个蓝色链接，深色模式下保持蓝色调但变亮。

蓝色按钮红色按钮

📊 核心算法原理

1. 读取原色：用 getComputedStyle 读取每个元素当前的背景色、文字色、边框色。

2. 色彩空间转换：把 RGB 转成 HSL（色相/饱和度/亮度）。

3. 智能映射：

背景色：亮度翻转（浅色→深色），压缩到 5%-25% 暗色域
文字色：深色文字→浅色，浅色文字保持可读
彩色元素：保持色相不变，只调整亮度和饱和度

4. 写回样式：生成 CSS 规则，通过属性选择器匹配原色。