vadxq/vite-plugin-vconsole

求助帖:请问如何动态修改主题?

CharleeWa opened this issue · 5 comments

目前插件支持 lightdark 两种模式,如果固定写好是方便的,不过如何动态修改模式呢?没有想到好的办法

刚刚添加了一个动态配置的功能,可以使用v2.1.0 版本。配置文件可以参考GitHub文档里。

太好了,谢谢!

@vadxq 刚刚更新到最新版本测试发现几个问题

  1. 如果同时在 configdynamicConfig 配置 theme, 控制台会打印如下信息

[vite] warning: Duplicate key "theme" in object literal

  1. 增加 dynamicConfig 后,控制台会有如下打印信息:

cfg maxLogNumber: 1200,theme: "light",theme: document.querySelectorAll('.dark').length ? 'dark' : 'light'

  1. 配置 dynamicConfig 后,只有刷新才会生效

暗黑模式切换后,需要刷新才能生效。可能是初始化才会执行这个脚本,再去更新 VConsole 主题。目前配置还是写在 vite.config 配置文件里面,这个文件无法拿到dom,是否能在外部提供一个接口方便使用者切换主题模式。我不确定我的用法和想法是否正确,请作者帮我再看看。

两个打印信息是之前调试的console忘记删了。目前发布的新版本v2.1.1,可以支持不刷新生效了。但是为了减少对生产环境代码的侵入,使用了字符串化的可运行函数来塞进插件里。包括动态配置也是需要时字符串传入。

具体可以参考文档里的配置。在系统增加了一个监听变量window.vConsole.dynamicChange.value,只要修改这个值就会触发重新加载动态配置。或者可以参看playground目录下的调试写法

dynamicConfig和eventListener组合实现动态主题切换。可以试试看

@vadxq 非常感谢,这个实现很棒,它在我的项目里面工作的很好。