一般推荐使用link标签解决 CSS 变量 + 媒体查询 window.matchMedia (https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia) 方法可以用来查询 指定的媒体查询字符串解析后的结果。 结合 CSS 变量和 matchMedia 的查询结果,设置对应的 CSS 主题颜色。该方法更灵活,可以单独抽离主题色进行适配。 CSS...
使用matchMedia 匹配主题媒体,深色模式匹配 (prefers-color-scheme: dark) ,浅色模式匹配 (prefers-color-scheme: light) 。 监听主题模式,深色模式时为 body 添加类名 dark,根据 CSS 变量的响应式布局特点,自动生效 dark 类名下的 CSS。 const darkMode = window.matchMedia && window.matchMedia('(prefers-color...
1. 2. 3. 一般推荐使用link标签解决 CSS 变量 + 媒体查询 window.matchMedia (https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia) 方法可以用来查询 指定的媒体查询字符串解析后的结果。 结合 CSS 变量和 matchMedia 的查询结果,设置对应的 CSS 主题颜色。该方法更灵活,可以单独抽离主题色进...
Indicates that user has notified the system that they prefer an interface that has a light theme. dark Indicates that user has notified the system that they prefer an interface that has a dark theme. 摘录于:https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme 几个...
一般推荐使用link标签解决 CSS 变量 + 媒体查询 window.matchMedia (https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia) 方法可以用来查询 指定的媒体查询字符串解析后的结果。 结合 CSS 变量和 matchMedia 的查询结果,设置对应的 CSS 主题颜色...
//假如我们没有指定--theme-color这个属性,则可以在使用的时候加上替代值#app{background-color:var(--theme-color,black);//没有指定--theme-color则会由black代替 } 通过JS获取和设置自定义的属性 //js中获取--theme-color的值varstyles =getComputedStyle(document.documentElement);varvalue = styles.getProp...
html[theme='dark-mode'] { filter: invert(1) hue-rotate(180deg); } 这个方法的唯一缺点是,它还会反转应用程序中的所有图像。 因此,我们将对所有图像添加相同的规则,以逆转效果。 html[theme='dark-mode'] img{ filter: invert(1) hue-rotate(180deg); ...
const colors = require('tailwindcss/colors')const plugin = require('tailwindcss/plugin')const selectorParser = require('postcss-selector-parser')module.exports = {// purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],darkMode: , // or 'media' or 'class'theme: { c...
the user prefers a dark color scheme using media queries const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; setTheme(prefersDarkMode); } // Run the function to detect the user's preferred theme detectPreferredTheme();1.2.3.4.5.6.7.8.9.10...
window.matchMedia('(prefers-color-scheme: dark)').matches)){document.documentElement.classList.add('dark')}else{document.documentElement.classList.remove('dark')} Open Props正在使用类似的方法,但是更新 data-theme 属性,然后在两个块中定义属性: ...