实现暗黑模式

最新推荐文章于 2024-01-02 10:10:26 发布
最新推荐文章于 2024-01-02 10:10:26 发布
阅读量440 收藏
点赞数
分类专栏： 效果 文章标签： javascript react.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45942606/article/details/128325771
版权

一、先在全局css中创建.dark-theme和.light-theme类，在分别在该类中创建相同的var变量
在这里插入图片描述
二、在组件刷新时为html添加类，再添加一个按钮可以进行模式切换
在这里插入图片描述
效果如下
在这里插入图片描述
暗黑模式如下
在这里插入图片描述
最后！！！此案例通过vue写的，react写法也是一样的

@少年啊
关注
专栏目录
Android App Dark Theme（暗黑模式）适配指南，android实战mysql
m0_61362539的博客
11-09 1635
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v2qd7l5a-1636430548017)(https://user-gold-cdn.xitu.io/2020/3/3/1709ff5d1de5811f?imageView2/0/w/1280/h/960/ignore-error/1)] 以上这张图截选自 Android 官方文档，上面提出了 Dark Theme 的三点好处： 可以帮助我们节省更多的电量 为弱视以及对强光敏感的用户提高可视性 让所有人都可以在光
一行代码实现暗黑模式
xiomarazark的博客
06-20 519
牛刀小试 html代码 <input type="checkbox" id="switch"/><label for="switch">Toggle</label> css代码 /*样式反转*/ .dark-mode{ filter:invert(1) hue-rotate(180deg); } js代码 let toggle = document.querySelector("#switch"); toggle.addEventListene
CSDN酷酷的深色深黑色护眼模式
weixin_52763107的博客
11-06 1401
免费开启深黑色护眼模式，黑黑的，看起来更酷不是吗？再也不怕半夜CSDN画面太亮影响室友睡觉了。分享一下设置方法 ------->>>>> 有一说一，黑色界面用起来简直不要太舒服，以后上网冲浪无形中又增添几分神秘感
超简单的网站暗黑模式，它真的超简单！
HelloGitHub 的博客
03-19 630
原文地址：Implement Dark Mode On Your Website.原文作者：Matthew Marquise（已授权）译者 & 校正：HelloGitHub-小鱼干...
Andorid暗黑模式（深色）实现方案
zyy_give的博客
12-28 2306
Android暗黑模式（深色模式）适配、简单实现暗黑模式
vue2自定义切换主题 dark暗黑主题（暗黑模式）
qq_36828272的博客
05-05 4538
vue2实现自定义的主题切换方案，例如暗黑主题切换，可自定义颜色和主题的数量，支持修改组件内部的颜色样式，例如Element UI
uniApp暗黑模式css库
05-09
总的来说，uniApp暗黑模式css库为uni-app开发者提供了一个强大的工具，帮助他们轻松实现暗黑模式，提升用户体验，同时保持代码的简洁和维护性。通过合理运用这个库，开发者可以在不牺牲设计质量的前提下，快速地开发...
CSS变量实现暗黑模式的示例代码
11-21
标题中的“CSS变量实现暗黑模式的示例代码”指的是使用CSS自定义属性（也称为CSS变量）来创建一个能够根据用户系统设置自动切换的暗黑模式。这种方法允许网站适应用户的首选界面风格，无论是亮色还是暗色。 描述中...
Vue3与Element Plus整合实现暗黑模式前端项目
资源摘要信息:"本文主要介绍了如何在Vue 3项目中整合Element Plus组件库，并实现暗黑模式的功能。Vue 3是Vue.js的最新版本，它带来了许多新特性，如Composition API、Fragment、Teleport和Suspense等。Element Plus...
vue2使用less 实现暗黑模式
05-11
要在Vue2中使用Less实现暗黑模式，你需要进行以下步骤: 1. 安装Less和Less-Loader 在你的Vue2项目中，你需要安装Less和Less-Loader。你可以使用以下命令来安装它们： ``` npm install less less-loader --save-...
VueDarkMode一个极简主义的黑暗设计系统
08-12
Vue Dark Mode | 一个极简主义的黑暗设计系统
bootstrap-dark：黑暗模式和Bootstrap 4权威指南-概念验证
02-07
黑暗模式和引导程序的权威¹4 概念证明/长格式白皮书[深色纸] 此工作内容与。 如果您要进行的相同工作，请访问库。 跳到： 关于我和引领这里的历史 首先，我想指出我不是专业的开发人员-从88年代到05年代我是，但是现在我不这样做。 我是一名电气工程师和商人，负责管理数据中心及其员工，并设计UPS，HVAC和电源系统……这是我的日常工作。 但是我仍然喜欢代码。 我的爱好是编码，自2005年以来我编写的所有代码都在某个地方开源。 我也不是“图形”或“艺术”人士-我没有设计，UI或UX方面的知识-但我知道这是基本概念。 我也不是长篇小说作家...我患有阅读障碍，并且相对较低-因此这些杂记可
4.实现csdn暗黑模式-油猴脚本实战1
lazy_tomato的博客
05-11 1597
前面的文章，对油猴脚本做了基础的介绍。今天来我们来实战一下，编写一个有实际作用的油猴脚本。看我表演？本文作者： upward_tomato(向上的番茄)
csdn设置成黑色背景
最新发布
weixin_47863850的博客
01-02 2203
csdn没找到永久设置黑色，但是谷歌浏览器或者Edge浏览器可以设置黑色。3.default 改成 enabled，然后点击重启浏览器。2.搜索框输入：enable-force-dark。1.浏览器地址输入：Chrome://flags。
CSDN 电脑夜间模式 插件开启方法 告别 强光带来的伤害
Rcary的博客
10-13 1180
以 微软自带浏览器 为例子， 打开 右上角 三个点( ··· )，找到扩展，点击进入！ 再选择获取微软的扩展插件，然后输入 ： 夜间模式 。 会显示出多种插件 ，找下载量最多的下载就好了！ 我选择的如图所示： 效果如图所示！ 极其完美！！！！！！！！！！！~~~~~~~ ...
关于暗黑模式
lk2021991的博客
07-24 955
Android客户端AndroidQ开始已经支持暗黑模式了，体验也挺好的，所以一些很多大型的APP也都会对此进行适配。适配的方法大致分为两种： 1自定义的方式：新增一套night的文件，根据UI设计对drawable和colors ,style 等进行个性化适配，这种适配的优点就是可根据需要达到想要的效果。（具体细节网上很多，很详细） 2.在 ...
暗黑模式适配
ThePromonkeyOf_HeLuo的博客
01-06 715
暗黑 参考资料 为什么 APP 纷纷开发“暗黑模式”？优酷最佳实践总结 《 优酷APP全量支持“暗黑模式” 设计与技术完整总结》
一步到位：三行CSS代码轻松实现全网站暗黑模式
粉丝们务必加入微信粉丝群
05-16 2829
本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。更多开源作品请看 GitHub，包含一线大厂面试完整考点、资料以及我的系列文章。快来免费体验ChatGpt plus版本的，我们出的钱体验地址:https://chat.waixingyun.cn可以加入网站底部技术群，一起找bug.本文由 Mads Stoumann 撰写的博文，主要介绍了如何通过简单的三行CSS代码实现网站的暗黑模式。该博文提到，
csdn-暗黑调整-stylus
singkingcho的专栏
09-24 164
html body { background-color: black!important; } html body .main_father { background-color: black!important; } html body main .blog-content-box { background-color: black!important; } html body main .blog-content-box p { color:wh
我需要Android开发暗黑模式的资料
09-11
### 回答1： 在 Android 中实现暗黑模式需要您在应用中设置主题。 为了在应用中启用暗黑模式，您需要在应用的主题中设置以下属性： ``` <style name="AppTheme" parent="Theme.AppCompat.DayNight"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> ``` 您还需要在您的清单文件中的 `application` 标签内指定这个主题： ``` <application android:theme="@style/AppTheme"> ... </application> ``` 您还可以使用以下方法来编程方式在运行时切换暗黑模式： ``` AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES); ``` 要在应用中使用暗黑模式，您还需要使用支持库中的 `androidx.appcompat.app.AppCompatDelegate` 类，并在布局文件中使用支持库中的控件。 更多信息请参阅官方文档：https://developer.android.com/guide/topics/ui/look-and-feel/darktheme 希望这些信息能帮到您！ ### 回答2： Android开发暗黑模式的资料包括以下几个方面： 1. Android官方文档：Android官方文档提供了开发者使用暗黑模式的相关指导和最佳实践。你可以在Android官方文档中搜索"Dark Theme"或"暗黑模式"来查找相关文档和示例代码。 2. 官方示例项目：Android开发团队为开发者提供了一些示例项目，其中包括暗黑模式的实现示例。你可以在GitHub等代码托管平台上搜索"Android Dark Theme"，找到相关示例项目并进行学习和参考。 3. 博客和教程：许多Android开发者和技术博主在自己的博客或技术网站上分享了关于暗黑模式开发的教程和经验分享。你可以搜索"Android开发暗黑模式教程"，浏览相关博客和教程，学习他们的实现思路和代码示例。 4. 开发者社区：加入Android开发者社区，参与讨论和交流，了解其他开发者在实现暗黑模式方面的经验和问题。你可以在国内外的开发者社区，如知乎、CSDN、Stack Overflow等，搜索和提问关于暗黑模式开发的问题。 5. 第三方库和组件：有一些第三方库和组件可以帮助你更方便地实现暗黑模式。你可以在开源代码托管平台上搜索"Android Dark Theme Library"，找到相关的库和组件，以加速你的开发进程。 通过以上这些资料的学习和实践，你将能够掌握Android开发暗黑模式的基本知识和技能，为你的应用程序添加暗黑模式提供更好的用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值