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

应用开启的情况下切换 Dark Mode 需要重启应用 #45

Closed
ahonn opened this issue Jan 11, 2020 · 4 comments
Closed

应用开启的情况下切换 Dark Mode 需要重启应用 #45

ahonn opened this issue Jan 11, 2020 · 4 comments
Labels
🌟enhancement New feature or request 🏅send a PR Good for newcomers to send pr
Projects

Comments

@ahonn
Copy link
Collaborator

ahonn commented Jan 11, 2020

期望可以在不重启的情况下自动根据系统切换 Light / Dark Mode

@xcodebuild xcodebuild added the 🌟enhancement New feature or request label Jan 11, 2020
@xcodebuild xcodebuild added the 🏅send a PR Good for newcomers to send pr label Jan 26, 2020
@xcodebuild
Copy link
Collaborator

目前样式的选择是在启动时通过一个分支条件做的,由 style-loader 装载进页面

代码在 https://github.com/alibaba/lightproxy/blob/develop/src/renderer/index.tsx#L51-L55

理论上可以通过监听 electron darkmode 的事件(https://www.electronjs.org/docs/api/native-theme#%E4%BA%8B%E4%BB%B6%E5%90%8D-updated ),加上动态 import 的方式来切换。

不太确定这里 style-loader 是否会产生副作用,可能需要在 document 上找到对应的 style 删除

@ahonn
Copy link
Collaborator Author

ahonn commented Apr 29, 2020

实际上我们可以不用 electron darkmode 事件,直接使用 window.matchMedia((prefers-color-scheme: dark)).matches 获取以及监听 prefers-color-scheme 的变化,并给根元素加 dark 或者 light 类名使其应用不同的样式即可 。

但这样需要把 dark 以及 light mode 的全部样式引入。由于用的 antd,看起来样式的体积还是挺大的..或许我们可以立即 import 当前主题的样式,然后再懒加载另外的主题样式?

(其实我是觉得我们不需要 antd

@xcodebuild
Copy link
Collaborator

xcodebuild commented Apr 29, 2020

antd 的 darkmode 是通过 less 编译时实现的,所以不得不同时构建两份不同的样式,且不能同时引入(体积倒不是个问题)

所以需要在 js 层面做这个事情(移除 style,动态引入样式)。

至于是否需要 antd 是另外一个话题了,如果想移除 antd 工作量也会比较大

@xcodebuild
Copy link
Collaborator

fixed with #128 by @njzydark

1.2.0 automation moved this from To do to Done May 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌟enhancement New feature or request 🏅send a PR Good for newcomers to send pr
Projects
1.2.0
  
Done
Development

No branches or pull requests

2 participants