相比color-scheme,大家可能更熟悉prefers-color-scheme,它用于检测用户是否有将系统的主题色设置为亮色或者暗色。 .day{background:#eee;color: black; }.night{background:#333;color: white; }@media(prefers-color-scheme: dark) {.day.dark-scheme{background:#333;color: white; }.night.dark-scheme{back...
相比color-scheme,大家可能更熟悉prefers-color-scheme,它用于检测用户是否有将系统的主题色设置为亮色或者暗色。 复制 .day{background:#eee;color:black; }.night{background:#333;color:white; }@media(prefers-color-scheme:dark) {.day.dark-scheme{background:#333;color:white; }.night.dark-scheme{b...
相比color-scheme,大家可能更熟悉prefers-color-scheme,它用于检测用户是否有将系统的主题色设置为亮色或者暗色。 .day{background:#eee;color: black; }.night{background:#333;color: white; }@media(prefers-color-scheme: dark) {.day.dark-scheme{background:#333;color: white; }.night.dark-scheme{back...
prefers-color-scheme是CSS 媒体特性【@media】用于检测用户是否有将操作系统的主题色设置为亮色【light】或者暗色【dark】,这俩个也是prefers-color-scheme重要属性。W3C 在 2020 年 7 月 31日首次提到css的prefers-color-scheme新特性。原始 Wiki 贡献者有:RainSlide、 ZZES_REN 、urusai-me和 SimGenius。 当前p...
html 复制代码 属性值 light: 表示网页支持亮色模式。dark: 表示网页支持暗色模式。no-preference: 表示...
color-scheme 属性有以下几个可能的取值: auto:表示使用用户代理(浏览器)的默认颜色方案。这通常是浏览器自动根据操作系统或用户设置选择的方案。 light:表示使用浅色颜色方案。这通常包括浅色背景和深色文本。 dark:表示使用深色颜色方案。这通常包括深色背景和浅色文本。
color-scheme:normal;color-scheme:light;color-scheme:dark;color-scheme:light dark;// 跟随系统切换 例子: 两套主题,class一套。 data-theme 一套,两个都可以单独切换单独使用 // : root 是默认的主题颜色:root{--text-1:#000;--text-2:#1C75B9;--text-link:#2483ff;--bg-box:rgb(200,200,200)...
let lightTip ='当前自定义主题:light亮色', darkTip ='当前自定义主题:dark暗色'light.onclick = function (params) { content.setAttribute('class','light-scheme') tipText.innerHTML = lightTip } dark.onclick = function (params) { content.setAttribute('class','dark-scheme') ...
color-scheme 属性有以下几个可能的取值: auto:表示使用用户代理(浏览器)的默认颜色方案。这通常是浏览器自动根据操作系统或用户设置选择的方案。 light:表示使用浅色颜色方案。这通常包括浅色背景和深色文本。 dark:表示使用深色颜色方案。这通常包括深色背景和浅色文本。
light:表示使用浅色颜色方案。这通常包括浅色背景和深色文本。 dark:表示使用深色颜色方案。这通常包括深色背景和浅色文本。 通过指定适当的 color-scheme 值,开发者可以为网页提供不同的颜色方案,以适应用户的偏好或操作系统的设置。这有助于提供更好的可访问性和用户体验。