当系统支持暗黑模式的时候就会应用到 @media (prefers-color-scheme: dark) 内部的样式
如果有独立分开的css样式文件,可使用js判断是否处于暗黑模式,然后再确定加载那个css样式即可, js获取media信息如下
通过监听matchMedia的change事件可判断用户是否切换了暗黑/亮色模式
效果如下
本文首先介绍了暗黑模式的css样式, 通过使用css的meida查询器设置系统的样式. 然后介绍了通过js查询系统的暗黑模式状态 , 最后介绍了使用js监听系统模式动态变化事件. 能用js控制自然会发挥js的能力,有了更多的可操控性.
基本上就是利用网页选择器，去定位元素查看一些基本的element元素样式。如果遇到hover样式或者其他样式的话。可以点击右侧的hover即可展示，自己细心一点找一下就能找到。最后根据自己的项目修修补补颜色就好了，我也没有完全按照一些提供的主题去配色。完全根据自己的喜好去进行搭配，然后拖动颜色块去选择合适的颜色。
PS：贴一种一行代码实现dark主题的方案
html{
filter: invert(1) hue-rotate(180deg)
}
CSS filter 属性将模糊或颜色转移等图形效果应用到元素上。滤镜通常用于调整图像、背景和边框的渲染。
对于这种黑暗模式，我们将使用两个滤镜，即 invert 和 hue-rotate
invert滤镜可以帮助反转应用程序的颜色方案，因此，黑色变成了白色，白色变成了黑色，所有颜色也是如此。因此，黑变白，白变黑，所有颜色也是如此。
hue-rotate滤镜可以帮助我们处理所有其他非黑白的颜色。将色调旋转180度，我们确保应用程序的颜色主题不会改变，而只是减弱它的颜色。
<style>.bg{
width:200px
height:100px
background:url(bottom_bg.jpg)
}
a{
display: block
width:100%
height:100%
}
a:hover{
filter:alpha(opacity=80)
background:#000
opacity:0.5
}
</style>
<div class="bg"><a href="#"></a></div>
用css实现了。。。不过没有渐变效果，要做的话需要js
