- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端Q
现代 CSS 解决方案：accent-color 强调色
accent-color 还支持和 color-scheme[8] 一起使用。 OK，什么是 color-scheme 呢？ color-scheme 是 CSS 的一个属性，用于指定网页的颜色方案或主题。它定义了网页元素应该使用哪种颜色方案来呈现内容。 当使用 color-scheme: light dark 时，浏览器会根据用户代理的默认颜色方案来选择适当的颜色方案。 hl=zh-cn#progress [7] color-scheme: https://web.dev/articles/color-scheme? hl=zh-cn [8] color-scheme: https://web.dev/articles/color-scheme?
39510编辑于 2024-04-15 - 来自专栏Coco的专栏
现代 CSS 解决方案：accent-color 强调色
accent-color 还支持和 color-scheme 一起使用。 OK，什么是 color-scheme 呢？color-scheme 是 CSS 的一个属性，用于指定网页的颜色方案或主题。 color-scheme 属性有以下几个可能的取值： auto：表示使用用户代理（浏览器）的默认颜色方案。这通常是浏览器自动根据操作系统或用户设置选择的方案。 light：表示使用浅色颜色方案。 通过指定适当的 color-scheme 值，开发者可以为网页提供不同的颜色方案，以适应用户的偏好或操作系统的设置。这有助于提供更好的可访问性和用户体验。 譬如，我们可以将页面的 color-schema 设置为 light dark： body { color-scheme: light dark; } 上述代码表示页面将同时支持浅色和深色颜色方案。 当使用 color-scheme: light dark 时，浏览器会根据用户代理的默认颜色方案来选择适当的颜色方案。
44110编辑于 2024-02-28 - 来自专栏Vue中文社区
H5 项目如何适配暗黑模式
我尝试了一些方案： 三、H5项目适配深色模式方案 1.声明 color-scheme color-scheme 有两种方式。 1.1meta 在head中声明<meta name="<em>color-scheme</em>" content="light dark">，声明当前页面支持 light 和 dark 两种模式，系统切换到深色模式时 ，浏览器默认样式也会切换到深色； 1.2CSS 下面的 css 同样可以实现上面 meta 声明的效果 :root { color-scheme: light dark; } 注意：此声明并非为页面做自动适配 :root { color-scheme: light dark; background: white; color: black; } @media (prefers-color-scheme
3.2K50发布于 2021-07-05 - 来自专栏终身学习者
一步到位：三行CSS代码轻松实现全网站暗黑模式
: light dark; } 这会告诉浏览器，document 可以接受亮色和暗色的 color-scheme 。 我们可以通过使用系统颜色快速解决这个问题： body { background-color: Canvas; color: CanvasText; color-scheme: light dark be either light or dark) Dark (forced) 首先，一些基本标记： <fieldset> <label> <input type="radio" name="<em>color-scheme</em> " id="color-scheme-light" value="0"> Light </label> <label> <input type="radio" name="<em>color-scheme</em> " value="auto" checked> Auto </label> <label> <input type="radio" name="<em>color-scheme</em>" id=
2.4K30编辑于 2023-05-23 - 来自专栏西里网CSDN博客
Meta 暗色模式适配
自动检测用户系统偏好(暗色/亮色模式) 提供手动切换暗色/亮色模式的功能 保持与 Meta 平台一致的视觉风格 减少夜间屏幕眩光 用法 HTML 部分 <meta name="<em>color-scheme</em> " content="light dark"> CSS 部分 :root { color-scheme: light dark; } @media (prefers-color-scheme: dark DOCTYPE html> <html class="light-mode"> <head> <meta name="<em>color-scheme</em>" content="light dark"> <style > :root { color-scheme: light dark; } .light-mode { --bg: #ffffff; --text
26210编辑于 2025-05-15 - 来自专栏吟风者
iframe在dark模式下无法透明
通过试验发现iframe在color-scheme: dark模式下无法透明。那么知道原因，修改起来就简单了，对iframe进行单独的color-scheme设置就好了。 important; color-scheme: light;//dark模式下无法透明 } </style>
1.5K10编辑于 2023-04-27 - 来自专栏前端达人
2024年，你需要了解下这 12 个现代化 CSS 新属性
浏览器兼容性 7、color-scheme 随着暗黑模式在用户界面中的普及，为网站或应用程序提供光暗主题切换成为了一种流行趋势。 CSS中的color-scheme属性为开发者提供了一种简单的方式来适配浏览器UI元素的光暗模式，今天我们就来深入探讨它的应用。 color-scheme属性允许网页告诉浏览器，其内容是为浅色模式、暗色模式，或两者皆适配的。设置此属性后，浏览器会自动调整表单控件、滚动条和CSS系统颜色等UI元素，以适应相应的主题模式。 /* 在根元素上设置color-scheme */ :root { color-scheme: dark light; } 在元素级别使用color-scheme 你也可以在单个元素上使用color-scheme /* 对暗背景的元素使用暗色模式 */ .dark-background { color-scheme: dark; } 为什么使用color-scheme 简化暗模式的实现：使用color-scheme
3K10编辑于 2024-01-31 - 来自专栏Web 技术
给你的应用建立一套配色方案
浅色主题 :root { color-scheme: light; --brand: var(--brand-light); --text1: var(--text1-light); - ="light"] { color-scheme: light; --brand: var(--brand-light); --text1: var(--text1-light); - ="dark"] { color-scheme: dark; --brand: var(--brand-dark); --text1: var(--text1-dark); --text2 surface-shadow: var(--surface-shadow-dark); --shadow-strength: var(--shadow-strength-dark); } 昏暗的主题 [color-scheme ="dim"] { color-scheme: dark; --brand: var(--brand-dim); --text1: var(--text1-dim); --text2:
2.2K40编辑于 2022-07-29 - 来自专栏外文翻译
「译」使用 CSS Parser 解析器扩展来填充 CSS（提案）
它是一个根据元素使用的 color-scheme 返回两个传入颜色之一的函数。当 color-scheme 为 light 时，使用第一个值；否则返回第二个值。 CSS.parser .registerFunction( 'light-dark(light:<color>, dark:<color>):<color>', { invalidation: ['color-scheme = match; const colorScheme = CSS.parser.getSpecifiedStyle(element) .getPropertyValue('color-scheme '); if (colorScheme == 'light') return args.light; return args.dark; }));因为返回值依赖于 color-scheme 值，所以 color-scheme 属性被列为会导致失效的属性。
17000编辑于 2025-05-09 - 来自专栏CSS
CSS 实用新特性：交互、组件、效率的革新
动态主题切换技术核心：light-dark() 函数结合 color-scheme 属性，可根据系统主题自动切换明暗模式，保持页面主题与系统设置的一致性。 :root { color-scheme: light dark; --primary-color: light-dark(black, white); --primary-background: "][value="light dark"]:checked) { color-scheme: light dark; } &:has(input[name="color-scheme"][value ="light"]:checked) { color-scheme: light; } &:has(input[name="color-scheme"][value="dark"]:checked ) { color-scheme: dark; }}CSS 中的系统颜色能够对当前使用的 color-scheme 值（light/dark）做出反应，在以下演示中，单选按钮控制 color-scheme
1.6K10编辑于 2025-04-09 - 来自专栏掘金安东尼
5 分钟一览 CSS 颜色表示方法和专业用法
使用 color-scheme 属性指定颜色方案，比如 color: buttonface; color-scheme: light;。
1.1K00编辑于 2023-04-22 - 来自专栏daidr
在 Nuxt.js 中配合 windicss 实现暗黑模式适配
浏览器提供了一个 color-scheme css 属性，将其设置为dark，浏览器便会自动将页面内所有浏览器自带的元素渲染成暗色风格 html.dark { color-scheme: dark
1.9K20编辑于 2023-03-11 - 来自专栏前端食堂
2020年你不应该错过的CSS新特性
具体的效果如下(https://codepen.io/airen/pen/yLOZpzO)： color-scheme color-scheme属性来自于 CSS Color Adjustment Module color-scheme有两种用法，先来看第一种: :root { color-scheme: dark light; } 在:root元素上，使用color-scheme颜色方案进行渲染，会影响画布的表面颜色 另外一种使用方式是在<meta>标签上： <meta name="<em>color-scheme</em>" content="dark light" /> 要遵守color-scheme CSS属性，需要先下载CSS 为了帮助用户代理立即用所需的颜色方案渲染页面背景，还可以在<meta name="<em>color-scheme</em>">元素中提供一个颜色方案值。 default styling with the color-scheme CSS property and the corresponding meta tag(https://web.dev/color-scheme
1.4K41发布于 2020-11-02 - 来自专栏前端达人
大胆尝试这些新的CSS属性，释放CSS的力量吧（一）
color-scheme 如果我们想要根据用户的浅色或深色模式偏好来调整我们的界面，可以使用自定义切换和/或 prefers-color-scheme 查询，我们还应该添加color-scheme属性。 而 accent-color 让我们可以为一些元素选择自定义颜色， color-scheme 则要求浏览器进行更多的适应，例如要求文本输入和文本区域以浅色或深色主题显示。 如果我们只支持 light 或 dark ，只需列出单个值即可： :root { color-scheme: light dark; } 例如，你可以这样定义一个明亮模式和一个暗模式的颜色方案： /
82120编辑于 2023-09-11 - 来自专栏前端全栈开发者
CSS变量实现暗黑模式，我的小铺页面已经支持
: #666; --border: #e6e6e6; --bg: #333333; } 添加 Dark 式支持 现在，我们定义了两组变量，剩下要做的惟一一件事就是将 preferences -color-scheme
2.1K10发布于 2020-03-17 - 来自专栏python爱好部落
Playwright免登录
: -V, --version 输出版本号 -b, --browser <browserType> 浏览器类型 --color-scheme
4.9K51发布于 2021-04-02 - 来自专栏终身学习者
令人期待的 CSS 新功能：让编码更高效
:root { color-scheme: light dark; } :root { --text-color: light-dark(#333, #ccc); /* In Light
41810编辑于 2024-02-12 - 来自专栏终身学习者
让你兴奋不已的13个CSS技巧🤯
html { color-scheme: light dark; } 注意： color-scheme 属性可以设置在除 html 之外的任何DOM元素上。
86350编辑于 2023-08-18 - 来自专栏自动化、性能测试
Dockerfile（12） - HEALTHCHECK 指令详解
</title>\n<style>\nhtml { color-scheme: light dark; }\nbody { width: 35em; margin: 0 auto;\nfont-family
2.7K30发布于 2021-11-02 - 来自专栏前端专享
使用 PostCSS 插件让你的网站支持暗黑模式
:root { color-scheme: light dark; background: white; color: black; } @media (prefers-color-scheme dark) { :root { background: black; color: white; } } 颜色较多的情况下，使用 css variables :root { color-scheme
97120编辑于 2022-03-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号