varletjs
如何切换主题
默认主题是 md2Light，如何切换到 md3Light，什么时候能让md3Light作为默认主题？
<template>
<var-button type="primary">按钮</var-button>
</template>
<script setup lang="ts">
// Varlet 默认为 Material Design 2 亮色模式
import {StyleProvider, Themes} from '@varlet/ui';
StyleProvider(Themes.md3Light);
</script>
500
Cannot read properties of undefined (reading 'head')
at removeStyle (D:/IT/js/static/web-nuxt/node_modules/@varlet/ui/es/style-provider/index.mjs:10:26)
at StyleProvider (D:/IT/js/static/web-nuxt/node_modules/@varlet/ui/es/style-provider/index.mjs:32:3)
at setup (D:/IT/js/static/web-nuxt/pages/ui/varlet.js:9:44)
at _sfc_main.setup (D:/IT/js/static/web-nuxt/pages/ui/varlet.js:38:23)
at callWithErrorHandling (D:/IT/js/static/web-nuxt/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19)
at setupStatefulComponent (D:/IT/js/static/web-nuxt/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7874:25)
at setupComponent (D:/IT/js/static/web-nuxt/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7835:36)
at renderComponentVNode (D:/IT/js/static/web-nuxt/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:645:15)
at renderVNode (D:/IT/js/static/web-nuxt/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:779:14)
at renderComponentSubTree (D:/IT/js/static/web-nuxt/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:730:7)
这样能设置成功，但是刷新页面会出现样式闪烁，v-clock也不起作用
<template>
<var-button type="primary">按钮</var-button>
</template>
<script setup lang="ts">
import {onMounted} from 'vue';
import {StyleProvider, Themes} from '@varlet/ui';
onMounted(() => {
StyleProvider(Themes.md3Light);
});
</script>
可以参考这个 https://github.com/varletjs/varlet-nuxt-template
我是初学者，看不太懂
项目年久失修，由于上游问题，i18n 会导致一个错误，升级依赖后已经可以正常访问了，详情可以参见 https://github.com/nuxt/nuxt/issues/31265
现在可以正常使用 https://github.com/varletjs/varlet-nuxt-template 来进行参考
设置主题照理说应该在构建期间就生成好css，而Varlet是在运行时插入样式
跟这个没什么关系，是因为你在 onMound 中设置主题，所以只会在客户端执行，水合时样式并没有带上去，所以会导致闪烁
而 varletjs 的主题切换实际上是会操作 Dom 的，所以如果你直接写在组件中会 Error，只能在客户端执行。
当然，十分欢迎帮我们支持这一步，PR Welcome。
在nuxt.config.ts中如何在varlet选项中设置本地更改的varlet的root样式，比如项目/assets/xxx.css中:root{--cell-padding: 0; --collapse-background: none; --collapse-header-padding: 16px 0;}，如果这样修改成功是否在nuxt运行的时候会直接替换varlet的原始root样式，保证打包完成后的--cell-padding、--collapse-background、 --collapse-header-padding样式生效且这几个样式原始值不会出现在发布后的项目当中？
在nuxt.config.ts中如何在varlet选项中设置本地更改的varlet的root样式，比如项目/assets/xxx.css中:root{--cell-padding: 0; --collapse-background: none; --collapse-header-padding: 16px 0;}，如果这样修改成功是否在nuxt运行的时候会直接替换varlet的原始root样式，保证打包完成后的--cell-padding、--collapse-background、 --collapse-header-padding样式生效且这几个样式原始值不会出现在发布后的项目当中？
emmmm 这其实是个 css 优先级问题，当你自己的优先级足够高，自然就能覆盖。
你想直接在 nuxt.config 中做到这一点，只需要写样式在 head 注入就好
当然通过StyleProvider也可以达到这一点，但是我在想可否在defineNuxtConfig的varlet: { modulePath: '...', exclude: ['...'], icon: {} }中modulePath实现，这样就能保证只有一个出现被使用，不会存在两个