暗黑模式与色彩搭配

    0

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

颜色搭配网站

  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)
评论区
共有评论 0
暂无评论