浏览器切换为深色模式

已于 2023-04-01 13:49:03 修改
阅读量715 收藏 5
点赞数 3
分类专栏： 工具 文章标签： edge浏览器
于 2023-04-01 13:48:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47124112/article/details/129894972
版权

🐤浏览器深色模式🐤

像Microsoft Edge虽然有个深色模式，但是这个深色模式只是把浏览器外框变成了黑色，页面原来的底色还是白色，如果需要长时间浏览页面的话，眼睛依然会有些酸痛。

在这里插入图片描述
百度的背景还是白色的
在这里插入图片描述

第一种方法 | 油猴插件 🐤 🐤

在Greasy Fork中搜索护眼模式
在这里插入图片描述

百度的效果图

在这里插入图片描述

第二种方法 | 推荐 🐤 🐤 🐤

1.将这一行url粘贴到地址栏回车。

chrome://flags/#enable-force-dark

2.快捷键Ctrl+F找到 Auto Dark Mode for Web Contents 这项功能，将选项中的Default 改为 Enabled
在这里插入图片描述

百度效果

在这里插入图片描述

SCDN 效果

在这里插入图片描述
方法二参考链接

码客前端
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Theme-Toggle-using-ReactJS：在简单网页上的白色和深色主题之间切换的开关
02-07
主题切换 欢迎 :male_sign: ！ 我们都喜欢网站具有深色模式选项。它使网页更易于阅读，使眼睛更加放松，还节省了电池。主题之间尚无魔术切换，而React使实现此功能更加容易。 在顶部，有一个开关可以在一个简单的网页上的白色和深色主题之间切换 资产 引导开关切换器 跑步 做仓库的git clone 。 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 该项目的目的： 在React基础上获得动手经验 任何人都可以将此项目作为参考来设计自己的企业网站 对于刚刚开始探索React的初学者来说，这可能是一个很好的起点。 涵盖的主题： 该项目是使用React钩子（基于功能）完成的：它涉及如下主题： useState useContext 提供者 消费者 动态设置className React中的列表和条件 需要帮忙？ if ( needHelp
【最新版】Yandex.dmg【亲测可用】最好的浏览器
05-04
保护技术可以防止Internet上的威胁：它检查下载的文件是否包含病毒，阻止恶意站点，保护密码和银行卡数据不被盗用。 如果Internet速度很慢，则会打开Turbo模式-加快网站和视频的加载速度。例如，他将帮助在该国看电影。 您可以从数百个选项中选择浏览器主屏幕的设计-画廊包含照片和视频电话。如果找不到合适的文件，则可以上传图片。 浏览器过滤广告，阻止非常烦人的广告。例如，它不显示倒计时后关闭的弹出窗口和横幅。 浏览器可以为您提供密码，将其保存并在设备之间同步。此外，可以使用特殊的主密码来保护密码，该密码只有您自己知道。 如果启用同步，则书签和打开的站点将在任何设备上可用。此外，不必在智能手机上输入存储在计算机上的密码。 有趣的文章，新闻和视频-在Zen中，是浏览器开始屏幕上的个人选择。自动系统会分析您的口味并提供您喜欢的东西。 如果需要，可以将浏览器界面重新涂成深色。因此，例如，在黑暗或昏暗的环境下工作会更加方便。 您可以一站式提出问题并搜索站点，这总是可见的。Yandex无需回答搜索结果即可立即回答许多问题，例如有关天气或富士山的高度。 在Yandex.Browser中观看视频时，您可以并行执行其他操作。例如，观看剧集并同时研究演员表。切换标签后，视频将在单独的窗口中开始播放。
gatsby-styled-components-dark-mode：一个Gatsby插件，用于切换黑暗模式并使用styled-components注入主题
02-14
盖茨比风格组件深色模式 一个Gatsby插件，可处理注入深色和浅色主题，以及在主题之间进行切换的功能。 它还将用户的暗选项状态保留在浏览器中。 从1.2版开始，该插件现在支持自动主题化api。 安装 安装套件 $ npm i gatsby-styled-components-dark-mode 或者 $ yarn add gatsby-styled-components-dark-mode 将插件添加到您的gatsby-config.js module . exports = { plugins : [ { resolve : `gatsby-styled-components-dark-mode` , options : { light : { mainColor : 'brandyRose' } , d
NotionX:A Browser extension that enhances Notion Web App experience.一个增强 Notion Web端体验的浏览器插件
04-30
English | 概念X [[toc]] v2.1.0功能（2021.03.16） 设置代码语言 在当前概念页面中为所有代码块设置语言 页面内容统计 计算当前概念页面中的单词和块数 v2.0.0功能（2021.02.01） 动态侧边栏 快捷方式目录是根据页面Heading Block 1-3栏中的Heading Block 1-3 ， Toggle Block ， Database Block ， Comments和概念页面中的Colored Text自动生成的。 低对比度暗模式 与Notion的官方深色模式相比，该扩展程序的内置深色模式具有较低的视觉对比度，该对比度在全球范围内生效，包括图片之类的所有内容（以防止其他人在您的屏幕上进行监视）。 概念快捷方式快速参考手册 支持切换NotionX语言 在页面顶部隐藏评论 切换概念暗模式 紧凑模式：全宽+小文本 在代码块中显示行号
一步到位：三行CSS代码轻松实现全网站暗黑模式
粉丝们务必加入微信粉丝群
05-16 2309
本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。更多开源作品请看 GitHub，包含一线大厂面试完整考点、资料以及我的系列文章。快来免费体验ChatGpt plus版本的，我们出的钱体验地址:https://chat.waixingyun.cn可以加入网站底部技术群，一起找bug.本文由 Mads Stoumann 撰写的博文，主要介绍了如何通过简单的三行CSS代码实现网站的暗黑模式。该博文提到，
谷歌浏览器设置暗黑模式
CaseyWei
04-24 8354
方法一：在 Chrome 的实验性功能中开启黑暗模式。 1、打开 Google Chrome，在地址栏中输入“chrome://flags”，回车，进入实验性功能页面； 2、在搜索框中搜索“Auto Dark Mode for Web Contents”； 3、点击“Force Dark Mode for Web Contents”后面的按钮，选择【Enabled】； 4、点击右下角的【Relaunch】按钮，重启浏览器，开启黑暗模式。 方法二：使用浏览器插件Dark Mode 开启黑暗模式 .
Edge&Chrome浏览器暗模式设置
zxxxlh123的博客
02-16 5035
实用小技巧
edge浏览器强制启用暗黑模式
知本知至的博客
04-01 4695
edge对所有网页启用暗黑模式
谷歌浏览器如何设置和恢复纯黑界面
热门推荐
beiback的博客
06-28 1万+
1、打开 Google Chrome，在地址栏中输入“chrome://flags”，回车，进入实验性功能页面；2、在搜索框中搜索“Auto Dark Mode for Web Contents”；3、点击“Force Dark Mode for Web Contents”后面的按钮，选择【Enabled】；4、点击右下角的【Relaunch】按钮，重启浏览器，开启黑暗模式。1、打开 Google Chrome，在地址栏中输入“chrome://flags”，回车，进入实验性功能页面；2、在搜索框中搜索“A
Windows【Chrome浏览器 02】Auto Dark Mode for Web Contents 无需安装插件开启chrome浏览器黑暗模式
Java与大数据相关实践内容分享！
03-26 1509
Windows【Chrome浏览器 02】Auto Dark Mode for Web Contents 无需安装插件开启chrome浏览器黑暗模式（20220416更新）
Chrome黑暗模式-1.0.46.zip
12-29
深色模式chrome是一项扩展程序，可以帮助您快速将浏览器切换到深色模式。 描述： 所有网站的深色主题。更改网站上的颜色，使外观更加令人愉悦，并且可以在Internet上方便地工作。 深色模式chrome是一项扩展程序，...
如何使用 JavaScript/jQuery 为网站创建暗/亮模式？
忧郁的蛋的专栏
09-15 308
深色模式对于任何网站都非常重要。不同兴趣的用户访问网站。有些人喜欢深色模式，有些人喜欢浅色模式。根据一项调查，大约 70% 到 80% 的人喜欢深色模式，只有 20% 到 30% 的人喜欢浅色模式。因此，有必要为任何网站创建一个深色模式，允许用户在深色和浅色模式之间切换。下面，我们将使用 HTML、CSS 和 JavaScript 创建一个简单的网页。此外，我们还将学习使用 JavaScript 和 CSS 实现明暗模式。
如何设置Microsoft Edge浏览器网页为深色模式(防止使用时间过长导致眼睛酸痛)
创作不易，宝子们！ 既然看完了人家的代码，如果文章对你们有帮助的话，别忘了给个免费的赞哟~
10-11 623
经常浏览网页眼睛感到非常不舒服，那么怎么把Edge浏览器的网页设置成深色模式才能使得浏览网页时眼睛就可以得到一定的保护 ​
谷歌浏览器深色/暗夜模式
weixin_51055997的博客
07-27 97
谷歌浏览器深色/暗夜模式官方途径
浏览器背景黑化两个方法
小白垃圾笔记2
12-25 1192
2.搜索Auto Dark Mode for Web Contents。第二种方法更改不太方便所以本人更喜欢方法一（添加拓展）1.在浏览器地址框中访问edge://flags/3.将后边改为enabled 点击右下角重启即可。法一：添加拓展拓展的名字是Dark Reader。法二：不知道什么道理但是效果可以实现。
关于各种浏览器或操作系统深色模式的设置，看这篇文章就够了
wyxtx的博客
01-02 951
关于各种浏览器或操作系统深色模式的设置，看这篇文章就够了。
Microsoft Edge浏览器改为彻底的黑色模式
qq_55906687的博客
11-25 989
如果要真正地改为彻彻底底的深色，方法如下： 打开网址：edge://flags/#enable-force-dark 《Auto Dark Mode for Web Contents》这一栏的选项从Default改成enabled即可
关于谷歌浏览器如何将背景换为黑色，字体换为白色
最新发布
专研计算机网络，数据通信，网络安全，系统集成
01-08 962
3.我们在搜索框搜索:Auto Dark Mode for Web Contents 如图。1.在谷歌的搜索框里搜索此网址——chrome://flags/ 如图。4.开启Web内容的自动暗模式 选择enbled。5.确认重新启动 选择Relaunch。6.重新启动即可 如图。#跟着我一起来看一下吧。
谷歌浏览器设置成黑色模式（护眼）
越努力越幸运~~ Java领域从业者；CSDN新兴创新博主；Java领域优质创作者；书写奋斗者故事;欢迎交流学习进步；
12-11 574
1.打开Google Chrome，在地址栏中输入“chrome://flags”，回车，进入实验性功能页面；3.点击"Auto Dark Mode for Web Contents"后面的按钮，选择【Enabled】；2.在搜索框中搜索"Auto Dark Mode for Web Contents"；4.点击右下角的【Relaunch】按钮，重启浏览器，开启黑暗模式。谷歌浏览器设置成黑色模式（护眼）
js中如何检测当前浏览器是否处于深色模式
07-15
在 JavaScript 中，可以使用 `matchMedia` 方法来检测当前浏览器是否处于深色模式。下面是一个示例代码： ```javascript if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { // 当前浏览器处于深色模式 console.log("当前浏览器处于深色模式"); } else { // 当前浏览器不处于深色模式 console.log("当前浏览器不处于深色模式"); } ``` 这段代码首先检查 `matchMedia` 方法是否可用，然后使用 `(prefers-color-scheme: dark)` 媒体查询来判断是否处于深色模式。如果返回值为 `true`，则表示当前浏览器处于深色模式，否则不处于深色模式。 请注意，这种方式仅适用于支持 `prefers-color-scheme` 媒体查询的现代浏览器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值