Skip to content

feat: add unified dark mode with system preference detection #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Mou7s wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: add unified dark mode with system preference detection #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
10ffa0c
feat: add dark mode with system preference detection
Mou7s Jul 6, 2026
10fc41b
fix: dark mode for plan-usage, relays, relay-detect pages
Mou7s Jul 6, 2026
be95345
feat: add unified dark mode across all pages
Mou7s Jul 6, 2026
bd24019
refine: dark mode styles and plan-usage help assets
Mou7s Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,3 +101,4 @@ assets/image*.png
# Preview files
.preview
.codegraph
serve.ts
1 change: 1 addition & 0 deletions articles/model_comparisons/20260604/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="description" content="基于 Artificial Analysis 2026年6月基准测试，围绕 Coding 指数与 Agentic 智能指数对 GPT-5.5、Claude Opus 4.8、Qwen3.7 Max、DeepSeek V4 Pro、Kimi K2.6 等 19 款主流大模型横向评测，附选型建议。" />
<link rel="icon" href="../../../favicon.ico?v=260515" type="image/x-icon" />
<link rel="stylesheet" href="../../../styles/shared.css?v=260515" />
<link rel="stylesheet" href="../../../styles/dark-mode.css?v=260701" />
<style>
body.article-page {
font-size: 17px;
Expand Down
1 change: 1 addition & 0 deletions articles/model_comparisons/20260617/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="description" content="基于 Artificial Analysis 2026年6月基准测试，围绕 Coding 指数与 Agentic 智能指数对 GPT-5.5、Claude Opus 4.8、Qwen3.7 Max、DeepSeek V4 Pro、Kimi K2.6 等 19 款主流大模型横向评测，附选型建议。" />
<link rel="icon" href="../../../favicon.ico?v=260515" type="image/x-icon" />
<link rel="stylesheet" href="../../../styles/shared.css?v=260515" />
<link rel="stylesheet" href="../../../styles/dark-mode.css?v=260701" />
<style>
body.article-page {
font-size: 17px;
Expand Down
1 change: 1 addition & 0 deletions articles/models_comparition_20260513/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<title>国产大模型核心能力评测：智谱、DeepSeek、MiniMax、Kimi、千问 Qwen、小米 MiMo</title>
<link rel="icon" href="../../favicon.ico?v=260418" type="image/x-icon" />
<link rel="stylesheet" href="../../styles/shared.css?v=260515" />
<link rel="stylesheet" href="../../styles/dark-mode.css?v=260701" />
<style>
/* 长文阅读页：沿用站点色板，单独调字号与版心 */
body.article-page {
Expand Down
1 change: 1 addition & 0 deletions articles/news/20260602_minimax_m3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="description" content="MiniMax-M3 全面上线：原生多模态、Ultra 官方月 Token 上限约 71 亿（7100M）、Plus/Max 官方池约 6 亿/18 亿、M2.7-highspeed 全档可调。公开订阅已升级 Token Plan，站内仍按 Coding Plan 对比展示。" />
<link rel="icon" href="../../../favicon.ico?v=260515" type="image/x-icon" />
<link rel="stylesheet" href="../../../styles/shared.css?v=260515" />
<link rel="stylesheet" href="../../../styles/dark-mode.css?v=260701" />
<style>
body.article-page {
font-size: 17px;
Expand Down
1 change: 1 addition & 0 deletions articles/plan_comparison_20260519/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="description" content="2026年5月AI编程订阅市场全解析：智谱AI、MiniMax、Kimi、字节方舟、阿里百炼等25大平台Coding Plan对比，价格、限购、模型能力一目了然。" />
<link rel="icon" href="../../favicon.ico?v=260418" type="image/x-icon" />
<link rel="stylesheet" href="../../styles/shared.css?v=260515" />
<link rel="stylesheet" href="../../styles/dark-mode.css?v=260701" />
<style>
/* 长文阅读页：沿用站点色板，单独调字号与版心 */
body.article-page {
Expand Down
1 change: 1 addition & 0 deletions articles/plan_comparisons/20260603/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="description" content="2026年6月主流 AI Coding Plan 与 Token Plan 全面对比，覆盖智谱AI、MiniMax、Kimi、DeepSeek、字节方舟、阿里百炼等 25 大平台的能力、价格、用量与选型建议。" />
<link rel="icon" href="../../../favicon.ico?v=260515" type="image/x-icon" />
<link rel="stylesheet" href="../../../styles/shared.css?v=260515" />
<link rel="stylesheet" href="../../../styles/dark-mode.css?v=260701" />
<style>
body.article-page {
font-size: 17px;
Expand Down
1 change: 1 addition & 0 deletions articles/plan_comparisons/20260628/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="description" content="2026年6月28日主流 AI Coding Plan 与 Token Plan 全面对比，覆盖智谱 GLM-5.2、MiniMax、Kimi-K2.7-Code、DeepSeek、字节方舟促销、阿里百炼等平台的能力、价格、限购状态与选型建议。" />
<link rel="icon" href="../../../favicon.ico?v=260515" type="image/x-icon" />
<link rel="stylesheet" href="../../../styles/shared.css?v=260515" />
<link rel="stylesheet" href="../../../styles/dark-mode.css?v=260701" />
<style>
body.article-page {
font-size: 17px;
Expand Down
Binary file modified assets/plan-usage-help/cache-hit-tokens.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/plan-usage-help/model.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/plan-usage-help/plan.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/plan-usage-help/read-tokens.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/plan-usage-help/request-count.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/plan-usage-help/usage-percent.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/plan-usage-help/vendor.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/plan-usage-help/window-start.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/plan-usage-help/write-tokens.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 7 additions & 4 deletions coding-agents.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title id="pageTitle"></title>
<link rel="icon" href="/favicon.ico?v=260418" type="image/x-icon">
<link rel="stylesheet" href="styles/shared.css?v=260515">
<script src="scripts/shared.js?v=260512"></script>
<link rel="icon" href="/favicon.ico?v=260710" type="image/x-icon">
<link rel="stylesheet" href="styles/shared.css?v=260710">
<link rel="stylesheet" href="styles/dark-mode.css?v=260710">
<script src="scripts/shared.js?v=260710"></script>
<style>
html { scroll-behavior: smooth; }

Expand Down Expand Up @@ -904,6 +906,7 @@
display: none;
}
}

</style>
</head>
<body>
Expand Down
15 changes: 9 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="baidu-site-verification" content="codeva-LiaxYnxu2a" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="description" content="国内29大主流AI平台Coding Plan套餐对比工具，涵盖智谱AI、字节方舟、阿里百炼、MiniMax、Kimi、小米Mimo、讯飞星火、百度千帆、腾讯云、京东云、阶跃星辰、无问芯穹、联通云、天翼云、移动云等平台，价格、模型、请求数等详细信息，支持筛选排序，帮您选到最划算的套餐。">
<title>Coding Plan 对比工具 - 国内29大主流AI平台套餐对比 智谱、Kimi、MiniMax、阿里百炼Qwen、小米Mimo、讯飞星火、阶跃星辰、无问芯穹、联通云、天翼云、移动云</title>
<link rel="icon" href="/favicon.ico?v=260610" type="image/x-icon">
<link rel="stylesheet" href="styles/shared.css?v=260610">
<link rel="stylesheet" href="styles/plan-usage.css?v=260610">
<link rel="icon" href="/favicon.ico?v=260710" type="image/x-icon">
<link rel="stylesheet" href="styles/shared.css?v=260710">
<link rel="stylesheet" href="styles/dark-mode.css?v=260710">
<link rel="stylesheet" href="styles/plan-usage.css?v=260710">
<style>
.header .models {
color: var(--text-tertiary);
Expand Down Expand Up @@ -2162,6 +2164,7 @@
display: none;
}
}

</style>
</head>
<body>
Expand Down Expand Up @@ -7636,8 +7639,8 @@ <h3 class="recommendation-group-title">${title}</h3>
});

</script>
<script src="scripts/shared.js?v=260610"></script>
<script src="scripts/shared.js?v=260710"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="scripts/plan-usage-chart.js?v=260617"></script>
<script src="scripts/plan-usage-chart.js?v=260710"></script>
</body>
</html>
23 changes: 13 additions & 10 deletions plan-usage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<title id="pageTitle"></title>
<link rel="icon" href="/favicon.ico?v=260418" type="image/x-icon">
<link rel="stylesheet" href="styles/shared.css?v=260515">
<link rel="stylesheet" href="styles/dark-mode.css?v=260701">
<script src="scripts/plan-usage-config.local.js"></script>
<script src="scripts/plan-usage-config.js"></script>
<script src="scripts/shared.js?v=260512"></script>
Expand Down Expand Up @@ -584,22 +585,24 @@

.segmented-control {
display: inline-flex;
padding: 3px;
gap: 2px;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
border-radius: 999px;
background: var(--bg-primary);
}

.segment-btn {
padding: 10px 16px;
padding: 8px 18px;
border: none;
border-radius: 999px;
background: transparent;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
color: var(--text-secondary);
transition: background 0.15s, color 0.15s;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.segment-btn:hover:not(:disabled) {
Expand All @@ -608,12 +611,13 @@
}

.segment-btn + .segment-btn {
border-left: 1px solid var(--border-color);
border-left: none;
}

.segment-btn.active {
background: rgba(99, 102, 241, 0.12);
color: var(--accent-primary);
background: var(--accent-primary);
color: var(--bg-primary);
box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28);
}

.segment-btn:disabled {
Expand Down Expand Up @@ -1101,7 +1105,6 @@
.form-input,
.form-textarea,
.form-select-trigger,
.segmented-control,
.secondary-btn,
.pagination-btn {
background: rgba(255, 255, 255, 0.72);
Expand All @@ -1125,8 +1128,7 @@
}

.multi-select-option:hover,
.single-select-option.selected,
.segment-btn.active {
.single-select-option.selected {
background: rgba(15, 118, 110, 0.1);
color: #154d77;
}
Expand Down Expand Up @@ -1202,6 +1204,7 @@
grid-template-columns: 1fr;
}
}

</style>
</head>
<body>
Expand Down
11 changes: 7 additions & 4 deletions relay-detect.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title id="pageTitle"></title>
<link rel="icon" href="/favicon.ico?v=260418" type="image/x-icon">
<link rel="stylesheet" href="styles/shared.css?v=260515">
<link rel="icon" href="/favicon.ico?v=260710" type="image/x-icon">
<link rel="stylesheet" href="styles/shared.css?v=260710">
<link rel="stylesheet" href="styles/dark-mode.css?v=260710">
<script src="scripts/relay-detect-config.local.js"></script>
<script src="scripts/relay-detect-config.js"></script>
<script src="scripts/shared.js?v=260512"></script>
<script src="scripts/shared.js?v=260710"></script>
<style>
html { scroll-behavior: smooth; }

Expand Down Expand Up @@ -636,6 +638,7 @@
grid-template-columns: 1fr;
}
}

