在 Strapi 中更改原色？

Question

我想更改 Strapi 的原色。我已经尝试了一些事情，例如我已经在 strapi-admin 下的 Node_Modules 中并查看了那里的所有文件。可惜没有成功。

我还查看了 Strapi 的以下文档： https://strapi.io/documentation/developer-docs/latest/guides/custom-admin.html#introduction

但不知何故没有任何帮助，也许你们中有人更了解那里。

我的 Strapi 在 Docker 容器上运行，我使用 Strapi 的“v3.5.1 社区版”。

Answer 1

可以在 node_modules\strapi-admin\admin\src\themes\colors.js 中找到颜色。

将它们复制到 admin\src\themes\colors.js 以进行更改。请注意，Strapi 使用变量来设置颜色，因此您必须找到特定文件并进行相应更新。

例如：更改菜单 link 颜色将在 admin\src\components\LeftMenu\LeftMenuLink\A.js

中完成

 &.linkActive {
  color: white !important;
  border-left: 0.3rem solid ${props => props.theme.main.colors.mediumBlue};
}

注意道具。这就是 Strapi 典型设置颜色的方式。

编辑

原色可以通过同一文件中的 Strapi 对象进行更新。

  strapi: {
   'gray-light': '#eff3f6',
   gray: '#535f76',
   'blue-darker': '#18202e',
   'blue-dark': '#151c2e',
    blue: '#0097f7',
  },

Answer 2

我设法完成了这个...但是结果有点乱。

通过将 nodemodules/strapu-admin/admin/src/app.js 复制到 admin/src

来覆盖 app.js

更新复制的 app.js 以包含自定义覆盖 CSS 文件，我的如下所示：

// Third party css library needed
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.min.css";
import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.min.js";

// Custom CSS overrides (this is the new override file)
import "../../admin/src/themes/bootstrap-overrides.css";

然后只需在上面的位置创建一个新的 css 文件并根据需要覆盖 html 属性。例如

button[color="primary"] {
  background-color: #FC345C !important;
  border-color: #FC345C !important;
}

此解决方案显然需要您在升级 Strapi 时密切关注 app.js，但这是我能找到的唯一解决方案。

Answer 3

@JJ Setsta 的建议很好。然而，正如他自己所说，您需要注意 app.js 文件的变化。通过调整他的方法并导入 overrides.css 并将其放入 strapi 本身希望被影子文件夹结构 (https://strapi.io/documentation/developer-docs/latest/development/admin-customization.html#tutorial-videos) 覆盖的文件中，即。 admin/src/config.js 我们得到了预期的结果，无需担心更新。

示例：

admin/src/config.js

export const LOGIN_LOGO = null;
export const SHOW_TUTORIALS = true;
export const SETTINGS_BASE_URL = '/settings';
export const STRAPI_UPDATE_NOTIF = true;

import "./themes/override.css";

admin/src/themes/override.css

button[color="primary"] {
  background-color: #FC345C !important;
  border-color: #FC345C !important;
}

在 Strapi 中更改原色？

Change Primary Color in Strapi?

css

strapi