主题配置

vue3-element-admin 支持多种主题配置。

暗黑模式

切换暗黑模式

点击导航栏的暗黑模式开关即可切换。

代码实现

<script setup lang="ts">
import { useDark, useToggle } from "@vueuse/core";

const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>

<template>
  <el-switch v-model="isDark" @change="toggleDark" />
</template>

主题色

配置主题色

在设置面板中选择主题色。

CSS 变量

:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
}

布局配置

布局模式

• 经典布局：左侧菜单 + 顶部导航
• 顶部布局：顶部菜单
• 混合布局：顶部一级 + 左侧二级

配置项

interface LayoutSettings {
  // 布局模式
  layout: "left" | "top" | "mix";
  // 固定头部
  fixedHeader: boolean;
  // 显示标签页
  tagsView: boolean;
  // 侧边栏 Logo
  sidebarLogo: boolean;
}

组件尺寸

支持三种尺寸：

• 大号：large
• 默认：default
• 小号：small

相关链接

• ThemeSwitch 组件
• SizeSelect 组件
• 布局系统