首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

特定文本需要表面才能在深色模式下变亮

基础概念

在深色模式下,特定文本需要变亮以确保其可读性。这通常涉及到使用对比度较高的颜色组合,使得文本在深色背景上清晰可见。深色模式是一种用户界面设计,旨在减少屏幕亮度,从而减轻眼睛疲劳,特别是在低光环境下。

相关优势

  1. 提高可读性:通过使用高对比度的颜色组合,确保文本在深色背景下清晰可见。
  2. 节能:深色模式可以减少屏幕亮度,从而降低能耗。
  3. 视觉舒适:减少眼睛疲劳,特别是在长时间使用电子设备时。

类型

  1. 系统级深色模式:操作系统级别的深色模式,如Windows的深色主题、macOS的深色模式。
  2. 应用级深色模式:特定应用程序内的深色模式设置,如网页、移动应用等。

应用场景

  1. 移动设备:在夜间或低光环境下使用手机或平板电脑时。
  2. 桌面应用:长时间使用电脑工作,减少眼睛疲劳。
  3. 网页设计:确保网站在不同设备和环境下都能提供良好的阅读体验。

遇到的问题及解决方法

问题:特定文本在深色模式下没有变亮

原因

  1. CSS样式问题:可能是因为CSS中没有正确设置深色模式下的文本颜色。
  2. JavaScript逻辑问题:可能是因为JavaScript代码没有正确检测或应用深色模式。

解决方法

  1. CSS样式调整: 确保在CSS中使用媒体查询来检测深色模式,并设置相应的文本颜色。例如:
  2. CSS样式调整: 确保在CSS中使用媒体查询来检测深色模式,并设置相应的文本颜色。例如:
  3. JavaScript检测和应用: 使用JavaScript检测系统是否处于深色模式,并动态调整样式。例如:
  4. JavaScript检测和应用: 使用JavaScript检测系统是否处于深色模式,并动态调整样式。例如:
  5. 然后在CSS中定义.dark-mode类的样式:
  6. 然后在CSS中定义.dark-mode类的样式:

参考链接

通过以上方法,可以确保特定文本在深色模式下变亮,提高用户体验和可读性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

深色模式,不要使用黑色,而是使用深灰色,用来呈现较环境中的高程和大范围的区域。 色彩与调性 ? 在深色主题的UI当中,尽可能使用数量有限的色彩,确保绝大部分的区域需要保持深色。...默认主题仅仅使用阴影来控制高程效果,而深色主题之下,还需要借助调整表面色彩来控制高程效果。 这些表面叠加层旨在最大程度地提高易读性,同时确保不同高程的元素彼此容易被分辨。...可访问性与对比度 深色主题下,深色必须暗到一定程度,才能让白色的文本足够清晰地呈现。文本和背景之间的对比度级别至少要达到 15.8:1 行。...在这个深色主题中,使用了原色(紫色 200)和主色变体(紫色700)。 次要色 次要色可以用来凸显你的UI 界面一些特定的元素和区域。...深色 UI 使用文本和小图标时的基准色。

9.6K10

给你的应用建立一套配色方案

