咨询Mantine主题主色相关属性及自定义配置方法

一、所有主色相关的CSS变量 #

当你在主题中设置primaryColor后，Mantine会自动生成一系列关联的CSS变量，除了你提到的两个，还有这些常用的：

• --mantine-primary-color：基础主色
• --mantine-primary-color-hover：主色hover状态
• --mantine-primary-color-light：主色的浅色变体
• --mantine-primary-color-filled-hover：填充状态主色的hover效果
• --mantine-primary-color-outline：轮廓样式组件的主色
• --mantine-primary-color-outline-hover：轮廓样式组件的hover主色
• --mantine-primary-color-contrast：主色填充状态下的文字对比色（确保可读性）
• --mantine-primary-color-hue：主色的色相值（用于动态调整色调）
• --mantine-primary-color-lightness：主色的亮度值（用于动态调整亮度）

二、定义主色属性的方式 #

1. 使用内置预设颜色 #

直接在主题中指定Mantine内置的颜色名称，比如blue、red、green等，框架会自动生成所有对应的主色变量：

const theme = {
  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
  primaryColor: 'blue', // 内置颜色名
};

export default theme;

2. 自定义颜色数组 #

在主题的colors字段中添加自定义颜色数组（需包含10个不同亮度的色值，下标5为核心主色调），然后将primaryColor指向该自定义颜色名：

const theme = {
  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
  colors: {
    brandPrimary: [
      '#f8fafc',
      '#e2e8f0',
      '#cbd5e1',
      '#94a3b8',
      '#64748b',
      '#475569', // 核心主色调
      '#334155',
      '#1e293b',
      '#0f172a',
      '#020617'
    ],
  },
  primaryColor: 'brandPrimary',
};

export default theme;

3. 直接覆盖CSS变量 #

如果只需要调整个别主色变量，可在全局CSS中直接覆盖：

:root {
  --mantine-primary-color: #2563eb;
  --mantine-primary-color-filled: #1d4ed8;
}

内容的提问来源于stack exchange，提问作者Nhut Truong