@composy/theme-vue

@composy/theme-vue 📦

LDesign 主题管理 - Vue 3 适配器

📦 安装

pnpm add @composy/theme-vue

🚀 快速上手

import { createThemePlugin, useDesignTokens, useThemeMode } from '@composy/theme-vue'
import { createApp, defineComponent, h } from 'vue'

const App = defineComponent({
  setup() {
    const { mode, setMode } = useThemeMode()
    const { tokens } = useDesignTokens()
    return () =>
      h(
        'button',
        { onClick: () => setMode(mode.value === 'dark' ? 'light' : 'dark') },
        tokens.value.colors.primary
      )
  },
})

const app = createApp(App)
app.use(createThemePlugin({ mode: 'auto' }))
app.mount('#app')

📚 导出 API

• useTheme
• useThemeMode
• useDesignTokens
• createThemePlugin
• useThemeManager

插件创建的 ThemeManager 会随 Vue app 生命周期清理；独立 composable 创建的 manager 也会在组件卸载时销毁。

🎮 在线体验

cd playground
pnpm install
pnpm dev

开发校验

在此包目录运行：

npm run build
npm run type-check
npm run lint:check

Builder、TypeScript 和 ESLint 的权威配置位于 .ldesign/；包根配置文件保留为兼容入口。

📄 License

MIT © LDesign Team

useThemeMode() shares the injected ThemeManager with useTheme() and does not create a second matchMedia or DOM state machine. For multiple theme regions on one page, pass a different target element to each plugin, for example createThemePlugin({ mode: 'dark', target: panel }).