> ## Content Index > Fetch the complete content index at: https://yinguobing.com/blog/llms.txt > Use this file to discover other available public pages before exploring further. # Ghost 主题暗色模式实现指南 - URL: https://yinguobing.com/blog/ghost-theme-dark-mode-guide/ - Published: 2026-06-01T14:41:07.000Z - Updated: 2026-06-01T15:12:13.000Z - Description: 在 Ember 主题中引入暗色模式的完整踩坑过程，总结了两种主流方案及其各自的优劣。 - Author: 小黑 - Tags: Ghost, 前端, 开源 ## 背景 Ghost 官方默认主题 [Source](https://github.com/TryGhost/Source?ref=yinguobing.com) 内置了一套对比度自适应机制，但对于使用 @tryghost/shared-theme-assets 构建的主题（如 Ember），直接套用 Source 的方案会遇到一系列问题。 ## 方案一：全量暗色模式（Class Toggle） ### 思路 新增一个 CSS class（如 html.dark-mode），在其中翻转所有颜色变量，并通过 JavaScript 切换按钮让用户在 Light/Dark/Auto 之间手动选择。 ### 实现 ```css html.dark-mode { --color-white: #1e1e2e; --color-lighter-gray: #262637; --color-light-gray: #2e2e42; --color-mid-gray: #3e3e56; --color-dark-gray: #888; --color-darker-gray: #e0e0e0; --color-primary-text: #e0e0e0; --color-secondary-text: #888; --color-black: #0d0d1a; color-scheme: dark; } ``` 然后为每个受影响的组件写暗色覆盖规则。方案需要大约 **460 行 CSS**。 ### 踩坑 **坑 1：Ghost Portal 按钮显示白色背景** Ghost Portal 的浮动按钮和会员模态框渲染在