0

0

Edge浏览器沉浸式阅读器怎么更改主题色_Edge浏览器个性化护眼背景

P粉602998670

P粉602998670

发布时间:2026-03-18 12:35:35

|

585人浏览过

|

来源于php中文网

原创

可通过五种方法将Edge沉浸式阅读器设为护眼棕褐色主题:一、内置主题切换;二、设为默认主题;三、辅助功能全局覆盖;四、Dark Reader扩展接管;五、手动注入CSS代码。

edge浏览器沉浸式阅读器怎么更改主题色_edge浏览器个性化护眼背景

如果您在使用Edge浏览器沉浸式阅读器时发现默认白底黑字造成视觉疲劳,可针对性地调整其主题色与背景样式以提升阅读舒适度。以下是实现该目标的多种操作路径:

一、通过沉浸式阅读器内置主题切换功能

沉浸式阅读器提供三种预设主题(浅色、深色、棕褐色),直接作用于当前阅读页面内容区域,不依赖扩展或系统级设置,响应迅速且无兼容性风险。

1、在Edge中打开一篇支持沉浸式阅读的网页(如新闻、博客、PDF文档)。

2、点击地址栏右侧的“沉浸式阅读器”图标(书本轮廓+Aa字样)。

3、进入阅读界面后,点击顶部工具栏中的“主题”按钮(调色板图标)。

4、从弹出选项中选择棕褐色,该模式将背景设为柔和豆沙绿(#C7EDCC),文字转为深灰,显著降低蓝光反射强度。

5、若需进一步降低亮度刺激,可改选深色主题,背景变为#1E1E1E,文字为#E0E0E0,适合暗光环境连续阅读。

二、修改沉浸式阅读器默认主题为棕褐色

该方法将棕褐色设为所有后续启用沉浸式阅读器时的初始主题,避免每次手动切换,适用于长期固定护眼需求的用户。

1、确保已处于沉浸式阅读器界面(可通过快捷键Ctrl+Shift+R快速唤出)。

2、点击顶部工具栏“更多选项”(三个垂直点)。

3、选择“阅读偏好设置”。

4、在“主题”下拉菜单中,将默认值由“系统”更改为棕褐色

5、关闭设置面板,下次启动沉浸式阅读器时将自动应用该主题。

三、通过Edge辅助功能全局覆盖阅读器背景色

当沉浸式阅读器主题选项受限或部分网站未触发阅读模式时,此方案利用浏览器辅助功能强制统一页面背景色,覆盖所有HTML渲染层,包括阅读器内部容器。

1、在Edge地址栏输入:edge://settings/accessibility,按回车进入辅助功能设置页。

2、向下滚动至“页面颜色”区域,开启“自定义页面颜色”开关。

3、点击“选择背景颜色”,在拾色器中输入十六进制值:#C7EDCC(标准豆沙绿)。

Jamboss
Jamboss

Jamboss是一款简单的AI音乐生成App,可以一键生成歌曲。

下载

4、将“文本颜色”设为#333333,确保足够对比度但不刺眼。

5、勾选“对沉浸式阅读器应用此设置”(若该选项可见),保存更改。

四、使用Dark Reader扩展接管沉浸式阅读器样式

Dark Reader具备独立CSS注入能力,可绕过沉浸式阅读器原生主题限制,对阅读器界面执行像素级色彩重绘,支持亮度、对比度、滤色三参数联动调节。

1、访问edge://extensions/,启用右上角“开发者模式”。

2、前往Microsoft Edge加载项官网,搜索并安装Dark Reader(官方版本,评分4.8)。

3、安装完成后,点击扩展图标,选择“此站点启用”并切换至“过滤+”模式

4、点击齿轮图标进入设置,在“高级”选项卡中,将“亮度”设为92、“对比度”设为88、“棕褐色滤镜”强度调至65%

5、刷新当前沉浸式阅读器页面,观察背景是否呈现均匀柔和的暖绿色调,且无文字边缘锯齿或图像反色异常。

五、手动注入CSS代码覆盖沉浸式阅读器DOM节点

该方法适用于技术用户,通过Edge开发者工具临时注入定制样式,精准控制阅读器容器背景、行高、字体粗细等细节,不依赖任何外部配置。

1、进入沉浸式阅读器界面,按F12打开开发者工具。

2、切换到“Console”标签页,粘贴以下代码后回车执行:

document.querySelector('body').style.backgroundColor = '#C7EDCC'; document.querySelector('body').style.color = '#333333';

3、若需持久化效果,复制上述代码,进入edge://flags/#enable-developer-tools,启用开发者工具实验标志。

4、重启浏览器,在任意网页按F12,切换至“Sources”→“Overrides”→“Select folder for overrides”,选择本地文件夹并保存为custom-reader.css。

5、将CSS规则写入该文件:body { background-color: #C7EDCC !important; color: #333333 !important; line-height: 1.7 !important; }

相关文章

Edge浏览器
Edge浏览器

Edge浏览器是由Microsoft(微软中国)官方推出的全新一代手机浏览器。Edge浏览器内置强大的搜索引擎,一站搜索全网,搜文字、搜图片,快速识别,帮您找到想要的内容。有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

1759

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

399

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

1047

2025.04.24

console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

420

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

545

2024.05.29

DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

4396

2024.08.14

vsd文件打开方法
vsd文件打开方法

vsd文件打开方法有使用Microsoft Visio软件、使用Microsoft Visio查看器、转换为其他格式等。想了解更多vsd文件相关内容,可以阅读本专题下面的文章。

512

2023.10.30

抖漫入口地址合集
抖漫入口地址合集

本专题整合了抖漫入口地址相关合集,阅读专题下面的文章了解更多详细地址。

109

2026.03.17

多环境下的 Nginx 安装、结构与运维实战
多环境下的 Nginx 安装、结构与运维实战

本专题聚焦多环境下Nginx实战,详解开发、测试及生产环境的差异化安装策略与目录结构规划。深入剖析配置模块化设计、灰度发布流程及跨环境同步机制。结合监控告警、故障排查与自动化运维工具,提供全链路管理方案,助力团队构建灵活、高可用的Nginx服务体系,从容应对复杂业务场景挑战。

13

2026.03.17

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何进行WebSocket调试
如何进行WebSocket调试

共1课时 | 0.1万人学习

TypeScript全面解读课程
TypeScript全面解读课程

共26课时 | 5.2万人学习

前端工程化(ES6模块化和webpack打包)
前端工程化(ES6模块化和webpack打包)

共24课时 | 5.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号