定制主题

SeeYouUI 提供了浅色/暗黑主题，或者您可以根据需要自定义主题颜色。

提示

当前主题为 亮色 可通过文档右上角切换。

全局暗黑模式

此模式默认 跟随系统 ，会使页面上的所有 SeeYouUI 组件变为浅色/深色风格。

🎈 你只需要在 manifest.json 加两行代码即可：

H5

"h5" : {
    "darkmode" : true,
    "themeLocation" : "theme.json",
},

App

"app-plus" : {
    "darkmode" : true,
    "themeLocation" : "theme.json",
},

小程序

"mp-weixin" : {
    "darkmode" : true,
    "themeLocation" : "theme.json",
},

好的！重启项目，试着切换手机的 浅色/暗黑 模式，看看效果吧！

手动切换全局主题

SeeYouUI 提供了 useTheme Hook，你可以在代码中使用 useTheme 方法来手动切换全局主题。

注意

全局主题的手动切换是 强制生效 的，非必要建议优先使用跟随系统方案。

警告

如 微信小程序 有手动切换全局主题需求，需单独配置：微信小程序手动切换全局主题

<template>
  <text>当前主题：{{ themeMode }}</text>
  <button @click="setLightMode">浅色</button>
  <button @click="setDarkMode">暗黑</button>
  <button @click="setFollowSystem">跟随系统</button>
</template>

<script lang="ts" setup>
import { useTheme } from "@/uni_modules/see-u-ui";
const { themeMode, setLightMode, setDarkMode, setFollowSystem } = useTheme();
</script>

微信小程序手动切换全局主题

微信小程序每个页面是独立的，所以无法在全局根节点加 class，因此需要使用 see-config 组件包裹每个页面。

<template>
  <see-config>
    <!-- 你的页面内容 -->
  </see-config>
</template>

自定义主题

todo...