Imtes UI

Appearance

主题定制 ​

Imtes UI 基于 Tailwind CSS 构建，支持灵活的主题定制和样式扩展。

基础定制 ​

使用 Tailwind CSS 变量 ​

组件库使用 Tailwind CSS 的设计系统，你可以通过修改 Tailwind 配置来定制主题：

查看代码
javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          900: '#1e3a8a',
        }
      }
    }
  }
}

CSS 变量覆盖 ​

你也可以通过 CSS 变量来覆盖默认样式：

查看代码
css
/* 在你的全局样式文件中 */
:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
}

Element Plus 主题定制 ​

由于组件基于 Element Plus 构建，你可以使用 Element Plus 的主题定制功能：

使用 SCSS 变量 ​

查看代码
scss
// styles/element-variables.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #409eff,
    ),
    'success': (
      'base': #67c23a,
    ),
    'warning': (
      'base': #e6a23c,
    ),
    'danger': (
      'base': #f56c6c,
    ),
    'error': (
      'base': #f56c6c,
    ),
    'info': (
      'base': #909399,
    ),
  )
);

然后在你的入口文件中引入：

查看代码
javascript
// main.js
import './styles/element-variables.scss'

使用 CSS 变量（推荐） ​

Element Plus 支持通过 CSS 变量进行主题定制：

查看代码
css
/* 自定义主题色 */
:root {
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
}

/* 自定义组件尺寸 */
:root {
  --el-component-size-large: 48px;
  --el-component-size: 40px;
  --el-component-size-small: 32px;
}

/* 自定义边框圆角 */
:root {
  --el-border-radius-base: 4px;
  --el-border-radius-small: 2px;
  --el-border-radius-round: 20px;
  --el-border-radius-circle: 100%;
}

暗黑模式 ​

Element Plus 支持暗黑模式，你可以轻松启用：

自动切换 ​

查看代码
javascript
// main.js
import 'element-plus/theme-chalk/dark/css-vars.css'
查看代码
css
/* 在你的 CSS 中 */
html.dark {
  /* 暗黑模式样式会自动应用 */
}

手动切换 ​

查看代码
vue
<template>
  <div>
    <el-switch 
      v-model="isDark" 
      @change="toggleDark"
      active-text="暗黑模式"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isDark = ref(false)

const toggleDark = (value) => {
  if (value) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
}
</script>

自定义组件样式 ​

全局样式覆盖 ​

查看代码
css
/* 覆盖按钮组件样式 */
.el-button {
  --el-button-font-weight: 500;
  --el-button-border-color: transparent;
}

.el-button--primary {
  --el-button-text-color: #ffffff;
  --el-button-bg-color: #409eff;
  --el-button-border-color: #409eff;
}

/* 覆盖表格组件样式 */
.vxe-table {
  --vxe-font-color: #606266;
  --vxe-table-header-background-color: #f5f7fa;
  --vxe-table-border-color: #ebeef5;
}

使用 CSS Modules ​

查看代码
vue
<template>
  <ImButton :class="$style.customButton">
    自定义按钮
  </ImButton>
</template>

<style module>
.customButton {
  background: linear-gradient(45deg, #409eff, #67c23a);
  border: none;
  color: white;
  font-weight: bold;
}
</style>

响应式设计 ​

使用 Tailwind CSS 的响应式工具类：

查看代码
vue
<template>
  <div class="p-4 md:p-8 lg:p-12">
    <ImButton 
      class="w-full md:w-auto"
      size="small md:large"
    >
      响应式按钮
    </ImButton>
  </div>
</template>

主题切换示例 ​

完整的主题切换实现：

查看代码
vue
<template>
  <div class="theme-switcher">
    <el-dropdown @command="handleThemeChange">
      <el-button>
        主题切换 <el-icon><ArrowDown /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="light">浅色主题</el-dropdown-item>
          <el-dropdown-item command="dark">深色主题</el-dropdown-item>
          <el-dropdown-item command="blue">蓝色主题</el-dropdown-item>
          <el-dropdown-item command="green">绿色主题</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'

const themes = {
  light: {
    '--el-color-primary': '#409eff',
    '--el-bg-color': '#ffffff',
    '--el-text-color-primary': '#303133'
  },
  dark: {
    '--el-color-primary': '#409eff',
    '--el-bg-color': '#141414',
    '--el-text-color-primary': '#e5eaf3'
  },
  blue: {
    '--el-color-primary': '#1890ff',
    '--el-bg-color': '#ffffff',
    '--el-text-color-primary': '#303133'
  },
  green: {
    '--el-color-primary': '#52c41a',
    '--el-bg-color': '#ffffff',
    '--el-text-color-primary': '#303133'
  }
}

const handleThemeChange = (theme) => {
  const root = document.documentElement
  const themeVars = themes[theme]
  
  Object.keys(themeVars).forEach(key => {
    root.style.setProperty(key, themeVars[key])
  })
  
  // 处理暗黑模式
  if (theme === 'dark') {
    root.classList.add('dark')
  } else {
    root.classList.remove('dark')
  }
}
</script>

最佳实践 ​

  1. 使用 CSS 变量: 优先使用 CSS 变量进行主题定制，便于动态切换
  2. 保持一致性: 确保自定义样式与组件库的设计语言保持一致
  3. 响应式优先: 使用 Tailwind CSS 的响应式工具类
  4. 性能考虑: 避免过度的样式覆盖，影响性能
  5. 可维护性: 将主题配置集中管理，便于维护

参考资源 ​

基于 MIT 许可发布

Copyright © 2025 Imtes