Koodo Reader 主题定制:3 处入口改出夜间阅读配色
Koodo Reader 主题定制3 处入口改出夜间阅读配色【免费下载链接】koodo-readerA modern ebook manager and reader with sync and backup capacities for Windows, macOS, Linux, Android, iOS and Web项目地址: https://gitcode.com/GitHub_Trending/koo/koodo-reader白天盯着白底黑字容易累切夜间皮肤后又想让书架跟阅读页保持同一套颜色。Koodo Reader 把外观分成 3 个调节区域应用主题色、阅读背景/文本色、皮肤与自定义样式。跟着本文操作几分钟内就能配出一套深底浅字的夜间阅读方案并让书架与阅读器同步换色。快速上手先切一次夜间皮肤本指南基于 Koodo Reader v2.4.42.4.0 及以上版本均支持这些入口# package.json version: 2.4.4打开顶部设置对话框进入外观页。在外观Appearance一栏点击夜间Night。关闭对话框观察书架和阅读页。界面立即切成深底浅字。夜间皮肤同时把阅读页背景改为深灰底、白字这是后续手动配色的基准状态。给书架换主题色11 个预设加自定义书架和侧边栏的主色调由应用主题色控制与阅读页背景色互不影响。在外观页找到主题色Theme color一行。点击 Default、Blue、Green、Red、Purple、Orange、Pink、Yellow、Violet、Sky、Slate 中任一色点。点击该行末尾的自定义Custom可打开取色盘输入#rrggbb后点确认Confirm。效果确认书架边框、选中项、按钮高亮全部换成新色设置对话框内即时可见。3 分钟配出深底浅字阅读背景这一节完成正文目标把阅读页配成米灰底、暖白字。打开任意一本书进入阅读器点击顶部设置打开设置面板。找到背景色Background color一行点击行首的色点展开取色盘。在下方输入框键入#1F2421按回车应用。在文本色Text color一行的取色盘输入#EDE6D6。关闭取色盘滚动正文确认对比度。效果确认正文变为深底浅字选词、搜索高亮在新配色上依然清晰。这个自定义色会自动追加到色点行末尾下次可直接点选。管理色板与恢复默认删除自定义色色点行末尾的自定义色带一个小叉点击即可移除若删的是当前使用色系统自动回退到白底黑字。恢复默认在背景色行点击清除再点文本色行的清除阅读页回到跟随应用皮肤的默认配色。注意内置的深色背景深灰那格会自动把文本切成白色自己输入的深色背景不触发这条规则所以第 2 步的文本色要手动指定。同步系统外观与自定义 CSS想让主题色跟随系统深浅模式或彻底按自己喜好改样式外观页的外观Appearance栏选择系统System换肤时阅读背景同步跟随。同一页选择系统字体System font更换界面字体。打开自定义应用样式Custom app style开关粘贴 CSS 改圆角、间距、阴影失焦自动保存。常见坑位速查现象处理办法自定义深色背景后文字看不清手动在文本色取色盘输入浅色取色盘输入无反应格式限#rrggbb或rgba(r,g,b,a)删除自定义色后颜色变了当前色被删会回退白底黑字属预期行为切夜间皮肤后自定义背景被覆盖皮肤切换会强制深底白字想保留自定义配色先选浅色或系统书架换了色阅读页没变应用主题色与阅读背景是两套配置需分别调整开发者入口内置色板定义在 src/constants/themeList.tsx背景 4 色、文本 4 色、应用主题 11 色阅读页样式注入逻辑在 src/utils/reader/styleUtil.ts外观页交互实现在 src/containers/settings/appearanceSetting/component.tsx。三处入口对应三个层次应用主题色管书架背景/文本色管正文皮肤与自定义 CSS 管整体氛围。按本文章的步骤调完一轮再回到设置对话框微调取色盘里的色值直到书架、正文、系统外观三处颜色都对上为止。【免费下载链接】koodo-readerA modern ebook manager and reader with sync and backup capacities for Windows, macOS, Linux, Android, iOS and Web项目地址: https://gitcode.com/GitHub_Trending/koo/koodo-reader创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考