* { --brand: #0af; --brand: hsl(200 100% 50%); } 为了实现brand color 变暗或变亮的概念,比如 20%,hsl 颜色值的 3 个通道需要提取到它们自己的自定义属性中...surface 颜色 surface颜色是文本所在的背景、边框和其他装饰表面。在浅色主题中,这些是浅色,而不是深色文本颜色。要使用 hsl 创建浅色,我们将在第三个亮度值中使用更高的百分比值。...在深色主题中,表面颜色应为深色。...我的意思是,作为这个配色方案项目中的 CSS 作者,应该很少需要访问特定配色方案的值。我想让它更容易留在主题中。 为了实现这一点,颜色方案的使用应该完全通过通用自定义属性完成,我们将在稍后定义。...这样,使用设计变量的人永远不必担心当前设置的是哪种配色方案,他们只需要使用表面文本颜色。而不是color: var(--text1-light)使用color: var(--text1).

1.7K40
  • PS图层混合模式实例详解

    如下图,混合色为黑色的区域均显示在结果色中, 而白色的区域消失,这就是线性加深模式的特点。 7,深色混合模式 深色混合模式依据当前图像混合色的饱和度直接覆盖基色中暗调区域的颜色。...深色混合模式可反映背景较亮图像中暗部信息的表现, 暗调信息亮部信息。 8,变亮混合模式 变亮混合模式与变暗混合模式的结果相反。...在强光模式,当前图层中比50%灰色亮的像素会使图像变亮;比50%灰色暗的像素会使图像变暗,但当前 图层中纯黑色和纯白色将保持不变。...19,实色混合混合模式 实色混合模式当混合色比50%灰色亮时,基色变亮;如果混合色比50%灰色暗,则会使底层图像变暗。...23,饱和度混合模式 饱和度混合模式是在保持基色色相和亮度值的前提下,只用混合色的饱和度值进行着色。基色与混合色的饱和度值 不同时,使用混合色进行着色处理。

    1.6K30

    最新iOS设计规范七|10大视觉规范(Visual Design)

    深色模式,系统为所有屏幕、视图、菜单和控件使用较暗的色彩,并使用更具活力的颜色,使前景内容在较暗的背景突出。深色模式也支持所有辅助功能。...在浅色和深色外观中测试您的设计。查看两种外观的界面外观,并根据需要调整设计以适应每种外观。在一种外观上运作良好的设计可能在另一种外观上无法运作。...当你使用动态颜色对其进行着色或添加活力时,符号在两种外观模式看起来都很棒。 必要时为明暗外观设计单独的标志符号。在浅色模式使用线性图标或符号,在深色模式可能则需要更实心的填充图标或符号。...文字颜色 鲜艳度可以帮助在深色背景上保持文本的良好对比度。 使用系统提供的标签颜色作为标签。初级、次级、三级和四级标签颜色会自动适应浅色模式深色模式的外观。 使用系统视图绘制文本字段和文本视图。...当视频内容使用嵌入式信箱或邮筒模式填充以符合特定的纵横比时,iOS无法根据用户选择的观看模式正确地缩放视频。嵌入的视频会使其在全屏模式和适合屏幕模式显示得更小。

    8K30

    黑暗模式UI设计风潮来袭,设计师应如何应对?

    设计师的主要职责之一,就是为产品定制合理的视觉,基于目标用户的特征和产品的设计目标,给用户特定的感觉。UI和UX设计师需要在这个过程中通力协作,而 UI设计师更是要确保产品的 UI 和视觉最终落地。...大段的文本深色系UI 阅读体验比浅色系背景要差一些(之前的实验已经验证过了),在深色系UI 中,文本适合以小块的形式呈现,并且对比度和亮度应该控制在一个相对较高的水平,通常使用的深灰色在这里肯定不适用...比如较为复杂多变的小组件、表单、数据表格、大段文本和数字都在浅色背景上来进行设计,而展示性的信息图、分析报告和结果呈现等比较聚焦的信息,则在深色系的背景呈现。...为什么苹果直到今年在自家的 Mac系统中加入深色系主题,我们可以想见这当中的难度。至少,在 Mac系统中,即使是在深色主题之下,也没有全局采用深色系背景。 ?...深色系仪表盘 UI 中, 分析和信息图在深色背景良好地呈现,但是仍需要仔细处理才能确保足够的对比度。 深色系 UI 的设计注意事项 最后,需要强调的是,深色系UI 在具体处理的时候,要非常的小心。

    69520

    DarkMode(1):产品应用深色模式分析

    这样,在显示黑色时,OLED 的屏幕像素只需要关闭,就是纯正的黑色了。 在 macOS 的深色模式中,基底色并不是纯黑,而是带有一定灰度的黑色。...一般情况,你可以使用各种现成的工具,只需要数入两种颜色的数值,就可以直接看到最终的计算结果了。...,系统界面的背景色会自动地去对应 SystemBackground,在浅色外观 SystemBackground=#FFFFFF(白色),在深色外观 SystemBackground=#000000...值得注意的是,在浅色模式,许多元素是存在投影的,例如开关按钮、拖动条的拉动点……而到了深色外观中,这些投影被统统移除了,这也是苹果设计的细微精致之处。...例如,深色模式其实未必适合文字的阅读,以及即使开启了深色模式,在昏暗环境中使用电子设备对视力的伤害也不容小觑。

    1.8K20

    暗黑模式在 Trip.com App 的实践

    2.1 三大要点 1)元素层级越高,表面颜色越浅 UI视觉层次致力于以一种用户能够快速理解的方式呈现产品内容,那么在 Dark Theme 如何保证视觉层级依然有效呢?...在 Light 模式中,我们使用带投影的白色卡片来模拟现实世界的空间深度感,而切换到 Dark 模式,则需要通过较浅的颜色表面来表示高度。层级越高,越接近于光源,表面的颜色就越浅。 ?...3)增加对比度,提升可用性 依据 WCAG2.0 AA 设计标准,文本的视觉呈现以及文本图像至少要有4.5:1的对比度。深色表面选取白色文字达不到 AA 标准。 ?...UI中的彩色,统一进行了降饱和处理,这些彩色会应用于不同的场景,可能是背景,行动点,标签,或者是图标等等地方,那么当彩色用于背景时,为了确保文字和背景色有足够对比度,低饱和度的浅色背景就需要配合深色字一起使用...比如白色、鲜亮的衣服,到了暗环境,就会呈现灰色、低饱和度的暗色。 ? 三、实现方案 Trip.com App 使用原生系统与 React Native 混合开发的模式

    1.9K20

    如何在网页设计中实现深色模式:增强用户体验

    文本对比:为了保持深色背景的易读性,在深色模式文本和其他材料通常以较浅的颜色呈现,例如白色或浅灰色。...更好的可读性:将文本放在深色背景可以使其更容易阅读,特别是对于对眩光敏感或有特定视觉障碍的人来说。与黑色背景形成鲜明对比的浅色文本经常用于深色模式设计中,以帮助用户在不疲劳的情况感知和理解信息。...深色模式界面可以通过使用深色背景和减少浅色像素数量来帮助延长移动设备的电池寿命并降低笔记本电脑和台式显示器的能耗。 视觉焦点和注意力:您可以故意在网页上使用深色模式来突出显示特定的材料或方面。...以下是如何在保持可访问性的同时在黑暗模式进行设计: 保持足够的对比度:确保深色背景不会过多遮挡文本或交互功能,以便仍然可以阅读和区分它们。...以下是一些需要记住的重要事项: 清晰的视觉提示:为了让用户轻松地在浅色和深色主题之间转换,请在深色模式可用并激活时清晰地显示视觉提示。

    19210

    如何在 Vue 3 + Element Plus 项目中实现动态设置主题色以及深色模式切换

    模板中的深色模式切换按钮 在模板中,可以使用一个按钮来切换模式,按钮的文本根据当前模式动态变化,显示“Dark”或“Light”: <el-button type="primary...经过上面的设置,我们得到以下效果: 四、动态切换主题色 除了<em>深色</em><em>模式</em>的切换,用户可能还会<em>需要</em>根据个人喜好自定义应用的主题色。...在正式的项目开发中,主题色的动态切换功能会非常有用,特别是在<em>需要</em>增强用户体验、提供个性化设置的场景<em>下</em>。...以下是一些关键点,说明该功<em>能在</em>项目中的实际应用价值: 品牌一致性:项目可能<em>需要</em>根据品牌颜色动态调整整个应用的主题色。...多主题支持:在大型项目中,往往<em>需要</em>支持多种主题(如<em>深色</em><em>模式</em>、浅色<em>模式</em>,以及不同的颜色方案)。利用动态主题切换可以方便地管理多个主题,并让切换过程平滑且高效。

    12610

    全网Bento和3D?点评2024年UXUI设计趋势

    如果是致力于打造高端产品体验的设计师,推荐细致地了解一这门技术并运用到自己的项目中。3)AI视觉设计AI作为2023年科技圈火了一整年的概念,能在2024年再火上一年应该是毫无争议的。...8)深色模式深色模式大概已经流行了3年+,但笔者认为这个风格还会继续流行下去:越来越多的用户开始有意识地尝试切换深浅色,并且逐渐固定自己的习惯。...在浅色模式最普及的时代,光效是很难体现的(因为背景都是白色),而深色模式则为这些光线的运用提供了绝佳的舞台。...光线可以作为视觉主题,同时也能持续引导视线流动在深色模式,光线容易形成聚光灯效应,更好地突出主体,同时也赋予了页面或产品更沉浸的感受。...考虑到还有大量的数字产品没有完成深色模式的改造,光效作为深色模式的绝佳搭配,未来还有广阔的发挥空间。10)智能设备与HMI设计随着人们接受程度的提高,手机和电脑之外的移动智能设备开始走入千家万户。

    40510

    【Web技术】623- 简单好用的前端深色模式主题化开发方案

    甚至可以在运行时实时新增主题,摆脱传统css主题文件加载模式的主题需要预编译内置不能随时修改的弊端。下面我们来看一如何使用css自定义属性来完成深色模式和主题化的开发。...主题切换器开发 首先我们需要打通一套支持css自定义属性的开发模式。 CSS自定义属性使用 这里简单介绍一CSS自定义属性,有时候也被称作CSS变量或者级联变量。...图1 语义化变量示意 使用统一语义变量控制组件表现 需要定义多少的变量恰当,这个取决于网站的色彩空间约束范围和使用场景的定义粒度。...如果图片来自用户输入,其他地方的截图,这时候需要稍微处理一些降低亮度。图片简化地获取当前的主题状态可以在body上增加一个ui主题是否是深色模式的属性。 深色方案一:图片增加透明度。...针对第二点,可以举以下的场景来说明:同样是白色,有色背景的白色,在深色模式可能还是保持白色;而作为背景色的白色在深色场景会对应调整为深色。 ?

    2.1K10

    Refactoring UI

    、然后跳回设计模式,开始设计下一个功能 不要在抽象的工作中不知所措 尽早构建真实的东西,这样你的想象力就不必承担所有繁重的工作 # 做一个悲观主义者 不要在设计中暗示尚未准备好构建的功能 设计最小的有用版本...;例如,当你显示多个类似数据时,它们需要易于浏览,比如在仪表板上 在这种情况,可以添加标签,但将其视为辅助内容。...元素的固定宽度比相对宽度更有意义 这也适用于组件内部--除非你真的想让它缩放,否则不要使用百分比来调整大小 # 在需要缩小元素 不要根据网格来确定元素的大小, 而是给它们一个最大宽度, 这样它们就不会太大...)来说,这意味着绝大多数文本都应左对齐 # 不要将长格式文本居中 居中对齐对于标题或简短、独立的文本块来说非常合适 如果内容超过两三行,几乎总是左对齐更好看 如果有几个文本需要居中,但其中一个有点太长...需要有多种(5-10 种) 浅色和深色色调可供选择 强调色 每个网站还需要一些强调色来向用户传达不同的信息 # 预先确定您的色调 事先确定一套固定的色调,以便在工作中进行选择 # 先选择基色

    70930

    一篇文带你了解黑暗UI模式的过去,现在和未来

    尽管黑暗模式,用户需要花费更多的时间阅读和分析内容,但他们可能更不容易受干扰性内容的影响。 当您快速扫描屏幕以查找视觉/彩色元素时,暗模式效果也很好。...即使深色模式概念还没有发布,某些产品(如奢侈品牌,流媒体服务)也使用了深色的用户界面……为了传达一种高贵的感觉,使内容更加凸显,并结合使用场景(您最有可能在晚上在昏暗的房间中使用流媒体服务,从而使黑暗的...· 考虑更改你的主色 应该避免在黑暗模式使用过于饱和的颜色:它们可能太亮和/或降低了可读性。Google Material Design建议在浅色模式使用500色度,在深色模式使用200。...MD设计中的深色和浅色模式主色调整 ? · 更新配色 我们必须为黑暗模式单独设定一套调色板。请记住,某些内容可以在浅色模式共享同样的颜色,但是在黑暗模式,则可能不行。 ?...浅色和深色模式的iPhone屏幕 如果图标颜色在明暗模式切换时不变,也许并不合适。

    1.4K50

    基础渲染系列(三)多样化的表现——组合纹理

    而且,存储大量的、近处需要的额外数据,是一种极大的浪费。 增加纹理像素密度的另一种方法是平铺纹理。然后,你可以将其变小,显然你会得到一个重复的图案。但这可能不会在近距离观察时特别明显。...在向纹理添加细节时,你可能希望通过变暗,也可以通过变亮来实现。 要使原始纹理变亮,你需要大于1的值。假设最大为2,这会使原始颜色加倍。可以通过在将细节样本与原始颜色相乘之前加倍细节样本来支持。 ?...所有低于½的值将使结果变暗,而高于½的任何值将使结果变亮。 因此,我们需要一个特殊的细节纹理,该纹理以灰色为中心。下面是网格的这种纹理。 ? (网格细节纹理) 细节纹理必须是灰度的吗?...现在需要做的就是在细节纹理的导入设置中启用Fadeout Mip Maps。请注意,这也会自动将滤镜模式切换为三线性,以便逐渐淡化为灰色。 ? ?...当然,这需要四个额外的纹理样本,因此它不是无代价提供的。 你还可以使用贴图来控制在何处应用细节纹理,以及在何处省略细节纹理。在这种情况,只需要单色贴图,并且它可以用作蒙版。

    2.6K10

    不懂设计的产品不是好开发

    Surface、background、error colors:Surface color适用于卡片、Menu和Sheet的表面色。...通常情况,这些颜色与品牌没有关联。因此,如果我们想的话,我们可以将相同的Surface、background、error color应用于所有公司的特定主题上。...有时我们需要比交通灯颜色更多的颜色。在不同的背景挑选颜色通常是开发者失败的地方,或者说是感到压力很大的地方。在这种情况,我们可以从色轮上的色彩调和中得到一点帮助。...我们需要在我们的用户界面中应用色彩对比,不仅是因为它看起来不错,而且主要是因为色彩的可及性。我们应该确保前景(文本、图标)和背景之间的颜色对比是适当的。...通常情况,公司有自己的品牌字体,但我们不需要在应用程序中使用他们的字体。 为了应用一个字体系统,首先,我从Google Fonts中挑选了三种字体。

    2.5K20

    因为我们第一个研究中的目标物体使用了深色木质纹理,我们怀疑白色阴影颜色与深色物体的高对比度可能让参与者更自信地写出表面接触,因此在我们的第二个实验中,我们将探索物体与其投射阴影之间颜色对比度的影响。...除非处于非常黑暗的场景中,否则通常需要将光线移开才能在这些类型的显示器上显示黑色图像。第二,黑色颜色和HSL颜色空间中亮度较低的其他颜色对用户来说是透明的,或者根本显现不出来。...当使用亮模式或暗模式显示黑白用户界面时,如下图所示,可以观察到这种效果。当使用传统的亮模式用户界面(左)时,黑色的字母从背景中消失,而当使用暗模式用户界面(右)时,背景看起来完全透明。...结果表明,至少在我们的测试环境中的特定条件,35% 不透明度和附加层混合产生的图像在全息透镜和平板之间最匹配。 对于我们的结果,我们首先能够验证我们对感知人性的衡量。...我们需要探索更多变量的影响,例如动态的或特定应用程序,如视频会议应用程序等,以了解这些因素如何对用户感知产生影响。

    1.3K20

    深色模式来啦!

    为什么需要深色模式 CLS 作为一款日志与指标数据分析产品,用户在实际使用中,日志的检索分析以及仪表盘查看等环节,都会涉及长时间的文本浏览和图表查看行为。...从用户角度,CLS 收到用很多户反馈,期待 CLS 提供深色模式的界面,觉得暗色模式查看文本更易专注,报表的展示效果也更炫酷。...日志检索场景 该场景,用户需过滤出符合条件的日志原文并查看,文本量多且信息密度高,使用深色模式有以下好处: 减轻视觉疲劳:深色模式降低屏幕亮度,有效地减少了光线对眼睛的刺激。...在长时间查看文本的情况深色模式可以显著减轻用户的眼睛疲劳感。 提升文本可读性:在深色背景,屏幕上的文字呈现出的对比度使得文本更加清晰易读。...对于需要长时间浏览文字的用户来说,深色模式无疑为他们提供了更好的条件,有助于提高工作效率和准确性。 2.

    6610

    这 7 个大部分人不知的自带功能,能让 Chrome 变得很好用

    而新开发的功能则被隐藏在 Chrome flags —— 作为新功能的试验田,通过开启特定的 flags 来在稳定版中尝鲜新功能,即可以尝鲜也避免了可能的不稳定风险,下面我们挑选了一些稳定性尚可且比较实用的...开启方法和移动端一样, 在 Chrome flags 上搜索「Parallel downloading」来开启 Chrome 的并行下载功能,你可以尝试大个文件以及多个文件,你会发现速度会提高那么一些...,点击之后就会直接将当前网页转换成阅读模式,不过比起移动端功能丰富的设置项,桌面端的阅读模式要简陋很多,也无法对主题、字体和字号大小进行调整。...,允许已经加入深色主题的网站跟随系统调整深色主题,只不过目前绝大多数的网站并不支持这一特性,而在 Chrome 中其实也支持类似功能,只不过该选项并非是默认开启同样需要通过在 Chrome flags...开启方式: chrome://flags/#global-media-controls 鼠标悬停标签页展示网页预览图 开的标签页多了之后会逐步挤占标签页的标题文本信息,想要知道里面网页内容就只能切换到该标签页查看

    67620

    Material Design Compoents 1.1.0

    默认情况 colorSurface android:colorBackground 使用深灰而不是黑色来减轻眼睛疲劳,使高程度更明显,并确保与文本和其他元素形成适当的对比度。...海拔表面增亮:所有 MDC 组件都支持其表面增亮来传达黑暗主题中的海拔。指南中的白色覆盖投影映射到组件上设置的 elevation 的数值。 可访问性:MDC 利用颜色来区分是否可以访问。...Primary 和 Surface 颜色切换:MDC 组件遵循指南,减少在深色主题中使用 Primary 色。...这是由一个新的颜色属性 colorPrimarySurface (更加当前的模式在 colorPrimary 和 colorSurface之间切换)和组件的PrimarySurface style 来提供支持...例如,TextInputLayout现在按正确的顺序读取其提示,输入以及帮助程序或错误文本。 MDC的下一步计划 我们已经收到了您关于 MDC 版本的反馈。我们致力于更新并且整合您的重要贡献。

    1.1K10

    DarkMode(3):sass函数实实现深色模式操作

    上文《DarkMode(2):深色模式解决方案——css颜色变量实现Dark Mode》,完全基于样色抽离变量,然后使用预处理其,生成两套样式。切换样式文件。...更新详细,推荐阅读:《Introducing Themify: CSS Themes Made Easy 》、《How to Create a Dark Mode in Sass》 sass颜色函数实现深色模式...HSL给我们带来了一个更直观的颜色控制,我们时常需要让一个颜色比另一个颜色更暗一点或者说更亮一点。比如说“a:hover”状态我们需要把一个颜色变暗一点,那么使用“HSL”是非常方便的。...这一部分的实现,需要和设计师紧密地配合。...所以,对于目前前端所处的环境,其实也没有啥好讲的 先回去睡觉,明天再讲 转载本站文章《DarkMode(3):sass函数实实现深色模式操作》, 请注明出处:https://www.zhoulujun.cn

    1.3K10
    领券