We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
期望可以在不重启的情况下自动根据系统切换 Light / Dark Mode
The text was updated successfully, but these errors were encountered:
目前样式的选择是在启动时通过一个分支条件做的,由 style-loader 装载进页面
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 的方式来切换。
import
不太确定这里 style-loader 是否会产生副作用,可能需要在 document 上找到对应的 style 删除
document
style
Sorry, something went wrong.
实际上我们可以不用 electron darkmode 事件,直接使用 window.matchMedia((prefers-color-scheme: dark)).matches 获取以及监听 prefers-color-scheme 的变化,并给根元素加 dark 或者 light 类名使其应用不同的样式即可 。
window.matchMedia(
).matches
dark
light
但这样需要把 dark 以及 light mode 的全部样式引入。由于用的 antd,看起来样式的体积还是挺大的..或许我们可以立即 import 当前主题的样式,然后再懒加载另外的主题样式?
(其实我是觉得我们不需要 antd
antd 的 darkmode 是通过 less 编译时实现的,所以不得不同时构建两份不同的样式,且不能同时引入(体积倒不是个问题)
所以需要在 js 层面做这个事情(移除 style,动态引入样式)。
至于是否需要 antd 是另外一个话题了,如果想移除 antd 工作量也会比较大
fixed with #128 by @njzydark
No branches or pull requests
期望可以在不重启的情况下自动根据系统切换 Light / Dark Mode
The text was updated successfully, but these errors were encountered: