使用link标签的media属性按需加载主题，结合CSS自定义变量与本地存储，实现轻量、快速、可维护的多主题切换方案。1. 将不同主题样式拆分为独立文件，初始仅加载匹配系统偏好或用户选择的主题；2. 未启用主题设置media="not all"避免加载；3. 用户切换时通过JavaScript动态修改目标link的media为"all"以激活；4. 各主题CSS文件仅定义变量如--primary-color，主样式统一使用var()引用；5. 优先读取localStorage中的用户选择，无则回退至prefers-color-scheme；6. 手动切换后同步保存至localStorage；7. 对高频主题使用rel="preload"预加载资源但不立即应用；8. 实现性能优化与体验平衡，避免主CSS体积膨胀。
实现多套主题切换时，如果把所有主题样式打包进主 CSS 文件，会导致体积膨胀、加载变慢。通过 结合 CSS 自定义属性、CSS @media 查询与 link 标签的按需加载机制，可以有效解决这一问题，做到轻量、快速、可维护的主题切换。
使用 link + media 控制主题样式的按需加载
浏览器支持通过 link 标签的 media 属性控制资源是否加载。我们可以利用这一点，为不同主题创建独立的 CSS 文件，并通过动态修改 media 值来“开启”或“关闭”某套主题样式。
例如：
css" media="(prefers-color-scheme: light)">初始状态下，只让系统偏好匹配的主题生效，其他主题设置 media="not all"（不加载）。当用户手动切换主题时，通过 JavaScript 动态修改对应 link 的 media 值：
立即学习“前端免费学习笔记（深入）”；
function switchTheme(theme) {document.getElementById('theme-blue').media = theme === 'blue' ? 'all' : 'not all';
document.getElementById('theme-green').media = theme === 'green' ? 'all' : 'not all';
}
这样只有被激活的主题才会被浏览器加载和解析，未启用的主题不会影响性能。
配合 CSS 自定义属性统一管理主题变量
每个主题 CSS 文件只需定义自己的颜色、字体等变量，结构保持一致：
/* theme-blue.css */:root {
--primary-color: #007bff;
--bg-color: #f0f8ff;
--text-color: #333;
}
/ theme-green.css /
:root {
--primary-color: #28a745;
--bg-color: #f8fff0;
--text-color: #222;
}
主样式文件中使用这些变量：
body {
background: var(--bg-color);
color: var(--text-color);
}
.button {
border: 1px solid var(--primary-color);
}
这样更换主题只是替换变量值，无需改动结构样式，维护更简单。
支持用户偏好与持久化选择
优先读取用户系统偏好（如深色模式），但允许手动覆盖并记住选择：
// 页面加载时检测用户偏好和本地存储const saved = localStorage.getItem('theme');
if (saved) {
switchTheme(saved);
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
switchTheme('dark');
}
用户点击切换按钮后，调用 switchTheme() 并保存选择：
switchTheme('blue');
localStorage.setItem('theme', 'blue');
}
预加载关键主题提升体验
为避免切换时出现延迟，可对常用主题使用 rel="preload" 提前加载：
虽然预加载了资源，但仍通过 media="not all" 控制实际应用时机，兼顾速度与性能。
基本上就这些。通过分离主题文件、利用 media 控制加载、结合 CSS 变量和本地存储，能实现灵活、高效的主题切换方案，避免样式臃肿和重复加载。
