其实，大众和设计师的这个倾向是有科学依据的。在白色的背景上使用黑色的文本，可读性是最佳的。在不同的测试和研究当中，浅色背景上的深色文本，比起深色背景上的浅色文本，阅读性更强。...R. 1983） 而另外一方面，人们习惯了在白色背景上查看图片，阅读深色的文本。这种状况已经延续了上百年。而在中国，这种状况更是延续了几千年。...丰富多彩的视觉内容，也同样会在深色系的UI 上显得更加炫目。 ? ? ? 昏暗的环境让人放松和沉浸，太亮的背景则会让人紧张，这也是深色系UI的设计来源和基础：设备、内容、活动和场景。...由于平台使用了一组标准的 SaaS 应用程序 UI 组件，因此数据呈现会借助大量的不同类型的表单、小组件、下拉列表、信息图表以及各种图标，此外还有相当多的文本和数字内容。...比如较为复杂多变的小组件、表单、数据表格、大段文本和数字都在浅色背景上来进行设计，而展示性的信息图、分析报告和结果呈现等比较聚焦的信息，则在深色系的背景下呈现。
背景 随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。...Android 安卓在 Android 10（API 级别 29）及更高版本中提供深色主题背景，可以通过以下三种方法启用深色主题背景： 使用系统设置（Settings -> Display -> Theme...）启用深色主题背景 使用"快捷设置"图块，从通知托盘中切换主题背景（启用后） 在 Pixel 设备上，选择"省电模式"将同时启用深色主题背景，其他原始设备制造商 (OEM) 不一定支持这种行为 在应用中支持深色主题背景...，并将应用的默认主题背景设置为深色主题背景（如果已启用）。...android:attr/textColorPrimary 这是一种通用型文本颜色，它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色，该颜色包含一个停用状态。 ?
前言 早在四年前就准备做深色模式的，当时用的三方的SDK，但是SDK上还有bug，不能适配RecyclerView，用上后会很卡，然后就一直放着了，有些用户一直催着要深色模式： 然后这段期间给整上，本以为现在深色模式应用的挺广泛的...所有代码实践在云阅里可以看到： 下载App体验，酷安：云阅 直接查看源码，GitHub：CloudReader 项目实践 1.选定原生Api实现 Android官方深色主题背景开发文档(需科学上网...android:configChanges="uiMode" /> 当某个 Activity 声明它会处理配置变更时，系统会在出现主题背景变更时调用该 Activity 的 onConfigurationChanged...setTheme(R.style.ToolBarDarkActionBar) 4).可以使用系统自己的颜色值： ?android:attr/textColorPrimary 这是一种通用型文本颜色。...它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色。 ?android:attr/textColorSecondary可作为第二文本颜色，相对于上面的颜色较浅。
另外说明一下，本篇文章主要摘自《第一行代码——Android 第3版》的第14章，在此基础之上，我又扩展了一些内容。 为什么要将书中的内容再发一份到博客上呢？...为此，我们以后开发的应用程序都应该尽量按照Android系统的要求对深色主题进行支持，不然当用户开启了深色主题之后，只有你的应用还使用的是浅色主题的话，就会显得格格不入。...开启深色主题后，系统的界面风格包括一些内置的应用程序都会变成深色主题的色调，如下图所示。 ? ?...比如说黑色的文字通常应该衬托在白色的背景下，反之白色的文字通常应该衬托在黑色的背景下，那么此时我们就可以使用主题属性来指定背景以及文字的颜色，示例写法如下： <FrameLayout xmlns:android...然而如果你一定想要脱离系统设置，让自己的应用程序独立控制使用浅色主题还是深色主题，Android对此也是支持的，只要使用AppCompatDelegate.setDefaultNightMode()方法即可
[1240] 前言 早在四年前就准备做深色模式的，当时用的三方的SDK，但是SDK上还有bug，不能适配RecyclerView，用上后会很卡，然后就一直放着了，有些用户一直催着要深色模式： [1240...] 然后这段期间给整上，本以为现在深色模式应用的挺广泛的，在项目中实践了一下还是躺了很多坑，梳理一下实践过程及遇到的问题。...所有代码实践在云阅里可以看到： 下载App体验，酷安：云阅 直接查看源码，GitHub：CloudReader 项目实践 1.选定原生Api实现 Android官方深色主题背景开发文档(需访问国外网站)...setTheme(R.style.ToolBarDarkActionBar) 4).可以使用系统自己的颜色值： ?android:attr/textColorPrimary 这是一种通用型文本颜色。...它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色。 ?android:attr/textColorSecondary可作为第二文本颜色，相对于上面的颜色较浅。
称为“深色模式”（有时称为“夜间模式”或“深色主题”）的设计功能会修改用户界面的配色方案，使其主要使用深色或黑色背景以及浅色文本和图形元素。...从本质上讲，深色模式颠倒了界面的标准配色方案，用较浅的背景代替较暗的色调，用较浅的字体代替更鲜艳的色调。移动应用程序、网站和操作系统的用户被这种倒置产生的引人注目的视觉美感所吸引。...深色模式的主要特征 深色调色板：为了与屏幕上较亮的项目形成鲜明对比，深色模式通常使用黑色、深灰色或海军蓝色调作为背景颜色。...文本对比：为了保持深色背景下的易读性，在深色模式下，文本和其他材料通常以较浅的颜色呈现，例如白色或浅灰色。...更好的可读性：将文本放在深色背景下可以使其更容易阅读，特别是对于对眩光敏感或有特定视觉障碍的人来说。与黑色背景形成鲜明对比的浅色文本经常用于深色模式设计中，以帮助用户在不疲劳的情况下感知和理解信息。
background color是应用在屏幕背景上，在UI组件的后面的颜色。error color是应用在组件上以突出错误的颜色。通常情况下，这些颜色与品牌没有关联。...由于屏幕上的大部分颜色都是background和surface的颜色，在深色主题中，与浅色主题相比，background和surface的颜色会有一个较低的值（亮度）。...我们需要在我们的用户界面中应用色彩对比，不仅是因为它看起来不错，而且主要是因为色彩的可及性。我们应该确保前景（文本、图标）和背景之间的颜色对比是适当的。...白色背景上的黑色文字有21:1的对比度。 Material设计指南确保在背景和前景（文本或图标）之间应用WCAG建议的最小对比度，即4.5：1。...该工具生成的代码适用于Flutter、Web和Android平台。
背景（0dp 高程叠加） 前景（1dp 高程叠加） 主色调 次要色 在背景上的元素 在前景表面上的元素 在主色调上的元素 在次要色上的元素 行为 深色主题应该可以通过外在显示的开关控件，来打开或者关闭的...可访问性强的不饱和色彩 深色主题应该尽量避免使用高饱和度的色彩，因为它们多数不能够达到 WCAG 对于文本的对比度要求（4.5:1）。高饱和度的色彩能够在深色背景上产生炫光的视觉效果，产生视觉疲劳。...错误 避免在深色主题中使用高饱和度的色彩，因为它们可以在深色的背景上形成炫光效果。 ? 默认主题下，在顶部菜单中使用配色方案中的主色。 ?...文本和图标色彩 当文本、图标等元素，被置于背景或者某个控件上方的时候，为了进行区分的时候，所应该使用的色彩。 在默认情况下，深色主题下的被置于色块上的文本和图标元素，色彩是以黑白两色为主。 ?...在深色背景上的浅色文本 当浅色文本出现在深色背景上的时候（这里是白色文本置于黑色背景之上），它应该遵循下面的不透明度设置规则： 最重要的内容，白色文本不透明度设置为87% 中等重要的内容，白色文本的不透明度为
您可能会在深色背景上找到暗文本不易辨认的地方。您可能还会发现在暗模式下启用“增加对比度”会导致暗文本和深色背景之间的视觉对比度降低。...当您需要自定义颜色时，将颜色集资源添加到应用程序的资产目录中，并指定颜色的浅色和深色变体，以便它可以适应当前的外观模式。 避免使用硬编码的颜色值或不适应的颜色。 ?...对于自定义颜色，目标是对比度为7：1，尤其是对于较小的文本。 对比度越高，深色背景下颜色就越浅，浅色模式下就会颜色越深。 ? ?...因此，在不同的情况下，浮出层的用法是不一样的，这一点必须注意。 ? 003.材质（Materials） 通过下图，我们可以理解，材质主要可以理解为内容区块背景叠加到基础色上所呈现的透明度。...使用子菜单来管理复杂性：子菜单是一个情境菜单项，显示逻辑相关命令的二级菜单。 为子菜单提供描述其内容的直观标题，以便人们可以预测子菜单的命令而不会泄露它们。
苹果在2019年6月发布的iOS13中增加了“黑暗模式”，用户打开“黑暗模式”后，应用界面将会变为深色，随后Google Android 10的发布同样搭载“黑暗模式”。...比如置顶聊天窗口的灰色会比其他窗口稍浅，聊天消息的标题和摘要也采用了明度不同的浅灰色来区分层级。除此之外，微信的彩色线型图标在黑色背景上也变得更具科技感，颜值提升了不少。...知乎在设计夜间模式时，知乎采用了主色调蓝色+深灰色的搭配，深蓝和灰色作为背景，展示出的效果既有强烈的对比，又摆脱了深色的压抑感。 与豆瓣不同，知乎的文本颜色选择了对比度更低的灰色，通过字重进行区分。...百度网盘 高饱和度的色彩会在深色背景上产生炫光的视觉效果，引发视觉疲劳。百度网盘的深色模式下，背景接近全黑，图标却没有太大的调整，给用户带来的阅读体验并不好。...同样，由于背景颜色太深，导致百度网盘的文本和背景对比度太大，也存在难以阅读的情况，对于诵读困难症患者来说，在阅读时会感觉文字在旋转、模糊。
修改背景 4. 菜单适配 5. BottomNavigationView 6. TabLayout 7. FloatingActionButton 8. 深色模式判断 9....修改背景 就拿登录页面的xml来说明，现在是这样的。 我们在设置页面的背景颜色的时候就要想到它在默认情况下和在深色模式的区别。...将鼠标悬停在这个颜色值上会出现一个弹窗，告诉你这个页面在默认和深色模式下的背景颜色的色值，通过这个你就知道你的改动有没有效果。...像这种常规的文字颜色，背景颜色改动起来其实是很简单的。那么我们难度上升一下，item颜色要怎么去改。 4. 菜单适配 这张图我想你应该不陌生，如果你是一篇一篇看过来的话，这是深色模式下的样子。...上面的头像那个部分实际上我只改动了背景颜色，因为默认是绿色。下面的菜单Item，需要改动了。
相反，当我们看到负极性的东西时，更少的光进入眼睛，导致我们的瞳孔扩大：事物变得模糊。黑色背景上的白色文字会显得更大，并产生光晕…… 这是因为一个字母发出的光被其他字母反射。这导致了负极性难以阅读。...开发工程师在使用Xcode，Android Studio进行程序开发时，这些开发平台可以用非常简单的方法来为应用的亮色模式提供一组设计素材，为暗模式提供另一组素材。从技术上讲，暗模式很容易实现。...另外，在Android系统中，有一个非常有用的功能，称为“允许强制深色”。基本上，这是Android的自动暗模式。它会与黑暗模式兼容，虽然不完美，但是看起来还不错。...您可以在WGAG上检查对比度是否合格。 ? MD设计中的深色和浅色模式主色调整 ? · 更新配色 我们必须为黑暗模式单独设定一套调色板。...链接与纯文本几乎没有区别，因此很难找到大段文字中的隐藏链接。 ?
系统颜色在浅色和深色背景以及明暗模式下都可以单独和组合使用。 不要在您的应用程序中对系统颜色值进行硬编码。下面提供的颜色值仅供APP设计过程中参考。...您可能会发现在深色背景上深色文字难以辨认的地方。您可能还会发现，在“黑暗模式”下启用“增加对比度”会导致黑暗文本和黑暗背景之间的视觉对比度降低。...文字颜色 鲜艳度可以帮助在深色背景上保持文本的良好对比度。 使用系统提供的标签颜色作为标签。初级、次级、三级和四级标签颜色会自动适应浅色模式和深色模式下的外观。 使用系统视图绘制文本字段和文本视图。...系统视图和控件使你的APP文本在所有背景上都看起来很好，并自动调整以适应是否有Vibrancy。当你可以使用系统提供的视图来显示该文本时，请不要自己绘制文本。...这是标准视频（4：3,16：9，以及最高2：1）和超宽视频（任何高于2.40：1）的默认查看模式。 iPhone XS上的查看模式示例 ? ? ? ? iPhone XS上的填充示例 ?
相比较去年写的Android 9适配，这次Android 10的内容有点多。没想到写了我整整两天，吐血中。。。 准备工作 老规矩，首先将我们项目中的 targetSdkVersion 改为 29。...4.深色主题 Android 10 新增了一个系统级的深色主题（在系统设置中开启）。虽然深色主题并不是强制适配项，但是它可以带给用户更好的体验： 可大幅减少耗电量。...2.自动适配（Force Dark） Android 10 提供 Force Dark 功能。一如其名，此功能可让开发者快速实现深色主题背景，而无需明确设置 DayNight 主题背景。...如果您的应用采用浅色主题背景，则 Force Dark 会分析应用的每个视图，并在相应视图在屏幕上显示之前，自动应用深色主题背景。...有些开发者会混合使用 Force Dark 和本机实现，以缩短实现深色主题背景所需的时间。
从文本颜色上我们举个简单的例子： 通常的网站里都会有正文（主要文本），帮助提示信息（次要文本），文本占位符。...，也不适合通过叠加图片遮挡来呈现效果的处理，但是用在文章博客中的插入图片非常简单有效，图片可以自然地叠加到纯色深色的背景色上。...和 Edge 12+支持上主题切换 css-vars-ponyfill 这个npm包可以使得ie9+/edge12+支持上css自定义属性，它是一个带有选项的兼容方案，大概原理就是通过监听style...深色模式不适合一些非深色风格产品的展示，深沉的背景色会影响产品风格呈现、传递的情感和用户观看时候的心情，不适当的颜色搭配容易引起反感。...针对第二点，可以举以下的场景来说明：同样是白色，有色背景下的白色，在深色模式下可能还是保持白色；而作为背景色的白色在深色场景下会对应调整为深色。 ?
MDC的背景说明 Material Components for Android（MDC）是从以前的 Design Support Library 库演变而来，是与 AndroidX 来搭配的。...例如，文字有新的默认的 appearance MDC 1.1.0 中提供的一些新组件和更新组件包括： 扩展 FAB 日期选择器 切换按钮 底部应用栏 黑色主题支持 在 Android 10 中引入了系统范围的深色主题支持...默认情况下 colorSurface android:colorBackground 使用深灰而不是黑色来减轻眼睛疲劳，使高程度更明显，并确保与文本和其他元素形成适当的对比度。...海拔表面增亮：所有 MDC 组件都支持其表面增亮来传达黑暗主题中的海拔。指南中的白色覆盖投影映射到组件上设置的 elevation 的数值。 可访问性：MDC 利用颜色来区分是否可以访问。...这主要包含更好的 "话语提示" 在有用的内容描述、功能和各部分的排序。例如，TextInputLayout现在按正确的顺序读取其提示，输入以及帮助程序或错误文本。
深色主题设计将背景变为深色模式，并使字体和其他元素变为浅色/白色。 例如，现在在 Facebook 等最受欢迎的应用程序中都可以使用深色模式。切换到深色模式有助于人们减轻眼睛疲劳并更方便地浏览。...请记住，不寻常的“疯狂”排版并不适合所有产品。定义文本在您的应用程序中的具体功能。如果它提供了额外的信息功能，请不要对字体进行太多实验。但是，例如，在在线杂志中，您可以使用各种版式，使布局更有趣。...例如，宜家使用 AR 来展示一件家具在您家中不同位置的外观。 8、渐变和透明元素 这个UI设计趋势是关于渐变和透明度的。设计师通常在按钮和应用程序的背景上使用渐变。...您可以使用从浅色到深色主题的过渡，从而将屏幕分成两个逻辑部分。此外，您可以在按钮上使用渐变主题，使它们在屏幕上弹出。 玻璃拟态的概念也值得一提。...玻璃态的主要特点： 1、透明度和背景模糊； 2、透明物体上的细光边框； 3、分层; 4、鲜艳的色彩。 9、舒适的视觉效果 舒适的视觉效果是大部分用户都喜欢的。
12 及更高版本上，Jetchat 界面可根据用户壁纸自动调整配色，无论是浅色主题还是深色主题都可提供适合品牌的美观体验。...Material Design 3 有了新的字体规格，包括了由 Material Design 2 适配而来的文本样式。...Jetchat 字体规格中的不同文本样式。...这是 Material 2 版本的一个简单实现，使用了 ExtendedFloatingActionButton 可组合项，内部使用了 Icon 和 Text、可组合项以及自定义的 Primary 背景颜色...实现这些更改不需要额外的工作，在 Compose Foundation 1.1 及更高版本的滚动容器可组合项中拉伸滚动默认处于开启状态；Android 12 上提供的闪光波纹适用于所有 Material
浅色或亮色文本或图片，搭配深色背景，起到视觉上的层级呼应，突出主题的同时，瞬间吸引用户注意，赋予界面生命力。 如何设计深色系网页？...1、运用白色的文字和深色背景形成反差效果 虽然深色背景容易给人压抑的感觉，但是把深色背景运用到白色文字上面则是另外一种视觉效果差的呈现，白色的文字颜色和深色的背景可以形成鲜明的对比，这样就能突出文本内容...，根据人们视觉聚焦法则人们很容易把视觉停留在文字上，引起人们对文字的关注，这也是诸多企业和高端产品网站偏爱的设计风格。...2、搭配其他颜色增加明暗度和对比度 深色的背景搭配其他亮色瞬间打破由于主色带来的视觉疲劳，让网站看起来更容易的被人接受。...留白区域能够很好的指引用户，如果元素过多，那么用户的注意力会分散。留白能够让用户尽快的寻找到所需要的信息，提高用户体验。 通过黑白可以创建具有对比性的背景。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
