暗黑模式与色彩搭配

如何使网站适配深色模式的文章已经很多了，本文不再讲解,本文讲一下深色与浅色模式的颜色搭配

颜色搭配网站

1. https://colorhunt.co/ 适用这个网站去寻找你中意的颜色

颜色表示

1. rgba
2. hsla
3. 16进制

主题色

主题色大量适用于我们网站的各个地方 我们把颜色分为三个等级，依此darken或者lighten

1. primary
2. secondary
3. tertiary

检查色彩搭配的可访问性

1. https://material.io/resources/color/#!/?view.left=0&view.right=0
2. https://material.io/design/color/the-color-system.html#tools-for-picking-colors
3. https://mui.com/zh/customization/color/
4. 对比度测试
5. https://material.io/inline-tools/color/
6. https://anthonyhobday.com/sideprojects/saferules/

目标

支持深色,浅色,自动三种模式

1. css媒体查询

2. js监听深色浅色

3. 在html上添加自定义属性data-color-mode

4. prefers-color-schemecss属性用于检测深色or浅色模式

5. matchMedia

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

function darkModeHandler() {
    if (mediaQuery.matches) {
        console.log('现在是深色模式')
    } else {
        console.log('现在是浅色模式')
    }
}

// 监听模式变化
mediaQuery.addListener(darkModeHandler)