暗黑模式-UI开发视角分析从零到一实现原理

最新推荐文章于 2023-12-05 11:42:41 发布
置顶 最新推荐文章于 2023-12-05 11:42:41 发布
阅读量796 收藏 1
点赞数 1
文章标签： css css3 less sass html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_29086999/article/details/109394526
版权
本文探讨了暗黑模式的定义、设计本质以及UI开发中实现暗黑模式的策略。通过分析色值变量和设计决策，阐述了如何在不同模式下遵循不同颜色规范，并提供了重构实现的步骤，强调了重构时的样式冲突解决原则。
摘要由CSDN通过智能技术生成

暗黑模式-UI开发视角分析从零到一实现原理

一、什么是暗黑模式

暗黑模式DarkMode 是不同于默认模式（高光模式）的界面风格。是以暗色为主题的风格，通常为深灰色或者黑色。
高光模式
暗黑模式

二、本质

暗黑模式和高光模式切换的本质就是：同一个页面，在两种模式下，遵循两套不同的颜色规范。

就像我们每天早上穿衣服一样，今天我想穿衣帽间里深色系的衣服，明天我想穿浅色系的衣服，但是我还是同一个人。

三、暗黑模式的设计

我们可以先来看一下weui的色值变量：
在这里插入图片描述
在这里插入图片描述

分析：

