概述
UIKit Vue3 组件库提供了完整的主题系统，支持明暗主题切换。通过简单的配置即可为您的应用提供一致的视觉体验。
特性
🌓 明暗主题无缝切换
⚡ 实时主题更新
🔧 简单易用的配置
快速开始
基础配置
使用
UIKitProvider 包装您的应用，并配置主题选项为 theme="light"。除此之外，主题也支持 theme="dark" 的暗色主题。<template><UIKitProvider theme="light"><YourApp /></UIKitProvider></template><script setup lang="ts">import { UIKitProvider } from '@tencentcloud/chat-uikit-vue3';import YourApp from './YourApp.vue';</script>
在组件外切换主题
<template><div><button @click="setTheme('light')">light</button><button @click="setTheme('dark')">dark</button><div>当前的主题是: {{ theme }}</div><UIKitProvider:theme="theme"><YourApp /></UIKitProvider></div></template><script setup lang="ts">import { ref } from 'vue';import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';import YourApp from './YourApp.vue';type ThemeType = 'light' | 'dark';const theme = ref<ThemeType>('light');const setTheme = (_theme: ThemeType) => {theme.value = _theme;};</script>
在组件内切换主题
在组件内可以使用
useUIKit Hook 来改变当前的主题。<template><div><div>当前的主题是: {{ theme }}</div><button @click="setTheme('light')">light</button><button @click="setTheme('dark')">dark</button></div></template><script setup lang="ts">import { useUIKit } from '@tencentcloud/chat-uikit-vue3';const { theme, setTheme } = useUIKit();</script>
实践示例 —— 主题颜色的持久化
<template><UIKitProvider :theme="theme"><YourApp /></UIKitProvider></template><script setup lang="ts">import { ref, watch } from 'vue';import { UIKitProvider } from 'uikit-component-vue3';import YourApp from './YourApp.vue';// 从 localStorage 初始化主题const theme = ref<'light' | 'dark'>(() => {return (localStorage.getItem('theme') as 'light' | 'dark') || 'light';});// 监听主题变化并持久化watch(theme, (newTheme) => {localStorage.setItem('theme', newTheme);}, { immediate: true });</script>
注意事项
提供者位置：UIKitProvider 建议用于即时通讯所有组件的上层。
语言资源：自定义语言资源会与内置资源合并，相同 key 会覆盖内置资源。
类型安全：使用 TypeScript 时，确保传入的配置符合类型定义。
