既然有一个“容器”，那必须得有个底，而且大家都习惯于白纸黑字，所有的界面都变成了白色了，好像白色会给人一种更加被“包装好”的感觉。从此以后黑色界面的时代就过去了，只存在于黑客电影中。...让人无法接受的深色模式：Windows高对比度模式 在Windows推出了相当长的一段时间里，黑色界面就不再出现了。但是准确的说，实际上保留了一个主题功能。...但是这个换肤大多都带有很强的个性和主题性，每个主题能命中的用户其实并不是很多。相比之下，直接把整个系统变黑，新鲜感满满，接受度也很高。...我认为由于不同的用户对于深色模式的预期不一样。有些用户的预期是一个低对比度的黑夜模式，有些用户只是想换个主题而已。导致设计师两边不讨好，有些产品的深色模式也是被骂的改了又改。...比如说白色，你可以指定这个白色在深色模式下直接变成黑色。
所谓的夜间模式就是把网页变成深色或者黑色模式，貌似现手机上某个系统能实现全局夜间模式就能吹嘘一通。...之后打开网站，会发现在页面最下端增加了一个圆形按钮，点击就会进入黑色背景的夜间模式。...有些遗憾是插件夜间模式只支持新版本的Chrome、Firefox和Safari，不支持所有版本的IE和Edge浏览器。...Darkmode.js使用方便，代码量少，不像我目前主题的夜间模式，需要写样式配合并反复调试，不过由于Darkmode.js兼容性和自定义程度低，最终放弃使用，自己写代码实现。...夜间模式对于一款主题而言，用户可以不用，但你不能没有，好吧，我接着改主题夜间样式去....
但这不仅仅是一种趋势；这是一个将持续存在的设计决策。 然而，到底什么是黑暗模式，为什么它如此受欢迎？从根本上来说，深色模式颠倒了用户界面的标准配色方案，用浅色文本代替深色色调，用明亮背景代替深色色调。...称为“深色模式”（有时称为“夜间模式”或“深色主题”）的设计功能会修改用户界面的配色方案，使其主要使用深色或黑色背景以及浅色文本和图形元素。...深色模式的主要特征 深色调色板：为了与屏幕上较亮的项目形成鲜明对比，深色模式通常使用黑色、深灰色或海军蓝色调作为背景颜色。...然后，我们创建一个暗模式类，在其中使用适合暗模式的值覆盖这些变量。 深色模式切换按钮 接下来，让我们创建一个切换按钮，允许用户在浅色模式和深色模式之间切换。...我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan
另外说明一下，本篇文章主要摘自《第一行代码——Android 第3版》的第14章，在此基础之上，我又扩展了一些内容。 为什么要将书中的内容再发一份到博客上呢？...开启深色主题后，系统的界面风格包括一些内置的应用程序都会变成深色主题的色调，如下图所示。 ? ?...可以看到，虽然整体的界面风格好像确实变成了深色主题的模式，可是却并不怎么美观，尤其是卡片式布局的效果，经过Force Dark之后已经完全看不出来了。...然而，虽然现在界面中的主要内容都已经自动切换成了深色主题，但是你会发现标题栏和悬浮按钮仍然保持着和浅色主题时一样的颜色。...我个人认为，在绝大多数情况下，让应用程序跟随系统的设置来决定使用浅色主题还是深色主题是最合适的一种做法。
以一个PC端的应用界面为例。 在本文中，我们在创建样式的同时，会说明我们为什么会选择特定的颜色。因为这些差别对设计师非常重要。 0.常量样式 重要的是要注意，在为明暗模式选择颜色时，颜色会略有不同。...另外，图像占位符的颜色也是恒定的，不会改变。 例如，在上图中，我们展示了该按钮在浅色和深色主题中的外观。图标，文本和计数器具有恒定的颜色。按钮的背景有变化，但其中的内容未更改。...这是因为，在黑暗模式下，背景已经完全为黑色，此时在黑色背景上使用100透明度的灰度颜色时，你的颜色会完全不可见。...· 400（＃E8E8E8）-用于较小的细节，例如边框，分隔线和线条颜色。...例如，对于浅色版本，我们对白色应用了10％的蓝色透明度，对深色版本，我们对黑色应用了25％的蓝色透明度。
首先要明确俩个css技术： 背景渐变/边框渐变 动态渐变 我们先打开主页html 即 Home.html。...看看效果： 然后我们继续改 把里面的这个小蓝色方块也给改了： 其实直接复制上面的即可，只是朝向从右right变成了左left。...然后注意给里面的文字白色换成深色的 最终效果如下： 然后我们去动手左下角的历史请求记录的背景色： 然后 去修改点开项目后的俩个按钮：进入和保存： 好，修改完毕，再看看最终效果： 好，主页的修改到此为止...，我只是教给大家修改颜色的方法，大家可以按照自己的喜好 设置成各种各样的主题颜色，这个渐变色不止可以放2种3种的，可以放很多很多颜色，你放个彩虹都没人管。...感觉应该是控制菜单主题的代码，我们随便改几个字发现菜单就变成其他样子，更加证实了这个句代码的作用。
分别定义黑色、红色两种展示样式，随后把一段字符串分成4个片段，并设置不同展示样式： TextStyle blackStyle = TextStyle(fontWeight: FontWeight.normal...与Text控件类似，按钮控件也提供丰富样式定制功能，如背景颜色color、按钮形状shape、主题颜色colorBrightness等。...(borderRadius: BorderRadius.circular(20.0)), //设置斜角矩形边框 colorBrightness: Brightness.light, //确保文字按钮为深色...；随后通过shape指定其外形为斜角矩形边框，并将按钮背景色设为黄色。...因为按钮背景颜色是浅色的，为避免按钮文字看不清楚，我们通过设置按钮主题colorBrightness为Brightness.light，保证按钮文字颜色为深色。
但是为什么这里要指定一个xmlns：app的命名空间呢？...（“（白底）黑字”），这是为了和主体颜色区别开（具体可以看文章开头对于深色浅色主题的解释）。...在styles.xml中将程序的主题指定成了淡色主题，Toolbar现在也是淡色主题，TooIbar上面的各种元素就会自动使用深色主题 但是这个效果看起来就会很差，之前使用ActionBar...时文字都是白色的，现在变成黑色的会很难看。...但是这样指定完了之后又会出现新的问题，如果Toolbar中有菜单按钮，那么弹出的菜单项也会变成深色主题，这样就再次变得十分难看，于是这里使用了app:popupTheme属性单独将弹出的菜单项指定成了淡色主题
前一篇文章，我介绍了组合和自绘这两种自定义Widget的方式。...主题定制 主题，又叫皮肤、配色，一般由颜色、图片、字号、字体等组成，我们可以把它看作是视觉效果在不同场景下的可视资源，以及相应的配置集合。...可以看到，我们虽然只修改了主色调primaryColor和明暗模式brightness两个参数，但按钮、文字颜色都随之调整了。...: TextStyle(color: Colors.black))// 文本主题为黑色 ); // Android 深色主题 final ThemeData kAndroidTheme = ThemeData...( brightness: Brightness.dark,// 深色主题 accentColor: Colors.black,//(按钮)Widget 前景色为黑色 primaryColor
MSDN我告诉你上也已经有相关镜像了。正好我也安装尝尝鲜，顺便为大家介绍一下1903的新特性。大家如果也想尝鲜的话推荐使用VHD方式安装，将来删除的时候非常方便。...浅色主题 比较直观的一点就是系统主题新增了一个浅色模式，浅色主题的任务栏和开始菜单会变成浅白色，而图标颜色会变成黑色，看起来很不错。 ? 对应的深色主题看起来就没那么好看了。...而且现在很多应用都没有适配深色主题，一堆黑色的窗口中间混杂了一个白色窗口，格外难看。我觉得到时候大家肯定都用的浅色主题。 ?...搜索功能和Cortana分离 另外一项比较直观的功能改动就是将搜索功能和微软小娜分离了。现在任务栏上有两个按钮，一个是搜索功能，另外一个小娜只有语言识别的功能了。 ? 这项改动有好有坏。...对我来说不能打字和小娜沟通，实在是有点遗憾。不过搜索和小娜分离之后，本地搜索功能应该会方便一些，对于经常使用搜索功能的用户来说是一件好事。 ?
如下方代码所示，我们分别定义了黑色与红色两种展示样式，随后把一段字符串分成了4个片段，并设置了不同的展示样式： Text.rich( TextSpan( children...最大缓存限制为100MB，当限定的空间已经存满数据时，把最久没有被访问到的图片清除。图片缓存只会在运行期间生效，也就是只缓存在内存中。...与Text控件类似，按钮控件也提供了丰富的样式定制功能，比如背景颜色color、按钮形状shape、主题颜色colorBrightness，等等。...shape 来指定其外形为一个斜角矩形边框，并将按钮的背景色设置为黄色。...因为按钮背景颜色是浅色的，为避免按钮文字看不清楚，我们通过设置按钮主题 colorBrightness 为 Brightness.light ，保证按钮文字颜色为深色。 展示效果如下： ?
还记得我们前面叠加的颜色是什么吗？ 接下来别忘了然后把它误以为是我系统的主题色哦！...---- 使用 WindowChrome 在 Windows 10 上，在获得焦点的时候整个背景是系统主题色；而失去焦点的时候是灰色，但边框部分是深色。...： 最上面那根白线，是我面前面设置边框为 0 1 0 0 导致的。...效果 ACCENT_DISABLED 黑色（边框为纯白色） ACCENT_ENABLE_GRADIENT GradientColor 颜色（失焦后边框为深色） ACCENT_ENABLE_TRANSPARENTGRADIENT...主题色（失焦后边框为深色） ACCENT_ENABLE_BLURBEHIND 模糊特效（失焦后边框为灰色） ACCENT_ENABLE_ACRYLICBLURBEHIND 与 GradientColor
深色模式下，不要使用黑色，而是使用深灰色，用来呈现较环境中的高程和大范围的区域。 色彩与调性 ? 在深色主题的UI当中，尽可能使用数量有限的色彩，确保绝大部分的区域需要保持深色。...在APP的顶部菜单中显示主题开关 ? 在弹出菜单的菜单层中显示开关 ? 在APP的设置列表当中显示开关 属性 深色主题使用的是深灰色，而不是黑色来作为主要的色彩。...在关键的元素上应当谨慎地使用强调色，尤其是文本和按钮。 寻找强调色 你可以使用官方的配色方案生成器来创建（或者查看）主题配色方案。它可以生成色调方案，也就是主色和次要色的一系列深浅颜色的变化。...为了保持品牌本身的可识别性，品牌色应该可以在深色主题之下充分地使用，但是这种跨主题配色的元素应该控制在一两个元素的范围内，比如只有品牌LOGO 和品牌按钮是这样用的。...不饱和的色彩，应该在深色的 UI 主题的其他地方多使用。 ? 高饱和度的品牌色应该使用浮动按钮（2），饱和度较低的主色则应该应用到文本等元素（1）之中。
一、主题 首先我们来设置 IDEA 主题的。 那 IDEA 自带了两款主题，一款是浅色主题，一款是深色主题。 那显然这两款满足不了了我们需求，所以我们需要下载其他主题。...这个设置地方，首先我们挑选自己喜欢的主题。 这里我个人比较喜欢 Atom One Dark，推荐大家可以试试。 那第二点，设置 Tab（标签页） 的大小，高度这些。...为什么说是程序员专用字体呢？ 那是因为这两款字体都加入一个重要功能，编程连字特性（ligatures）。 这个字体利用这个特性对编程中的常用符号进行优化，比如把输入的「!...=」直接显示成「≠」或者把「>=」变成「≥ 」等等，以此来提高代码的可读性。 以 Fira Code 为例，左边是打开编程连字特性，右边则是没有打开。...四、背景图 IDEA 默认情况背景是纯色，比如黑色，比较单调，这里我们可以设置一下背景图。 打开 Setting-Appearance，点击 Background Image 按钮。
主题 首先我们来设置 IDEA 主题的。 那 IDEA 自带了两款主题，一款是浅色主题，一款是深色主题。 那显然这两款满足不了了我们需求，所以我们需要下载其他主题。...这个设置地方，首先我们挑选自己喜欢的主题。 ? 这里我个人比较喜欢 Atom One Dark，推荐大家可以试试。 那第二点，设置 Tab（标签页） 的大小，高度这些。...为什么说是程序员专用字体呢？ 那是因为这两款字体都加入一个重要功能，编程连字特性（ligatures）。 这个字体利用这个特性对编程中的常用符号进行优化，比如把输入的「!...=」直接显示成「≠」或者把「>=」变成「≥ 」等等，以此来提高代码的可读性。 以 Fira Code 为例，左边是打开编程连字特性，右边则是没有打开。 ?...除此之外，上面 Material Theme UI 自带的主题，默认配置字体都偏小，这里我们可以适当调大。 背景图 IDEA 默认情况背景是纯色，比如黑色，比较单调，这里我们可以设置一下背景图。
主题 首先我们来设置 IDEA 主题的。 那 IDEA 自带了两款主题，一款是浅色主题，一款是深色主题。 那显然这两款满足不了了我们需求，所以我们需要下载其他主题。...这个设置地方，首先我们挑选自己喜欢的主题。 ? 这里我个人比较细喜欢 Atom One Dark，推荐大家可以试试。 那第二点，设置 Tab（标签页） 的大小，高度这些。...为什么说是程序员专用字体呢？ 那是因为这两款字体都加入一个重要功能，编程连字特性（ligatures）。 这连个字体利用这个特性对编程中的常用符号进行优化，比如把输入的「!...=」直接显示成「≠」或者把「>=」变成「≥ 」等等，以此来提高代码的可读性。 以 Fira Code 为例，左边是打开编程连字特性，右边则是没有打开。 ?...除此之外，上面 Material Theme UI 自带的主题，默认配置字体都偏小，这里我们可以适当调大。 背景图 IDEA 默认情况背景是纯色，比如黑色，比较单调，这里我们可以设置一下背景图。
为了测试这个功能，你需要升级到 Mojave 10.14（MacOS）并在“系统偏好设置”中选择“深色”。我们可以通过好几种方式使用这种新的媒体查询来实现不同的主题。...我们已经失去了对样式的控制，当你用了彩色背景时，会出现一个更大的问题。看看你的照片变成了什么样子。 10....完全控制 自定义属性使我们可以完全控制选择自己的颜色和其他属性。能够对页面容器上的边框阴影进行更新，使其在使用深色模式时不太透明。索引我们需要为页面阴影创建一个新的自定义属性。...创建按钮悬停样式 使用相同的变量，还可以创建可用于两个主题的悬停样式。为了实现这一点，当用户将鼠标悬停在按钮上并转换这些属性时，我们将反转颜色。...使用 scope 为按钮创建不同的样式和交互 我们可以利用 scope 为深色和浅色主题的按钮创建不同的样式和悬停交互。可以根据媒体查询或元素的状态修改变量的值，而不是像往常一样使用新值重复属性。
如果你不想去适配深色模式，你希望深色模式和正常模式都一样，很简单，你把values下的内容再复制一份到values-night中，将values-night中的内容全部覆盖掉。...颜色 深色模式下最重要的一点就是设置颜色和主题样式，当前我们是给了一个green的色值作为主题颜色，下面我们改一下，这将是一个比较繁琐的工作，但是做完之后，你会觉得很Nice… 我改是直接拿这个...下面我简单用两张图说明一下： 第一张图是正常模式，第二张图是深色模式。两个资源的name一样，value不一样，也就是说正常情况下你的颜色是绿色，深色模式下就是黑色。...上面的头像那个部分实际上我只改动了背景颜色，因为默认是绿色。下面的菜单Item，需要改动了。...FloatingActionButton 浮动按钮的改动有一点特殊，如果你的样式主题中是NoActionBar，那么你直接通过tint去改变图标颜色是不行的，而是通过页面的样式的colorOnSecondary
你不会希望人们的下眼睑都特别的黑吧，所以，如果我们在这些恶魔般的眼睛上面多加一些光亮，突然间他们就变成了你家门前的魔鬼女郎。...拿按钮举例,即使有了这个相对 “平面” 的按钮，仍然有一些与光线相关的细节： 未点击的按钮(顶部)底部具有黑色的底部边缘，正如夏天中午的，我们站在太阳时影子的样子。...嵌套控制面板的上边缘投射一个微小的阴影 * “ON” 滑块轨道也跟着设置了一些阴影 * “ON” 滑块表面是凹的，底部会反射更多光线 顶部的边框颜色比较其它的深点，这代表一个垂直于光源的表面，因此接收到大量的光...虽然很多关于色彩的东西在你完成设计时并不是很实用，但是我却看到了一些非常有用的东西： * 学习 UI 设计：这是作者创建的一门课程，包含3个小时的彩色设计视频(以及 20 多个小时的 UI设计主题视频)...永远不要使用黑色 (伊恩·斯托姆·泰勒)：这篇文章谈到完全平面化的灰色几乎从来没有出现在现实世界中，同时它也提到了如何饱和灰色阴影 — 尤其是深色阴影 — 为设计增添了视觉丰富性。
surface 颜色 surface颜色是文本所在的背景、边框和其他装饰表面。在浅色主题中，这些是浅色，而不是深色的文本颜色。要使用 hsl 创建浅色，我们将在第三个亮度值中使用更高的百分比值。...大多数品牌都没有以深色主题开始，它是其主要主题的变体，通常是较浅的主题。...另一方面，用户通常为不同的环境选择一个黑暗的主题，比如夜间。这些因素使我在黑暗主题中牢记两件事： 用户在使用此主题时通常会处于黑暗中，因此请在黑暗中进行测试。...，是时候将它们变成与方案无关的属性了。...我的意思是，作为这个配色方案项目中的 CSS 作者，应该很少需要访问特定配色方案的值。我想让它更容易留在主题中。 为了实现这一点，颜色方案的使用应该完全通过通用自定义属性完成，我们将在稍后定义。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
