ThinkPHP 默认分页在暗黑模式下“糊成一片”是因为Bootstrap驱动硬编码的浅色class（如.page-link）与暗色背景冲突，导致文字不可见、边框隐形、悬停无反馈；需自定义分页类替换class为中性名（如.pg-link）并配合精准CSS覆盖，同时手动处理aria-current focus样式、当前页强调及disabled状态显示，并包裹外层容器统一控制主题上下文。
ThinkPHP 默认分页输出的 HTML 结构（尤其是 TP6+ 的 Bootstrap 驱动）自带浅色系 class，比如 .page-link、.page-item.active，直接套用暗黑主题 CSS 时容易出现文字不可读、背景与边框混淆、悬停无反馈等问题——不是加个 prefers-color-scheme: dark 就能自动适配的。
为什么默认分页在暗黑模式下会“糊成一片”
TP6 默认使用 think\paginator\driver\Bootstrap 类生成分页 HTML，它硬编码了以下结构和 class：
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="?page=1">1</a></li>
<li class="page-item active"><span class="page-link">2</span></li>
</ul>
</nav>
这些 class 名本身没问题，但 Bootstrap 自带的 CSS 规则（如 .page-link { color: #007bff; background-color: #fff; border-color: #dee2e6; }）在暗色背景下会导致：
• 白底文字在深灰背景上完全看不见
• .active 的浅蓝边框在暗色区几乎隐形
• 悬停时 background-color 仍是白色，形成刺眼高亮
- 别指望靠全局
body.dark .page-link覆盖所有状态——.page-item.active .page-link和:hover的 specificity 很高，容易漏掉 - TP 不会自动根据系统偏好注入
darkclass 到外层容器，得自己加 -
setConfig()只改文案，不碰 class 或结构，对样式适配无效
推荐做法：用自定义分页类 + 精准 CSS 覆盖
不改 vendor，也不依赖模板文件复制；直接新建一个分页驱动类，复用 Bootstrap 结构但剥离其默认样式依赖，让 CSS 完全由你控制。
立即学习“PHP免费学习笔记（深入）”；
- 在
app/paginator/driver/DarkMode.php下创建类，命名空间为app\paginator\driver - 继承
think\Paginator，只重写render()方法，保持原生getLinks()逻辑（页码计算不变） - 把所有
class="page-xxx"改成更中性的class="pg-xxx"，例如：<li class="pg-item"><a class="pg-link">1</a></li> - 在配置中注册：
'type' => 'DarkMode'（TP 会自动拼命名空间）
这样后续 CSS 就能干净地写：
.pg-link {
color: #9ca3af;
background-color: #1f2937;
border: 1px solid #37414f;
}
.pg-link:hover {
background-color: #37414f;
color: #e5e7eb;
}
.pg-item.active .pg-link {
background-color: #3b82f6;
color: white;
border-color: #3b82f6;
}
必须手动处理的三个暗色关键点
即使用了自定义类，以下三处仍需显式干预，否则暗黑模式下交互体验断裂：
-
禁用
aria-current="page"的默认 focus 样式：浏览器对aria-current="page"有内置 focus outline（尤其在深色背景上是亮蓝虚线），需重置：[aria-current="page"]:focus { outline: none; } -
当前页文本不能只靠 background 区分：暗色下纯色块易误判，建议加
font-weight: 600或微调letter-spacing -
禁用
disabled按钮的 opacity 降级：默认opacity: .65在暗色里会让文字发灰难辨，改用color: #6b7280+cursor: not-allowed
最后提醒：别忽略分页外的上下文
分页容器（比如 <nav> 或外层 <div>）如果没加 dark class，它的 background-color、padding、border-radius 等仍可能沿用浅色主题。最稳妥的是在模板里统一包裹一层：<nav class="pagination-nav dark">{$list->render()}</nav>，然后所有分页相关 CSS 都以 .dark .pagination-nav 为前缀，避免污染其他区域。另外，render() 输出的 HTML 是纯字符串，不会自动响应 prefers-color-scheme 媒体查询变化——页面加载后切换系统主题，需要 JS 监听并手动替换 class 或重新渲染。
