html {
filter: invert(1) hue-rotate(180deg);
}
invert(1) 表示将元素的颜色完全反转(1 表示 100% 反转):
白色 → 黑色
红色 → 青色
蓝色 → 黄色
灰色 → 反向灰色
这样做的结果是:原本亮色的内容会变暗,原本暗色的内容会变亮,从而让整个页面看起来像是“反转了明暗”
hue-rotate(180deg):色相旋转
色相旋转不会改变颜色的明暗或饱和度,而是将颜色在色轮上旋转一定角度。
hue-rotate(180deg) 表示将所有颜色的色相旋转 180°,即颜色变成其在色轮对面的颜色。
例如:
红色 → 青色
绿色 → 品红
蓝色 → 黄色
这一步的目的是修正颜色反转后可能看起来不自然的颜色,特别是图像和图标。比如,反转后某些颜色可能会显得怪异,通过色相旋转可以一定程度上“还原”这些颜色的相对关系。