主题

提示

Ant Design Vue 等库基本都适配了暗黑模式，再加上 UnoCSS 的支持，开发时可以很轻松的适配暗黑模式

框架主题

主题配色存放在 packages/*/themes/system 文件夹中，分为 dark 和 light 两种模式，你可以根据自己的需求进行修改。

默认提供了 12 款主题，明亮和暗黑模式各 6 款，并且主题在运行时共存，可实现动态切换。

import { defineTheme } from '../../utils';

export default defineTheme({
  name: 'classic',
  colors: {
    'label': '蓝古雅',
    // 颜色主题
    'color-scheme': 'light',
    // 内置 UI
    '--ui-primary': '#1677ff',
    '--ui-text': '#fcfcfc',
    // 主体
    '--g-bg': '#f2f2f2',
    '--g-container-bg': '#fff',
    '--g-border-color': '#f2f2f2',
    // 头部
    '--g-header-bg': '#222b45',
    '--g-header-color': '#fff',
    '--g-header-menu-color': '#fff',
    '--g-header-menu-hover-bg': '#334067',
    '--g-header-menu-hover-color': '#fff',
    '--g-header-menu-active-bg': '#334067',
    '--g-header-menu-active-color': '#fff',
    // 主导航
    '--g-main-sidebar-bg': '#222b45',
    '--g-main-sidebar-menu-color': '#fff',
    '--g-main-sidebar-menu-hover-bg': '#334067',
    '--g-main-sidebar-menu-hover-color': '#fff',
    '--g-main-sidebar-menu-active-bg': '#334067',
    '--g-main-sidebar-menu-active-color': '#fff',
    // 次导航
    '--g-sub-sidebar-bg': '#fff',
    '--g-sub-sidebar-logo-bg': '#222b45',
    '--g-sub-sidebar-logo-color': '#fff',
    '--g-sub-sidebar-menu-color': '#0f0f0f',
    '--g-sub-sidebar-menu-hover-bg': '#dde1e3',
    '--g-sub-sidebar-menu-hover-color': '#0f0f0f',
    '--g-sub-sidebar-menu-active-bg': '#1677ff',
    '--g-sub-sidebar-menu-active-color': '#fff',
    // 标签栏
    '--g-tabbar-dividers-bg': '#a3a3a3',
    '--g-tabbar-tab-color': '#a3a3a3',
    '--g-tabbar-tab-hover-bg': '#e5e5e5',
    '--g-tabbar-tab-hover-color': '#0f0f0f',
    '--g-tabbar-tab-active-color': '#0f0f0f',
  },
});

如果框架提供的主题风格满足不了你的需求，你还可以自定义新的主题。

例如，在 packages/*/themes/system/light 文件夹中新建一个文件，例如 newThemeName.ts，复制上面的代码，修改 name 和 colors 的值即可。

最后在应用配置中使用该主题：

const globalSettings: Settings.all = {
  app: {
    // 如果主题是暗黑模式下使用的，则 darkTheme: 'newThemeName'
    lightTheme: 'newThemeName',
  },
}

提示

本身框架提供的主题色已经很多了，你可以找一个配色相近的主题进行修改，这样可以减少你的工作量。

颜色方案

在应用配置中设置：

const globalSettings: Settings.all = {
  app: {
    /**
     * 留空跟随系统
     * light 明亮模式
     * dark 暗黑模式
     */
    colorScheme: '',
  },
}

导航栏风格

填充风格

在应用配置中设置：

const globalSettings: Settings.all = {
  menu: {
    // 导航栏是否圆角
    isRounded: true,
  },
}

激活风格

在应用配置中设置：

const globalSettings: Settings.all = {
  menu: {
    /**
     * 留空默认
     * arrow 箭头
     * line 线条
     * dot 圆点
     */
    menuActiveStyle: '',
  },
}

面包屑导航风格

在应用配置中设置：

const globalSettings: Settings.all = {
  breadcrumb: {
    /**
     * 留空默认
     * modern 现代
     */
    style: '',
  },
}

标签栏风格

在应用配置中设置：

const globalSettings: Settings.all = {
  tabbar: {
    /**
     * fashion 时尚
     * card 卡片
     * square 方块
     */
    style: 'fashion',
  },
}

同时可以在 /src/assets/styles/globals.scss 中设置标签栏中页签的宽度，默认为 150px 固定宽度：

:root {
  // 标签页最大最小宽度，两个宽度为同一数值时，则为固定宽度，反之将宽度设置为 unset 则为自适应
  --g-tabbar-tab-max-width: 150px;
  --g-tabbar-tab-min-width: 150px;
}

开发注意

如果只在明亮或暗黑模式中，选择其中一种模式进行业务开发，那没有什么需要注意的，你可以按照以往的开发习惯进行开发，这也是框架推荐的方式。

但如果需要让用户可以自己选择明亮或暗黑模式。这时候开发则需要注意，业务页面里使用到的颜色将不能写成固定值（例如 color 、background-color 、border-color 、box-shadow 等有涉及到颜色的属性），因为同一个色值是无法顾及到明亮和暗黑两种模式的。

这时候我们建议使用 UnoCSS 进行样式编写，例如 text-dark dark:text-white 、bg-green dark:bg-red 。如果你不习惯使用 UnoCSS ，那也可以使用下面这种方法，在页面中去自定义一些颜色。

html {
  div {
    color: #000;
  }
  &.dark div {
    color: #fff;
  }
}