Skip to content

/ iCSS

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

Jump to bottom

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

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

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

chokcoco opened this issue Nov 29, 2019 · 4 comments

Comments

@chokcoco
Copy link
Owner

@chokcoco chokcoco commented Nov 29, 2019 •
edited

本文未完成....

法一：使用 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
Copy link

@TrumanGu TrumanGu commented Nov 30, 2019

转换后有内味儿了
@chokcoco
Copy link
Owner Author

@chokcoco chokcoco commented Nov 30, 2019

@TrumanGu 还在探索中 😂
@hexuan-aurora
Copy link

@hexuan-aurora hexuan-aurora commented Mar 27, 2020

可以通过 Media Query 查询 prefers-color-scheme 属性来检测用户系统的主题。
@dk-plus
Copy link

@dk-plus dk-plus commented Mar 4, 2021

可以用css atrribute+css变量来做，类似这样：
body {--primary-color: white}
body[theme="dark"] {--primary-color: black}
.button: {background: var(--primary-color)}
给body加theme="dark"就ok了
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
@chokcoco @dk-plus @TrumanGu @hexuan-aurora