更新记录

1.0.0（2025-10-28） 下载此版本

Features

• 初始版本发布
• 支持深色/浅色主题切换
• 支持自动跟随系统主题
• 提供完整的主题 Token 系统
• 提供 neo-theme-provider 组件（主题提供者）
• 提供 neo-theme-switcher 组件（3种样式：toggle/button/select）
• 提供完整的 JS API（theme-manager.js）
• 支持自定义主题色
• 支持持久化存储
• 全平台兼容（H5、微信小程序、App等）
• 完整的 CSS 变量系统

平台兼容性

uni-app(3.6.12)

其他

Neo Theme Tokens - 主题系统

UniApp 主题管理组件，支持深色/浅色主题切换、自定义主题色、跟随系统主题。

功能

• 深色/浅色主题切换
• 跟随系统主题
• 主题 Token 系统（颜色、阴影、圆角）
• 3 种切换器样式（Toggle/Button/Select）
• 自定义主题色
• 持久化存储
• CSS 变量支持
• 组件 API 和 JS API

平台兼容性

安装

DCloud 插件市场

1. 搜索 neo-theme-tokens
2. 点击 使用 HBuilderX 导入插件
3. 重启项目

手动导入

1. 下载组件代码
2. 复制到 uni_modules/neo-theme-tokens
3. 重启项目

快速开始

<template>
  <neo-theme-provider theme="auto">
    <neo-theme-switcher type="toggle" />
    <view class="content">内容</view>
  </neo-theme-provider>
</template>

<style lang="scss">
.content {
  background: var(--neo-color-bg-elevated);
  color: var(--neo-color-text-primary);
}
</style>

API

neo-theme-provider

主题提供者组件，包裹应用根节点。

Props

Events

示例

<template>
  <neo-theme-provider 
    :theme="currentTheme"
    :primaryColor="primaryColor"
    @theme-change="handleChange"
  >
    <view>应用内容</view>
  </neo-theme-provider>
</template>

<script>
export default {
  data() {
    return {
      currentTheme: 'auto',
      primaryColor: '#3b82f6'
    }
  },
  methods: {
    handleChange(info) {
      console.log('当前主题:', info.actualTheme)
    }
  }
}
</script>

neo-theme-switcher

主题切换器组件。

Props

Events

示例

<!-- Toggle 样式 -->
<neo-theme-switcher type="toggle" />

<!-- Button 样式 -->
<neo-theme-switcher type="button" />

<!-- Select 样式 -->
<neo-theme-switcher type="select" />

JS API

import themeManager from '@/uni_modules/neo-theme-tokens/js_sdk/theme-manager.js'

// 设置主题
themeManager.setTheme('light')  // 'light' | 'dark' | 'auto'

// 获取当前主题
const theme = themeManager.getTheme()
const actualTheme = themeManager.getActualTheme()

// 自定义主题色
themeManager.setCustomColors({ 
  colorPrimary: '#10b981' 
})

// 获取 Token
const tokens = themeManager.getTokens()

// 监听变化
const unwatch = themeManager.onThemeChange((info) => {
  console.log(info)
})

// 取消监听
unwatch()

// 导出配置
const config = themeManager.exportTheme()

主题 Token

浅色主题

{
  // 背景
  colorBgBase: '#f5f7fa',
  colorBgElevated: '#ffffff',
  colorBgHover: '#f8f9fa',

  // 文字
  colorTextPrimary: '#1e293b',
  colorTextSecondary: '#64748b',
  colorTextTertiary: '#94a3b8',

  // 边框
  colorBorder: 'rgba(0, 0, 0, 0.08)',
  colorBorderHover: 'rgba(0, 0, 0, 0.12)',

  // 主题色
  colorPrimary: '#3b82f6',
  colorSuccess: '#10b981',
  colorWarning: '#f59e0b',
  colorError: '#ef4444',
  colorInfo: '#06b6d4',

  // 阴影
  shadowCard: '0 1px 3px rgba(0, 0, 0, 0.1)',
  shadowElevated: '0 4px 12px rgba(0, 0, 0, 0.15)',

  // 圆角
  radiusSmall: '6rpx',
  radiusBase: '12rpx',
  radiusLarge: '16rpx'
}

深色主题

{
  colorBgBase: '#1c1f26',
  colorBgElevated: '#242730',
  colorBgHover: '#2a2d38',

  colorTextPrimary: 'rgba(255, 255, 255, 0.9)',
  colorTextSecondary: 'rgba(255, 255, 255, 0.6)',
  colorTextTertiary: 'rgba(255, 255, 255, 0.4)',

  colorBorder: 'rgba(255, 255, 255, 0.08)',
  colorBorderHover: 'rgba(255, 255, 255, 0.12)',

  // 其他同浅色主题
}

使用 CSS 变量

<style lang="scss">
.card {
  background: var(--neo-color-bg-elevated);
  color: var(--neo-color-text-primary);
  border: 1px solid var(--neo-color-border);
  border-radius: var(--neo-radius-base);
  box-shadow: var(--neo-shadow-card);
}

.button {
  background: var(--neo-color-primary);
  color: #ffffff;
}
</style>

自定义主题色

// 方式一：通过 Provider
<neo-theme-provider :primaryColor="'#10b981'">

// 方式二：通过 JS API
themeManager.setCustomColors({ 
  colorPrimary: '#10b981',
  colorSuccess: '#059669'
})

常见问题

Q: 小程序端 CSS 变量不生效？

A: 小程序对 CSS 变量支持有限，可通过 computed 属性动态设置：

computed: {
  themeStyle() {
    const tokens = themeManager.getTokens()
    return {
      background: tokens.colorBgElevated,
      color: tokens.colorTextPrimary
    }
  }
}

Q: 主题切换后页面没变化？

A: 确保使用了 CSS 变量而非硬编码颜色，并且在根组件使用了 neo-theme-provider。

Q: 如何实现多套预设主题？

A: 通过 setCustomColors 切换不同配色方案：

const themes = {
  blue: { colorPrimary: '#3b82f6' },
  green: { colorPrimary: '#10b981' },
  purple: { colorPrimary: '#8b5cf6' }
}

themeManager.setCustomColors(themes.green)

Q: 主题设置会保存吗？

A: 会自动保存到本地存储，重启应用后恢复。

更新日志

查看 changelog.md

许可证

MIT License