Safari浏览器如何设置阅读背景_Safari设置阅读器背景方法【技巧】

秋辰同学_6137

秋辰同学_6137

2026-05-23

649人浏览

原创

可通过safari阅读器aa面板选预设色、系统颜色滤镜叠加、stylus扩展注入css、启用系统深色模式或高级设置全局样式表五种方式调整阅读器背景色。

safari浏览器如何设置阅读背景_safari设置阅读器背景方法【技巧】

如果您在使用 Safari 浏览器阅读文章时希望调整阅读器视图的背景颜色,以适配不同光照环境或缓解视觉疲劳,则可通过 Safari 内置的阅读器样式设置直接实现。以下是多种可操作的配置方式:

一、通过阅读器视图内置AA面板选择预设背景色

阅读器模式仅在检测到结构化正文内容时自动激活,其背景色调节功能必须在此模式下才能调用;系统会记住您最后选择的颜色并在后续阅读中默认应用。

1、在Safari中打开一篇支持阅读器模式的新闻或博客类网页。

2、点击地址栏左侧出现的书本形状图标,进入阅读器视图。

3、点击页面顶部中央位置的AA字体设置按钮,展开文本样式控制面板。

4、在面板底部找到背景颜色区域,轻点白色色块启用明亮模式背景。

5、轻点米黄色色块启用护眼纸张色背景,模拟纸质书质感。

6、轻点黑色色块启用深色模式背景,文字自动转为白色,适用于暗光环境。

二、组合系统颜色滤镜与阅读器模式生成自定义护眼绿

系统级“颜色滤镜”可对整个Safari渲染输出做实时色彩映射,配合阅读器模式剥离HTML结构后仅渲染正文,二者叠加可规避CSS冲突,生成稳定、无闪烁的柔和绿底。

1、打开“系统设置→辅助功能→显示→颜色滤镜”,启用颜色滤镜开关。

2、在滤镜类型中选择色调,将色调滑块设为82,饱和度设为115,亮度设为205。

3、访问支持阅读器模式的网页,点击地址栏左侧阅读器图标进入纯净视图。

4、点击地址栏右侧AA按钮,在背景选项中选择米白,此时系统滤镜将把米白基底实时映射为柔和豆沙绿。

三、使用Stylus扩展注入CSS强制重写阅读器背景

Stylus扩展支持按域名或全局注入CSS规则,可精准控制阅读器视图中.reader类容器的背景色,绕过系统限制直接修改渲染层,适用于需精确指定HEX值的场景。

1、前往Mac App Store或Safari扩展库安装Stylus扩展,并在“Safari→设置→扩展”中启用。

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载

2、点击Safari工具栏Stylus图标,选择“管理样式”→“创建新样式”。

3、在样式名称栏输入“阅读器豆沙绿”,目标网址填写*reader*或留空(作用于全部网站)。

4、在CSS代码框中粘贴以下内容:body.reader { background-color: #C7EDCC !important; color: #2E4F4F !important; }

5、点击“保存”,刷新当前阅读器页面,检查背景是否呈现指定豆沙绿色。

四、启用系统深色模式间接统一阅读器界面层级

当系统级深色外观开启后,Safari工具栏、边框等非内容区域将同步变为深灰或黑色,虽不改变阅读器内文背景色本身,但可统一整体视觉层级,增强沉浸感。

1、从主屏幕下滑调出控制中心,长按右上角亮度调节区域。

2、点击左上角的深色模式开关图标,开启全局深色外观。

3、返回Safari并重新进入阅读器模式,观察工具栏、页眉页脚等非正文区域是否变为深灰或黑色。

4、若需保持正文背景为米黄但界面变暗,此方式可单独启用,无需更改阅读器内建背景选项。

五、通过高级设置注入全局CSS样式表覆盖所有网页背景

该方法不依赖外部插件,直接利用Safari“高级”设置中的自定义样式表功能,强制重写页面body及.reader容器背景色,对所有网页生效且稳定性高。

1、新建纯文本文件,命名为safari-eyecare.css,用文本编辑器输入以下内容:body, body.reader { background-color: #C7EDCC !important; color: #333333 !important; }

2、将该文件保存至用户文档目录下,例如“/Users/您的用户名/Documents/css/”。

3、打开Safari,选取“Safari”→“设置”,切换到“高级”标签页。

4、勾选“在菜单栏中显示‘开发’菜单”,然后点击底部“样式表”下拉框,选择“其他…”,定位并选中刚保存的safari-eyecare.css文件。

5、关闭设置窗口,刷新任意网页,包括阅读器视图,背景将立即变为#C7EDCC豆沙绿,文字保持深灰可读。

相关专题

更多
Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

2026.10.15

0

20

MySQL 忘记密码怎么办
MySQL 忘记密码怎么办

MySQL忘记密码专题汇集不同版本与系统下的root密码重置方法,覆盖MySQL 5.7、8.0、Mac、Linux及本地集成环境,并提示恢复权限与重新登录的检查步骤。

2026.10.15

0

18

Vue.js 中 ref 和 reactive 的区别
Vue.js 中 ref 和 reactive 的区别

Vue.js中ref和reactive的区别专题汇集两种响应式API的定义、访问方式、对象解构、侦听与性能取舍等文章,帮助结合实际状态类型选择合适写法。

2026.10.15

0

20

VS Code 怎么配置开发环境
VS Code 怎么配置开发环境

VS Code开发环境专题汇集编辑器安装、语言扩展、编译器、解释器、终端和调试配置文章,覆盖Java、Python、C++和PHP等常见语言的入门设置。

2026.10.15

0

18

C++ 开发环境怎么搭建
C++ 开发环境怎么搭建

C++开发环境专题汇集Windows、Linux下的编译器与IDE安装配置教程,涵盖GCC、Clang、Visual Studio、CLion和VS Code,以及编译运行首个程序的步骤。

2026.10.15

0

19

Python 虚拟环境是什么
Python 虚拟环境是什么

Python虚拟环境专题介绍项目依赖隔离的作用,汇集venv与uv创建、激活、退出及解释器切换的相关文章,并覆盖Windows、Linux和VS Code中的常见配置问题。

2026.10.15

0

15

Python 怎么安装并配置环境变量
Python 怎么安装并配置环境变量

Python安装与环境变量配置专题汇集Windows、macOS和Linux的安装步骤、PATH设置、pip配置及常见报错排查文章,帮助完成解释器安装并验证命令行可以正常运行。

2026.10.15

0

15

PHP 连接 MySQL 失败怎么办
PHP 连接 MySQL 失败怎么办

PHP连接MySQL失败专题汇集PDO与MySQLi扩展配置、账号权限、主机端口、套接字和认证方式等排查文章,覆盖连接报错、密码变更与容器环境配置,帮助按错误提示定位原因并修复。

2026.10.15

0

18

PHP 表单提交后如何获取数据
PHP 表单提交后如何获取数据

PHP表单提交后如何获取数据专题汇集HTML表单提交、GET与POST接收、$_POST和$_GET读取、跨文件传值、单选与下拉字段获取,以及空值和接收失败排查等文章,帮助新手完成从提交到处理的完整流程。

2026.10.15

0

20

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
phpMyAdmin 常见问题
phpMyAdmin 常见问题

共0课时 | 0人学习

uni-app快速上手
uni-app快速上手

共0课时 | 0人学习