GithubHelp home page GithubHelp logo

Comments (4)

xcodebuild avatar xcodebuild commented on July 24, 2024

目前样式的选择是在启动时通过一个分支条件做的,由 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 删除

from lightproxy.

ahonn avatar ahonn commented on July 24, 2024

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

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

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

from lightproxy.

xcodebuild avatar xcodebuild commented on July 24, 2024

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

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

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

from lightproxy.

xcodebuild avatar xcodebuild commented on July 24, 2024

fixed with #128 by @njzydark

from lightproxy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.