🎉OpenTiny 3.8.0 正式发布：推出「极客黑」新主题！

大家好，我是 Kagol，个人公众号：前端开源星球。

OpenTiny 是一套华为云出品的企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。

核心亮点：

1. 跨端跨框架：使用 Renderless 无渲染组件设计架构，实现了一套代码同时支持 Vue2 / Vue3，PC / Mobile 端，并支持函数级别的逻辑定制和全模板替换，灵活性好、二次开发能力强。
2. 组件丰富：PC 端游80+组件，移动端游30+组件，包含高频组件 Table、Tree、Select 等，内置虚拟滚动，保证大数据场景下的流畅体验，除了业界常见组件之外，我们还提供了一些独有的特色组件，如：Split 面板分割器、IpAddress IP地址输入框、Calendar 日历、Crop 图片裁切等
3. 配置式组件：组件支持模板式和配置式两种使用方式，适合低代码平台，目前团队已经将 OpenTiny 集成到内部的低代码平台，针对低码平台做了大量优化
4. 周边生态齐全：提供了基于 Angular + TypeScript 的 TinyNG 组件库，提供包含 10+ 实用功能、20+ 典型页面的 TinyPro 中后台模板，提供覆盖前端开发全流程的 TinyCLI 工程化工具，提供强大的在线主题配置平台 TinyTheme

2023年5月18日，我们发布了 v3.8.0 版本，修复了多处缺陷，并推出了一套新主题：极客黑。

目前我们一共有三套主题：

• 华为云默认主题
• 无限主题
• 极客黑主题

极客黑主题效果

我们一起来看看效果吧🎉

Button

Input / Textarea

CheckBox / Radio / Switch

Alert

Form

Tooltip / Popover：

Modal

Message

Notify

Select

Pager

DatePicker

Steps

欢迎大家在评论区回复自己喜欢的主题，并说明原因，我先来！

我喜欢极客黑，首先是因为它比较圆润，其次是因为黑色给人一种酷酷的科技感。

使用极客黑主题

这么好看的主题，我要怎么才能体验和使用呢？

只需要三步：

• 安装 @opentiny/vue@3.8.0
• 初始化极客黑主题
• 使用 OpenTiny 组件

第一步：安装 @opentiny/vue@3.8.0

npm i @opentiny/vue\@3.8.0

第二步：初始化极客黑主题

在 main.ts 文件中初始化极客黑主题。

import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
import { tinySmbTheme } from '@opentiny/vue-theme/theme' // 导入极客黑主题

const theme = new TinyThemeTool(tinySmbTheme, 'tinyStyleSheetId') // 初始化极客黑主题

第三步：使用 OpenTiny 组件

在 App.vue 文件中导入组件，并在模板中使用。

<script setup lang="ts">
import { Button as TinyButton } from '@opentiny/vue'
</script>

<template>
   <tiny-button>按钮</tiny-button>
   <tiny-button type="primary">主要按钮</tiny-button>
</template>

效果如下：

切换主题

如果这三个主题我都很喜欢，我想在多个主题之间切换，这要如何实现呢？

也很简单，只需要三步即可：

• 将 theme 对象挂到 vue 实例中
• 使用 Dropdown 组件做一个简易的主题切换器
• 调用 changeTheme 当法方法实现主题切换

第一步：将 theme 对象挂到 vue 实例中

const theme = new TinyThemeTool(tinySmbTheme, 'tinyStyleSheetId') // 初始化极客黑主题
app.config.globalProperties.theme = theme // 将 theme 对象挂到 vue 实例中

第二步：使用 Dropdown 组件做一个简易的主题切换器

<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
import {
  Dropdown as TinyDropdown,
  DropdownMenu as TinyDropdownMenu,
  DropdownItem as TinyDropdownItem,
} from '@opentiny/vue'
import { tinyInfinityTheme, tinySmbTheme } from '@opentiny/vue-theme/theme'

const THEME_MAP = {
  'default-theme': '',
  'infinity-theme': tinyInfinityTheme,
  'smb-theme': tinySmbTheme
}

const theme = getCurrentInstance().appContext.config.globalProperties.theme

const changeTheme = (value) => {
  theme.changeTheme(THEME_MAP[value.vm.label])
}
</script>

