如何修改Strapi管理面板中的主按钮颜色

适用Strapi v4（目前主流版本） #

• 你修改colors.js后仅菜单生效、按钮不生效，是因为Strapi v4的按钮样式有单独的组件级配置，仅修改全局色值不会覆盖按钮专属属性
• 首先找到项目根目录下的/src/admin/app.js文件，按以下结构扩展主题配置：

export default {
  config: {
    theme: {
      // 先定义你需要的主色阶
      colors: {
        primary500: "#1677ff", // 主按钮默认状态色
        primary600: "#4096ff", // 主按钮hover状态色
        primary700: "#0958d9", // 主按钮点击状态色
        // 其余原有色值可保留
      },
      // 单独配置按钮组件属性
      components: {
        Button: {
          primaryBackground: "{colors.primary500}",
          primaryHoverBackground: "{colors.primary600}",
          primaryActiveBackground: "{colors.primary700}",
        }
      }
    },
  },
  bootstrap() {},
};

• 配置完成后必须重新构建admin面板才能生效，执行命令：npm run build，构建完成后重启Strapi服务即可

适用Strapi v3 #

• 找到/admin/src/themes/colors.js文件，除了修改基础primary色值外，额外补充按钮状态色配置：

export default {
  primary: "#1677ff",
  primaryHover: "#4096ff",
  primaryActive: "#0958d9",
  // 其余原有配置保留
}

• 修改后执行npm run build重新构建admin面板，重启服务后生效

注意：不要同时在多个配置文件修改同一份主题属性，避免优先级冲突导致样式不生效

内容的提问来源于stack exchange，提问作者Anoop Joshi P