主题

主题配色存放在 packages/themes 子包中，基础版只提供了一套默认主题，在此不做过多介绍。

专业版 提供了 8 套主题，每套主题都支持明亮和暗黑两种模式，并且主题支持在运行时共存，可实现动态切换。

主题同步 专业版

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  theme: {
    sync: true,
  },
})

每套主题分别有亮色和暗色两种模式，开启主题同步时将共用一套主题，关闭后则可以分别设置亮色和暗色模式的主题。

亮色主题

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  theme: {
    light: 'default',
  },
})

暗色主题

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  theme: {
    dark: 'default',
  },
})

颜色方案

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  theme: {
    colorScheme: '',
  },
})

当设置为 '' 时，将跟随系统。

圆角系数

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  theme: {
    radius: 0.5,
  },
})

该设置会影响到框架中所有圆角组件的圆角系数，例如按钮、卡片、弹窗等。

色弱模式

在应用配置中设置：

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  theme: {
    colorAmblyopia: true,
  },
})

开发注意

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

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

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

div {
  color: #000;

  [data-theme="dark"] & {
    color: #fff;
  }
}

最后分享一篇关于暗黑模式的文章《教你巧用UI设计中的暗黑模式——Dark Mode》，希望帮助你更好地在暗黑模式下开发出优秀的页面。