<template>
  <tiny-dropdown
    style="position: fixed; bottom: 60px; right: 60px; cursor: pointer;"
    @item-click="changeTheme"
  >
    <svg
      viewBox="0 0 1024 1024"
      width="32"
      height="32"
    >
      <path d="M361.28 853.67h-1c-64.14-0.32-111.49-30-124.48-39.09-33.47-23.43-61.42-63.11-80.82-114.74-17.15-45.65-26.6-98.32-26.6-148.33 0-51.48 10.21-101.42 30.34-148.46 19.43-45.39 47.23-86.14 82.63-121.12 35.37-34.95 76.56-62.4 122.43-81.57 47.48-19.84 97.89-29.91 149.83-29.91 51.95 0 102.36 10.06 149.83 29.91 45.87 19.17 87.06 46.61 122.43 81.57 35.4 34.98 63.2 75.73 82.63 121.12 20.13 47.03 30.34 96.98 30.34 148.46 0 32.15 0 72.16-15.91 107.63-9.52 21.23-29.24 33.94-58.62 37.78-19.38 2.54-41.77 1.44-67.69 0.18-75-3.65-168.33-8.2-233.38 73.46-54.6 68.56-118.02 83.1-161.96 83.11z m152.35-619.22c-85.88 0-166.59 33.03-227.28 93-60.59 59.87-93.95 139.44-93.95 224.05 0 42.51 7.99 87.19 22.51 125.82 14.63 38.93 35.09 69.05 57.61 84.82 18.84 13.19 51.87 27.34 88.09 27.52h0.7c43.07 0 80.71-19.84 111.9-58.99 85.48-107.3 206.48-101.41 286.55-97.51 18.63 0.91 34.72 1.69 47.68 1.03 11.04-0.57 15.96-2.07 17.8-2.83 9.62-22.81 9.62-53.08 9.62-79.86 0-84.62-33.37-164.19-93.95-224.05-60.69-59.97-141.41-93-227.28-93z m310.93 398.49c-0.01 0-0.01 0 0 0-0.01 0-0.01 0 0 0z" p-id="2373"></path><path d="M271.62 644.31a66.11 66.57 0 1 0 132.22 0 66.11 66.57 0 1 0-132.22 0Z" p-id="2374"></path><path d="M293.45 451.7a51.63 52 0 1 0 103.26 0 51.63 52 0 1 0-103.26 0Z" p-id="2375"></path><path d="M437.12 335.46a49.05 49.4 0 1 0 98.1 0 49.05 49.4 0 1 0-98.1 0Z" p-id="2376"></path><path d="M599.66 367.02a49.04 49.39 0 1 0 98.08 0 49.04 49.39 0 1 0-98.08 0Z" p-id="2377"></path><path d="M681.94 504.15a49.04 49.39 0 1 0 98.08 0 49.04 49.39 0 1 0-98.08 0Z" p-id="2378"></path>
    </svg>
    <template #dropdown>
      <tiny-dropdown-menu popper-class="my-class" placement="top">
        <tiny-dropdown-item label="default-theme">默认主题</tiny-dropdown-item>
        <tiny-dropdown-item label="infinity-theme">无限主题</tiny-dropdown-item>
        <tiny-dropdown-item label="smb-theme">极客黑主题</tiny-dropdown-item>
      </tiny-dropdown-menu>
    </template>
  </tiny-dropdown>
</template>

第三步：调用 changeTheme 当法方法实现主题切换

import { getCurrentInstance } from 'vue'

const theme = getCurrentInstance().appContext.config.globalProperties.theme

const changeTheme = (value) => {
  theme.changeTheme(THEME_MAP[value.vm.label])
}

效果如下：

自定义主题

只需要按照以下格式定义一个主题对象，即可自定义自己的主题，并且通过 changeTheme 方法进行切换。

夏天来了，我想自定义一个西瓜红🍉主题。

先从西瓜的照片里吸取一个颜色：#ab1b2c

const watermelonRedTheme = {
  id: 'watermelon-red-theme', // 主题的唯一id，每个主题必须唯一
  name: 'Watermelon Red Theme', // 主题的英文名称
  cnName: '西瓜红主题', // 主题的中文名称
  data: {
    'ti-base-color-brand-6': '#ab1b2c', // 西瓜红
    ...
  } // 主题变量
}

然后初始化时传入这个watermelonRedTheme 对象即可：

const theme = new TinyThemeTool(watermelonRedTheme, 'tinyStyleSheetId') // 初始化西瓜红主题

你也可以在切换主题的时候传入这个 watermelonRedTheme 对象：

theme.changeTheme(watermelonRedTheme)

效果如下：

如果我既想要极客黑的圆润，又想要西瓜红，怎么办呢？

我们可以继承极客黑主题，在极客黑主题的基础上，加上西瓜红主题的变量，从而实现圆润版本的西瓜红主题。

const watermelonRedTheme = {
  id: 'watermelon-red-theme', // 主题的唯一id，每个主题必须唯一
  name: 'Watermelon Red Theme', // 主题的英文名称
  cnName: '西瓜红主题', // 主题的中文名称
  data: {
    ...tinySmbTheme.data, // 继承自极客黑主题
    'ti-base-color-brand-6': '#ab1b2c', // 西瓜红
    ...
  } // 主题变量
}

效果如下：

当然实际定制一个主题还有很多细节考虑，不止修改这一个主题变量。

如果你觉得我们的默认主题不好看，不妨尝试下无限主题和极客黑主题。

如果这两个主题依然满足不了你的需求，目前 OpenTiny 提供了 400 多个基础主题变量，5000 多个组件级变量，支持自定义主题，并提供了在线主题配置系统，你也可以轻松配置属于自己的主题。

更详细的主题配置指南，请参考 OpenTiny 的官网文档：opentiny.design/tiny-vue/zh…

联系我们：

• 官方公众号：OpenTiny
• OpenTiny 官网
• Vue 组件库（欢迎 Star 🌟）

往期文章推荐

• 🌈Create Vite App 支持 OpenTiny 啦
• 🌈使用 TinyCLI 两行命令创建一个美观大气的 Admin 系统
• 🌈一个 OpenTiny，Vue2 Vue3 都支持！
• 🌈历史性的时刻！OpenTiny 跨端、跨框架组件库正式升级 TypeScript，10 万行代码重获新生！
• 🌈OpenTiny 的这些特色组件，很实用，但你应该没见过