zdhxiong / mdui

Material Design 3(Material You) UI components using Web Components.
https://www.mdui.org
3.91k stars 356 forks source link

求助主题模式的实现 #316

Closed culyzhao closed 3 weeks ago

culyzhao commented 3 weeks ago

类似官网右上角的亮色模式、暗色模式,只看见这样的代码:

<mdui-dropdown trigger="hover" data-v-c78165cd data-v-69e31bcd>
<mdui-button-icon slot="trigger" class="auto" data-v-69e31bcd>
<mdui-icon-light-mode class="light-filled" data-v-69e31bcd>
</mdui-icon-light-mode>
<mdui-icon-light-mode--outlined class="light-outlined" data-v-69e31bcd>
</mdui-icon-light-mode--outlined>
<mdui-icon-dark-mode class="dark-filled" data-v-69e31bcd>
</mdui-icon-dark-mode>
<mdui-icon-dark-mode--outlined class="dark-outlined" data-v-69e31bcd>
</mdui-icon-dark-mode--outlined>
</mdui-button-icon>
<mdui-menu selects="single" value="auto" class="menu" data-v-69e31bcd>
<mdui-menu-item value="light" data-v-69e31bcd>
亮色模式</mdui-menu-item>
<mdui-menu-item value="dark" data-v-69e31bcd>
暗色模式</mdui-menu-item>
<mdui-divider data-v-69e31bcd>
</mdui-divider>
<mdui-menu-item value="auto" data-v-69e31bcd>
跟随系统</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>

但类似mdui-icon-light-mode slot="trigger" class="auto"这种标签,文档里也找不到说明,应该还有js配合setTheme切换主题,希望能提供个完整的例子学习一下