在Win11版Codex中实现稳定暗黑模式需用CSS变量+data-theme类+媒体查询协同控制：先定义:root变量，再用html[data-theme="dark"]覆盖，媒体查询仅兜底初始状态，JS读取localStorage优先级高于系统偏好并持久化。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在 Win11 版 Codex 应用中实现稳定、可持久的暗黑模式切换，必须绕过系统级主题强制接管，用 CSS 变量 + data-theme 类 + 媒体查询三者协同控制，否则手动切换后刷新即失效，或与 Windows 系统偏好冲突导致颜色错乱。
初始化 CSS 变量体系
在项目根样式表（如 main.css）顶部定义语义化变量，所有颜色值必须来自变量，禁止硬编码 #121212 或 #ffffff。
复制以下代码到 :root 块内：
:root {
--bg-primary: #ffffff;
--text-primary: #1a1a1a;
--border-secondary: #e0e0e0;
--card-bg: #f8f9fa;
--accent: #007acc;
}
立即学习“前端免费学习笔记（深入）”；
这一步不能省略，后续所有样式都依赖这些变量，漏定义一个，对应组件就会 fallback 到浏览器默认色。
声明暗黑变量并绑定 data-theme
在同一个 CSS 文件中，紧接着 :root 块写入暗色覆盖规则。注意：必须用 html[data-theme="dark"] 选择器，不能只用 .dark 或 body.dark —— 否则无法穿透 Shadow DOM，Codex 内部 Web Component 将不响应。
html[data-theme="dark"] {
--bg-primary: #121212;
--text-primary: #e0e0e0;
--border-secondary: #333;
--card-bg: #1e1e1e;
--accent: #4dabf7;
}
【必须同步设置 html 元素的 data-theme 属性，否则该规则完全不生效】
配置媒体查询兜底初始状态
用户首次访问时，应按系统偏好自动启用暗黑模式。但 media query 仅作初始加载兜底，不可用于主动切换逻辑。
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg-primary: #121212;
--text-primary: #e0e0e0;
--border-secondary: #333;
--card-bg: #1e1e1e;
--accent: #4dabf7;
}
}
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
这里用了 :root:not([data-theme="light"]) 而不是单纯 :root，是为了避免用户手动切到浅色后，系统偏好仍是 dark 导致覆盖失败——这个否定条件能确保手动选择优先级高于系统设置。
注入主题切换 JS 并持久化
第一步：读取 localStorage 中保存的主题值，优先级高于系统偏好。
const savedTheme = localStorage.getItem('codex-theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
第二步：设置 HTML data-theme 属性，并写入 localStorage。
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('codex-theme', theme);
}
第三步：根据优先级链决定初始主题。
if (savedTheme) {
setTheme(savedTheme);
} else if (systemPrefersDark) {
setTheme('dark');
} else {
setTheme('light');
}
第四步：绑定切换按钮事件（假设按钮 id 为 theme-toggle）。
document.getElementById('theme-toggle').addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
setTheme(current === 'dark' ? 'light' : 'dark');
});
第五步：监听系统偏好变更，仅更新 localStorage，不覆盖用户手动选择。
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.getItem('codex-theme')) {
localStorage.setItem('codex-theme', e.matches ? 'dark' : 'light');
}
});
