颜色

rengar-admin的色彩是基于tailwindcss3的色彩值的，颜色值列表可以查看tailwindcss3-colors。

这里举个颜色值的例子：

  slate: {
    DEFAULT: '#64748b',
    50: '#f8fafc',
    100: '#f1f5f9',
    200: '#e2e8f0',
    300: '#cbd5e1',
    400: '#94a3b8',
    500: '#64748b',
    600: '#475569',
    700: '#334155',
    800: '#1e293b',
    900: '#0f172a',
    950: '#020617',
  },

tailwindcss的所有颜色值已经注入为 css 变量，

新增了primary的自定义主题色，新增的primary颜色是根据颜色自动生成符合以上示例值的颜色。

你可以在代码中直接使用这些颜色值，使用方式var(--color-[色系]-[值])，如var(--color-primary-500) 、var(--color-red-500)。其中， DEFAULT字段使用的时候直接省略，如var(--color-slate)、var(--color-primary)

示例如下：

<div class="text-primary"></div>
<div style="color: var(--color-primary)"></div>

<div class="text-primary-200"></div>
<div style="color: var(--color-primary-200)"></div>

自定义主题色

直接修改src/config/app.ts中的代码即可：

const appConfig: App.BaseConfig = {
  layout: {
    layoutMode: "aside",
    asideWidth: 220,
    headerHeight: 56,
    footerHeight: 46,
    tabHeight: 44,
    gap: 12,
    showTabs: true,
    showBreadcrumb: true,
    showFooter: true,
  },
  theme: {
    primaryColor: "#8b5cf6", #### 自定义主题色，由于naive-ui的局限性，只支持16进制颜色值
  },
};

暗黑模式适配

theme 适配

rengar-admin的暗黑模式是基于naive-ui的暗黑模式的，通常情况下，使用naive-ui的组件无需额外适配，假如你想让某个元素在特定的情况下适配暗黑模式，你直接给该元素添加class="theme"即可，theme代码位于src/assets/styles/main.css中，样式如下：

.theme {
  background-color: var(--n-color);
  color: var(--n-text-color);
  transition: color 0.3s var(--n-bezier), background-color 0.3s var(--n-bezier),
    box-shadow 0.3s var(--n-bezier), border-color 0.3s var(--n-bezier);
}

使用:

<div class="theme">这样该div就会自动适配了</div>

unocss 适配

unocss可以通过dark:xxx来实现暗黑模式下的样式，如：

 <div class="dark:text-red">111</div>

其他

当然还有一些第三方组件有自己的暗黑模式适配逻辑，这个时候你可以监听src/stores/modules/app.ts中的theme字段来判断当前是否是暗黑模式，然后自己适配。