Layout组件部分小问题

[natholdallas]

Description

我在实际 开发中,发现一个小问题,可能是我操作的问题,我在App,vue中写了ConfigProvider, 并且用pinia绑定了darkMode, 然而当我进入HomeView(我自己编写的一个View), 这个文件使用了Layout组件,之后双向绑定了darkMode的值,但是每当我刷新一次浏览器,Layout的外框不会变颜色, 里面却会变成亮色主题 我想问一下这是什么问题, 再一次感谢作者开发了这么好看的ui库

Validations

• [X] Ensure this issue neither a bug report nor a feature proposal.
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that descript the same thing to avoid creating a duplicate.

[qmhc]

你是否给页面的背景色设置了白色？main 部分应该是透明的。

[natholdallas]

没有设置白色的背景, 我给你看一下代码

[natholdallas]

[natholdallas]

这是我的main.ts

[natholdallas]

只要我重新点左上角的头像,在里面切换深色模式,main的内容会变深色,但是我只要刷新main就会变成白色

[qmhc]

你可以往上挨个检查元素的背景色是否被设置，因为 main 部分（即白色的部分）的背景颜色是透明的。

如果你还是没找到，那最好你可以提供一个复现的项目。

[natholdallas]

这是我的pinia源码, 我检查过上级元素, 并没有设置白色, css我没有写过, 不过我还是会试着找出问题的, 不过现在还没有什么头绪...

[natholdallas]

检查了元素, 使用正则匹配查找, 都没有设置白色背景, 或者是我的main.ts有问题,稍等我截图一下,然后需要复现问题等我把源代码上传到git

[natholdallas]

[natholdallas]

还是不可以， 我试过了， 我还尝试了一个场景， 就是在我什么都不配置的情况下， 用 layout 组件， 通过点右上角头像切换称 dark 主题之后， 刷新一次页面还是会变成light， 官网上也是如此， 默认是dark主题， 我再切换成 light 主题刷新页面， 会变成 dark 主题。。。。， 我实在不知道是什么原因了， 也可能是我使用的是 linux 的原因 ？现在目前看来只能相信玄学了

[qmhc]

如果你想持久化主题，你需要自己做持久化保存。比如像文档，是通过 localStorage 持久化的：

然后在 dark-mode 属性变化时保存到 localStorage：

Layout 组件的 dark-mode 属性是同时可以用来指定内部切换主题 Switch 的初始值的，但如果你通过 document.documentElement 的类名来动态添加 'dark' 类名，Layout 初始化时会检测它。

文档的 Layout 示例没有做持久化操作，当然你刷新之后就会变回原来的主题了。

[natholdallas]

我一开始就是通过这种方式持久化了主题， 然而就会出现上面的问题

[natholdallas]

请稍等一会， 明天我会上传问题的项目，把这个 bug 复刻出来

[natholdallas]

太不好意思了，，，这几天有点事，问题已经复现并上传 https://github.com/NatholDallas/enshrine/blob/dev/client/src/views/HomeView.vue

[natholdallas]

目前修复这个问题的只能手动修复，在LayoutMain 中判断是否 Darkmode 然后自己设置颜色， 黑色就是 #121212, 白色主题就是 #ffffff..................