color-scheme 属性根据操作系统配色方案调整页面样式

系统通常都有亮色和深色的配色方案，通过属性 color-schedule 可以改变元素的配色方案，使其与系统的配色方案一致。

color-scheme 属性有三个参数:
normal: 未指定配色方案，使用系统的配色方案。
light: 使用系统亮色的配色方案。
dark: 使用系统深色的配色方案。

color-scheme 并不适用所有的元素。其适用的元素有表单控件，滚动条和 CSS 系统颜色的使用值。这里只演示在表单元素和滚动条中的使用。

表单元素

表单元素包括，<input>，<button>，<select>，<label>，<datalist>，<progress>，<meter> 等元素，给 html 添加 color-scheme 属性显示效果如下，表单控件的颜色随着属性的添加和删除，发生对应的变化：

// 在 html 添加color-scheme 控制全局元素的样式
html {color-scheme: dark;
}

我们再来看一下滚动条的效果，在亮度模式下，其呈现的颜色是灰色，当切换成深度模式的时候，其颜色更改成深色。

以上就是有关 color-scheme 属性的分享，希望对大家有所帮助。

color-scheme 属性根据操作系统配色方案调整页面样式相关推荐

color-scheme CSS 属性的配色方案
color-scheme CSS 属性允许元素指示它可以轻松呈现的配色方案. 操作系统配色方案的常见选择是"亮"和"暗",或者是"白天模式" ...
主页设计中配色方案的使用
不论你做什么样的设计,色彩都是一个不容忽视的问题.色彩以一种"隐蔽"的方式传达的各种信息,这些信息会影响观看者的心理和感受,左右他们的判断和选择,色彩对于设计而言实在太重要.这篇文 ...
secureCRT中配色方案推荐color scheme (solarized)
secureCRT中的默认配色方案是white / black 白底黑字的, 看久了眼睛不舒服, 而且用vim进行编辑时, 语法关键字无法高亮. 这篇帖子介绍了一个比较好的配色方案: http://b ...
【Linux】修改Xshell 7默认配色方案和会话属性
在Linux系统运维过程中,我们会不可避免的使用到一些第三方工具(Redhat/CentOS 8.x已经在其页面管理控制台提供了自己的远程终端)去连接.登录和操作Linux系统,如:SecureCRT ...
ue修改倚天服务器时间,用UltraEdit Color Scheme Manager修改UE的配色主题
UltraEdit的各种配置信息都保存在一个叫UEdit32.ini的文件中,配色主题是其中的一部分,UltraEdit Color Scheme Manager为修改此部分提供了一个便捷的工具,用户 ...
Sourceinsight最佳配色方案及颜色字体调整方法
在Ubuntu下面用Gedit有一款比较好看的配色,应该是Darkblue.按照那个样子在SI里面做了一个差不多的,按个人喜好,背景色换成黑色,如下所示: 配色的方案文件可以从此处链接免费下载: 配色 ...
html调整disabled按钮颜色,Input Color disabled 属性的用法_HTML对象
Input Color disabled 属性示例代码 D禁用拾色器: document.getElementById("myColor").disabled = true; 输 ...
根据图片获得配色方案_配色系列（1）—从图片中获得配色灵感
根据图片获得配色方案前言 (Foreword) When we start designing mobile web pages, we always need to determine the c ...
stata中心化处理_带有stata第2部分自定义配色方案的covid 19可视化
stata中心化处理 This guide will cover an important, yet, under-explored part of Stata: the use of custom ...

color-scheme 属性根据操作系统配色方案调整页面样式

表单元素

color-scheme 属性根据操作系统配色方案调整页面样式相关推荐

最新文章

热门文章