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.

Sign up for GitHub

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 · 5 comments
Open

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

chokcoco opened this issue Nov 29, 2019 · 5 comments
Labels
未完成

Comments

@chokcoco
Copy link
Owner

chokcoco commented Nov 29, 2019 •
edited
Loading

本文未完成....

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

转换后有内味儿了

@chokcoco
Copy link
Owner Author

@TrumanGu 还在探索中 😂

@hexuan-aurora
Copy link

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

@dk-plus
Copy link

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了

@Harhao
Copy link

Harhao commented Feb 22, 2024

可以用css atrribute+css变量来做，类似这样： body {--primary-color: white} body[theme="dark"] {--primary-color: black} .button: {background: var(--primary-color)} 给body加theme="dark"就ok了

这个在低版本一点android的webview就存在很大问题了，不支持attribute的属性，直接挂球

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
未完成
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@chokcoco @Harhao @dk-plus @TrumanGu @hexuan-aurora