</style>
</head>
<body>
Expand Down
11 changes: 7 additions & 4 deletions relays.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>中转站对比</title>
<link rel="icon" href="/favicon.ico?v=260418" type="image/x-icon">
<link rel="stylesheet" href="styles/shared.css?v=260515">
<link rel="icon" href="/favicon.ico?v=260710" type="image/x-icon">
<link rel="stylesheet" href="styles/shared.css?v=260710">
<link rel="stylesheet" href="styles/dark-mode.css?v=260710">
<style>
/* relays.html 覆盖 shared.css 的差异值 */
html { scroll-behavior: smooth; }
Expand Down Expand Up @@ -1205,6 +1207,7 @@
grid-template-columns: 1fr;
}
}

</style>
</head>
<body>
Expand Down Expand Up @@ -2693,6 +2696,6 @@ <h4>${escapeHtml(getRelayPageText('sections.detailDescriptionTitle'))}</h4>
});

</script>
<script src="scripts/shared.js?v=260512"></script>
<script src="scripts/shared.js?v=260710"></script>
</body>
</html>
52 changes: 51 additions & 1 deletion scripts/shared.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* ── codingplan 公共工具函数 ── */
/* ── codingplan 公共工具函数 ── */

function escapeHtml(text) {
if (text === null || text === undefined) return '';
Expand Down Expand Up @@ -160,13 +160,63 @@ function renderPageNav(target, options = {}) {
<span class="toggle-slider"></span>
</label>
</div>
<div class="settings-toggle-row" style="margin-top:10px">
<label for="darkModeToggle">深色模式</label>
<label class="toggle-switch">
<input type="checkbox" id="darkModeToggle">
<span class="toggle-slider"></span>
</label>
</div>
</div>
</div>
</div>
`;
return true;
}

// 深色模式设置
(function () {
function initDarkMode() {
const toggle = document.getElementById('darkModeToggle');
if (!toggle) return;

const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
const saved = localStorage.getItem('darkMode');

function applyDarkMode(on) {
// 同时设 body.classList 与 :root[data-theme]，
// 兼容老 CSS (body.dark-mode) 与新 CSS (:root[data-theme=dark])
document.body.classList.toggle('dark-mode', on);
document.documentElement.dataset.theme = on ? 'dark' : 'light';
toggle.checked = on;
}

if (saved !== null) {
applyDarkMode(saved === '1');
} else {
applyDarkMode(darkQuery.matches);
}

toggle.addEventListener('change', function () {
applyDarkMode(toggle.checked);
localStorage.setItem('darkMode', toggle.checked ? '1' : '0');
});

darkQuery.addEventListener('change', function (e) {
if (localStorage.getItem('darkMode') === null) {
applyDarkMode(e.matches);
}
});
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDarkMode, { once: true });
return;
}

initDarkMode();
})();

// 超宽屏设置
(function () {
function initUltraWideSettings() {
Expand Down
Loading