第一部分（前6个变量）
--weui-BG-XXX：背景变量，高光模式下通常为浅色ÿ
最低0.47元/天 解锁文章
饥饿的程序媛
关注
SAP UI5 应用开发教程之十三番外篇 - SAP UI5 应用的暗黑模式 - Fiori 3 Quartz Dark 主题的使用
汪子熙的专家技术分享
01-25 467
本文介绍 SAP UI5 应用如何实现 SAP Fiori 3.0 的 Quartz 主题的暗黑模式。
SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员
热门推荐
汪子熙的专家技术分享
10-05 2万+
笔者在业余时间设计了这份 SAP UI5 学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。 对于已经有一定基础的 SAPUI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。
uniapp和5+app适配苹果iOS13暗黑模式教程
老虎帅呆了的博客
03-14 5570
iOS13开始苹果引入了暗黑模式（DarkMode），在黑暗模式下，系统界面配色都会相应变暗，同时App也需要进行适配。 HBuilderX2.6.3+版本开始支持对暗黑模式的适配处理。 全局开启暗黑模式 为了保证应用的兼容性，HBuilderX打包生成的App默认已关闭兼容暗黑模式，需按以下方法配置开启暗黑模式。如果不开启黑暗模式，将无法获取当前系统的外观模式 打开项目的manifest.j...
暗黑模式开发一些心得
xuyin1204的博客
02-09 1609
暗黑模式开发一些心得一、背景介绍1.1 深色主题背景二、动态开启暗黑模式2.1 color颜色值2.2 图标配置2.3 设置开启开关2.4 一些特殊场景的配置2.4.1 json动态效果图2.4.2 H5加载三、状态栏和导航栏的适配3.1 状态栏3.2 导航栏四、总结 一、背景介绍 1.1 深色主题背景 （官网介绍：https://developer.android.google.cn/guide/topics/ui/look-and-feel/darktheme） Android 10 (API 级别
Concis组件库 | 暗黑模式设计
量子前端的博客
07-22 538
自上文发布以来，作者收到了很多的私信，也很高兴。组件库设计|React组件库Concis开源探索过程中的一些心路历程大致内容有都是对作者的鼓励，心中十分感激，同时Concis收到了很多的pr，贡献者也突破了5个…至少作者不会写着写着突然有一种迷迷糊糊很迷茫的感觉了，这点非常开心。作者不断的在思考下一步Concis该做些什么，简单参考了一些成功的项目，最终花了三天时间做了暗黑模式。...
为什么 APP 纷纷开发“暗黑模式”？优酷最佳实践总结
阿里云开发者
01-06 5112
简介： 《 优酷 APP 全量支持“暗黑模式” 设计与技术完整总结》正式发布…… ​ 一、缘起 随着iOS 13和Android 10的正式发布，一个名词"暗黑模式(Dark Mode)"逐渐走入了大家的视野。各大APP都将暗黑模式的适配列入了开发日程，舆情上用户们对暗黑模式支持的呼声也非常的高。优酷主客也顺应时势，启动了相应的技术预研。 从2019年11月开始，优酷主客Andro...
uview-ui项目暗黑模式（笔记）
weixin_42998230的博客
03-02 1845
1、main.js import mixin from '@/common/js/setTheme.js' Vue.use(mixin) // import {getTheme} from '@/common/js/setTheme.js'; // Vue.prototype.$theme = getTheme; 2、App.vue //监听系统主题变化 onThemeChange(e){ this.getTheme() }, 3、setTheme.js import { isEmpty } fro
uniApp暗黑模式css库
05-09
【uniApp暗黑模式css库】是一个专门为uni-app框架设计的CSS库，旨在提供对暗黑模式的支持。uni-app是一个跨平台的开发框架，允许开发者编写一次代码，就能在多种平台如微信小程序、H5、App等上运行。这个css库是基于...
Taxo 暗黑模式 Neumorphic 风打车app ui .sketch素材下载
04-20
Taxo暗黑模式Neumorphic风格的打车应用UI设计，正是这种趋势下的产物，它融合了深色模式的舒适观感与Neumorphic（新拟物化）设计的独特质感，为用户提供了一种全新的交互体验。 首先，我们来理解一下“暗黑模式”。...
Android Q 强制黑暗模式(ForceDark) | 原理 & 实践
承香墨影的博客
08-23 4167
搜狐技术产品(sohu-tech) | 来源Hi，大家好，这里是承香墨影！Android Q 版本增加了 ForceDark 功能，可以快速实现应用的黑暗模式。本文主要讲述了 Androi...
聊聊微信的Dark模式
Zachary的博客
03-13 516
这里是Z哥的个人公众号每周五11：45 按时送达当然了，也会时不时加个餐～我的第「133」篇原创敬上大家好，我是Z哥。这周微信公布了一个我期待已久的好消...
暗黑模式？安卓适配一波
Zhujiang
04-14 2067
前言 第一次听到暗黑模式的时候，感觉好酷啊，听着就好看（也不知道我怎么听出来的）。苹果在前几年就有暗黑模式的风声，好像是在IOS11、IOS12的时候就说要推出了，结果愣生生等到了IOS13暗黑模式才推出。IOS13推出到现在已经大半年了，系统应用没得说，完美适配，三方应用也都陆续支持了暗黑模式，就连微信在前段时间的更新中也实现了暗黑模式，先来欣赏下微信的暗黑模式吧！ 正文 既然苹果实现了暗黑模...
uniapp全网最简单实现夜间模式
ddf__的博客
03-17 3246
uniapp的夜间模式，估计是做项目到后期比较常遇到的需求，因为现在的主流就是页面模式的应用了，所以在之前做某个项目的时候，我也是费了一些时间才实现了夜间模式，目前的效果还不算太好，虽然支持夜间和日间模式的手动切换。切换页面保持其他页面也是夜间模式可以把change的值存起来就如这样。我用的是uview2组件中的Switch 开关选择器 来进行切换。在别的地方进行取出了进行判断在onshow生命周期中加入如下代码。首先在你最大的view里面添加。这在需要用的地方执行。
uniapp + vue3 实现暗黑模式手动切换
m0_73679391的博客
08-01 2694
思路:控制每个页面的根节点类名进行主题切换技术栈:scss + pinia + vue3组合式函数最后会有优化过后的代码,使用起来还是比较好理解的。
H5 项目如何适配暗黑模式
qq_36081714的博客
04-19 1104
H5 项目如何适配暗黑模式
React可定制黑暗模式切换开关组件示例
Linuxprobe18的博客
11-12 247
以上就是React可定制黑暗模式切换开关组件的详细内容。一个用于React的可定制的黑暗模式切换开关组件。
uniapp中vuex+scss变量更换主题色
最新发布
qq_44711135的博客
12-05 970
第四步页面使用 因为在main.js 中引入了公共的 mapGetters 所以在页面就不用单独引用了。借鉴博客地址：https://zhuanlan.zhihu.com/p/635051054。最后差不多功能就做完了，有不足的地方请多多指教。第三步直接在main.js 中引入。
【uni-app笔记整理三】uni样式（scss）
小异常的博客
12-25 1149
本篇博客主要向大家介绍 uni-app 的样式，其实样式我们完全使用 CSS 即可，但这还不够，我要向大家介绍一个更强大的 CSS 扩展语言，也是 uni-app 官方推荐的 SCSS 语言。 　 简单介绍一下，SCSS 是一门 CSS 扩展语言，它完全兼容所有版本的 CSS，它的稳定性要比 CSS 更强大，使用起来更加的舒畅。 　 SCSS 让人们受益的一个重要特性就是为 CSS 引入了变量。你可以把反复使用的 CSS 属性值 定义成变量，然后通过变量名来引用它们，无需重复书写这一属性值。本篇将结合 un
uniApp暗黑模式css库实现与应用
总的来说，这个uniApp暗黑模式css库是一个实用的资源，可以帮助开发者快速构建出适应不同环境的主题风格的应用程序，尤其是在当前用户对暗黑模式需求日益增长的趋势下，该库能够大大简化开发流程，并且使得最终的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值