把 Koodo Reader 的阅读界面改成夜间或护眼配色三步搞定【免费下载链接】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 的主题设置可以把阅读背景、文字颜色、应用强调色一次调完——内置 20 组预设配色组合一键切换也支持按十六进制值自定义颜色。3 分钟做出第一套顺眼的主题打开任意一本书进入阅读器调出设置面板找到主题区域里面分三行背景色、文字色、Theme预设组合点击护眼 或 黑夜 这类组合卡片阅读画面立即生效夜间用 黑夜深灰底 白字白天长时间阅读用 护眼浅绿底 深绿字预设组合一共 20 组从 羊皮 古卷 到 深林 深海每个卡片就是真实生效后的底色和文字色所见即所得。 应用整体的按钮、链接等强调色是另一套设置设置对话框 → 外观页签 → Theme color共 10 个预设色加自定义和阅读区配色互不影响。原理速览配色其实就是一个数组文件所有内置色值都写在src/constants/themeList.tsx这一个文件里就是两组数组export const backgroundList [ rgba(255,255,255,1), // 白色 rgba(44,47,49,1), // 深色 rgba(233, 216, 188,1), // 米黄 rgba(197, 231, 207,1), // 浅绿 ]; export const textList [ rgba(0,0,0,1), rgba(255,255,255,1), rgba(89, 68, 41,1), rgba(54, 80, 62,1), ];设置面板里第一排 4 个背景色圆点、第二排 4 个文字色圆点全部来自这两个数组。点击某个圆点组件做的事只有两件把色值写进本地配置ConfigService.setReaderConfig然后触发书籍重新渲染所以切换是即时的不用重启应用。预设组合卡片则是另一组背景 文字的配对数据定义在核心库 kookit 的PresetThemeList里一次点击同时改两个值避免只改了底色、字色被落下的尴尬。深色背景还有一处隐式保护在src/components/readerSettings/themeList/component.tsx里if (index 1) { ConfigService.setReaderConfig(textColor, rgba(255,255,255,1)); }人话解释只要你点了第二个圆点深灰背景系统就强制把文字改成白色防止出现深灰底配深灰字这种根本看不清的组合。深度玩法一自定义任意颜色效果预设 4 个色点不够用时可以精确调出任意颜色比如米黄 RGB(233, 216, 188) 配深棕字的茶棕色。操作在背景色一行点击最左侧带 图标的圆圈展开色板拖动色板选色或在输入框里键入#e9d8bc后按回车确认该颜色会自动追加成色排里的新圆点文字色行同理再补一个#594429的深棕注意新增圆点悬停时会出现小 × 号点击即删除该自定义色如果删掉的是当前正在使用的色点背景会自动退回白色、文字退回黑色。深度玩法二用自定义 CSS 改造整个应用效果预设和自定义颜色只能改阅读区的色值想改应用本身比如书架卡片圆角、边栏配色外观页签底部有个 Custom app style 开关。操作把Custom app style 开关打开在下方文本框写 CSS光标离开文本框后自动保存并应用样式由src/containers/settings/appearanceSetting/component.tsx中的applyCustomSystemCSS注入。注意这段 CSS 作用于整个应用的所有页面选择器尽量写具体不想用了直接关掉开关即可恢复默认外观。踩坑记录自定义颜色后深色底配深字根本看不清原因自动改白字的保护只针对 4 个预设色点自定义色点是按你给的值原样写入的系统不替你校验对比度。 解法背景和文字色分开调先选底色再挑一个对比明显的字色已经调乱了点背景色或文字色行右侧的Clear清掉回到默认值。色号输入了但不生效过一会儿输入框又变回旧值原因输入框只认#rrggbb和rgba(r,g,b,a)两种格式#abc缩写或英文颜色名会被丢弃。 解法按完整格式写全回车确认输入框颜色同步变化才算成功。自定义 CSS 写了没反应原因一是 Custom app style 开关没打开二是保存时机是失去焦点blur而不是实时预览光输入不离开文本框不会应用。 解法确认开关为打开状态写完 CSS 后点击文本框外部任意位置触发保存。配色相关的源码集中在src/constants/themeList.tsx和阅读器设置面板想加新预设色往数组里添一行即可。挑一组顺眼的底色和字色把阅读界面调成自己的样子。【免费下载链接】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），仅供参考 把 Koodo Reader 的阅读界面改成夜间或护眼配色：三步搞定
把 Koodo Reader 的阅读界面改成夜间或护眼配色三步搞定【免费下载链接】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 的主题设置可以把阅读背景、文字颜色、应用强调色一次调完——内置 20 组预设配色组合一键切换也支持按十六进制值自定义颜色。3 分钟做出第一套顺眼的主题打开任意一本书进入阅读器调出设置面板找到主题区域里面分三行背景色、文字色、Theme预设组合点击护眼 或 黑夜 这类组合卡片阅读画面立即生效夜间用 黑夜深灰底 白字白天长时间阅读用 护眼浅绿底 深绿字预设组合一共 20 组从 羊皮 古卷 到 深林 深海每个卡片就是真实生效后的底色和文字色所见即所得。 应用整体的按钮、链接等强调色是另一套设置设置对话框 → 外观页签 → Theme color共 10 个预设色加自定义和阅读区配色互不影响。原理速览配色其实就是一个数组文件所有内置色值都写在src/constants/themeList.tsx这一个文件里就是两组数组export const backgroundList [ rgba(255,255,255,1), // 白色 rgba(44,47,49,1), // 深色 rgba(233, 216, 188,1), // 米黄 rgba(197, 231, 207,1), // 浅绿 ]; export const textList [ rgba(0,0,0,1), rgba(255,255,255,1), rgba(89, 68, 41,1), rgba(54, 80, 62,1), ];设置面板里第一排 4 个背景色圆点、第二排 4 个文字色圆点全部来自这两个数组。点击某个圆点组件做的事只有两件把色值写进本地配置ConfigService.setReaderConfig然后触发书籍重新渲染所以切换是即时的不用重启应用。预设组合卡片则是另一组背景 文字的配对数据定义在核心库 kookit 的PresetThemeList里一次点击同时改两个值避免只改了底色、字色被落下的尴尬。深色背景还有一处隐式保护在src/components/readerSettings/themeList/component.tsx里if (index 1) { ConfigService.setReaderConfig(textColor, rgba(255,255,255,1)); }人话解释只要你点了第二个圆点深灰背景系统就强制把文字改成白色防止出现深灰底配深灰字这种根本看不清的组合。深度玩法一自定义任意颜色效果预设 4 个色点不够用时可以精确调出任意颜色比如米黄 RGB(233, 216, 188) 配深棕字的茶棕色。操作在背景色一行点击最左侧带 图标的圆圈展开色板拖动色板选色或在输入框里键入#e9d8bc后按回车确认该颜色会自动追加成色排里的新圆点文字色行同理再补一个#594429的深棕注意新增圆点悬停时会出现小 × 号点击即删除该自定义色如果删掉的是当前正在使用的色点背景会自动退回白色、文字退回黑色。深度玩法二用自定义 CSS 改造整个应用效果预设和自定义颜色只能改阅读区的色值想改应用本身比如书架卡片圆角、边栏配色外观页签底部有个 Custom app style 开关。操作把Custom app style 开关打开在下方文本框写 CSS光标离开文本框后自动保存并应用样式由src/containers/settings/appearanceSetting/component.tsx中的applyCustomSystemCSS注入。注意这段 CSS 作用于整个应用的所有页面选择器尽量写具体不想用了直接关掉开关即可恢复默认外观。踩坑记录自定义颜色后深色底配深字根本看不清原因自动改白字的保护只针对 4 个预设色点自定义色点是按你给的值原样写入的系统不替你校验对比度。 解法背景和文字色分开调先选底色再挑一个对比明显的字色已经调乱了点背景色或文字色行右侧的Clear清掉回到默认值。色号输入了但不生效过一会儿输入框又变回旧值原因输入框只认#rrggbb和rgba(r,g,b,a)两种格式#abc缩写或英文颜色名会被丢弃。 解法按完整格式写全回车确认输入框颜色同步变化才算成功。自定义 CSS 写了没反应原因一是 Custom app style 开关没打开二是保存时机是失去焦点blur而不是实时预览光输入不离开文本框不会应用。 解法确认开关为打开状态写完 CSS 后点击文本框外部任意位置触发保存。配色相关的源码集中在src/constants/themeList.tsx和阅读器设置面板想加新预设色往数组里添一行即可。挑一组顺眼的底色和字色把阅读界面调成自己的样子。【免费下载链接】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），仅供参考