Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS 在夜间模式/深色模式中的使用与探索 #73

Open
chokcoco opened this issue Nov 29, 2019 · 2 comments
Open

CSS 在夜间模式/深色模式中的使用与探索 #73

chokcoco opened this issue Nov 29, 2019 · 2 comments

Comments

@chokcoco
Copy link
Owner

@chokcoco chokcoco commented Nov 29, 2019

本文未完成....


法一:使用 filter: invert

主要借助 invert 这个滤镜实现,定义一个 .dark-mode-invert 挂载在全局根元素 <html>上:

filter: invert(): 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。

图片不能使用 filter: invert 处理,需要再 invert(100%) 转变回来。

.dark-mode-invert {
    filter: invert(100%);
}

.dark-mode-invert img {
    filter: invert(100%);
}

尝试使用掘金作为例子试了下:

转换前:
image

转换后:
image

缺点:

  1. 需要对图片额外处理,如果图片是以 background 嵌入的方式则工作量更大
  2. 转换后的非黑白色不好控制,且效果一般

法二:使用混合模式 mix-blend-mode: difference

@TrumanGu

This comment has been minimized.

Copy link

@TrumanGu TrumanGu commented Nov 30, 2019

转换后有内味儿了

@chokcoco

This comment has been minimized.

Copy link
Owner Author

@chokcoco chokcoco commented Nov 30, 2019

@TrumanGu 还在探索中 😂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.