动态切换多主题样式需通过JavaScript精准替换id="theme-css"的link标签href属性，预加载CSS避免闪动，监听onload/onerror处理加载状态，并用localStorage保存用户偏好实现自动应用。
动态切换多主题样式，核心是通过 JavaScript 替换页面中 <link> 标签的 href 属性，指向不同的 CSS 文件。关键在于准确获取目标 link 元素、安全替换路径，并确保样式立即生效。
定位用于主题切换的 link 标签
推荐为该 link 添加唯一标识（如 id="theme-css" 或 class="theme-link"），避免误操作其他样式表：
<link id="theme-css" rel="stylesheet" href="css/light.css">
这样可通过 document.getElementById('theme-css') 精准控制，比用 getElementsByTagName('link')[0] 更可靠。
预加载主题 CSS 文件（可选但推荐）
直接切换 href 时，浏览器会重新请求并解析新 CSS，可能造成短暂闪动或延迟。可在页面加载时预加载常用主题：
立即学习“前端免费学习笔记（深入）”；
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- 用
<link rel="preload" as="style" href="css/dark.css">提前触发下载（不应用） - 或用
new CSSStyleSheet()+fetch()预加载并缓存 CSS 文本（现代浏览器支持）
预加载后切换仅需注入已加载内容，响应更快、无网络等待。
执行切换并处理加载状态
切换时建议添加简单状态反馈，避免用户重复点击：
- 切换前设
link.disabled = true，防止多次触发 - 更新
href后监听link.onload和link.onerror，失败时回退或提示 - 示例代码片段：
const themeLink = document.getElementById('theme-css');
themeLink.disabled = true;
themeLink.href = 'css/dark.css';
themeLink.onload = () => themeLink.disabled = false;
themeLink.onerror = () => {
alert('主题加载失败');
themeLink.href = 'css/light.css';
themeLink.disabled = false;
};
配合 localStorage 记住用户偏好
用户切换后保存选择，下次访问自动应用：
- 切换成功后执行
localStorage.setItem('preferred-theme', 'dark') - 页面初始化时读取：
const saved = localStorage.getItem('preferred-theme');，再设置对应 href - 注意：首次访问无记录时，可按系统偏好（
window.matchMedia('(prefers-color-scheme: dark)')） fallback
不复杂但容易忽略细节，关键是精准控制 link、兼顾加载体验和用户状态延续。
