h5

1.高亮与暗黑模式适配；

1）@media (prefers-color-scheme: dark)

css变量:
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #111416
        --text-color: #ccc;
        --link-color: #f96;
    }
}

:root {
    --background-color: #fff;
    --text-color: #333;
    --link-color: #b52;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

或者css混合模式:
.theme-dark { 
    filter: invert(100) hue-rotate(180deg); 
}

.theme-dark img { 
    filter: invert(100) hue-rotate(180deg); 
}

另外还可以使用CSS的mix-blend-mode (不需要的元素使用isolation: isolate)来实现:.dark-mode-screen { 
    ...
    background: white; 
    mix-blend-mode: difference; 
}

图片的处理：

// 粗暴模式
@media (prefers-color-scheme: dark) {
    img {
        opacity: 0.65;
    }

    img:hover {
        opacity: 1;
    }
}

// 温柔模式
@media (prefers-color-scheme: dark) {
     img:not([src*=".svg"]) {
        filter: brightness(.8) contrast(1.2);
    }}

svg图：

@media(prefers-color-scheme: dark) {
    :root {
        --icon-filter: invert(100%);
        --icon-filter_hover: invert(40%);
    }
}

/* light.css */
:root {
    --icon-filter_hover: invert(60%);
}

img[src*=".svg"]{
    filter: var(--icon-filter);
}
img[src*=".svg"]:hover {
    filter: var(--icon-filter_hover);
}

切换时过度效果：

body {
    --duration: 0.5s;
    --timing: ease;
    color: var(--color);
    background-color: var(--background-color);
    transition: color var(--duration) var(--timing), background-color var(--duration) var(--timing);
}

2） 借助javascript 对样式主题进行切换：

<!-- HTML -->
<link type="text/css" rel="stylesheet" media="all" href="../theme1.css" id="theme_css" />

// Script
document.getElementById('buttonID').addEventListener('click', function(){        
        document.getElementById('theme_css').href = '../theme2.css'; 
})

2.适配；

3.UI组件；

更多内容敬请期待..................