Question

我将Angular 9与Nebular 5一起使用。我想更改主题的原色。根据{{3}}

我可以使用类似以下的内容：

@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/default';

$nb-themes: nb-register-theme((

  color-primary-100: #faf7ff, // <- new primary color
  color-primary-200: #ece3ff,
  color-primary-300: #d5bfff,
  color-primary-400: #b18aff,
  color-primary-500: #a16eff,
  color-primary-600: #7b51db,
  color-primary-700: #5a37b8,
  color-primary-800: #3e2494,
  color-primary-900: #29157a,

  text-basic-color: color-basic-800,
  text-disabled-color: color-basic-600,
), default, default);

我显然可以通过简单地修改以下行来更改原色：

color-primary-100: #faf7aa, // <- new primary color

我不知道如何生成剩余的颜色：

  color-primary-200: #ece3ff,
  color-primary-300: #d5bfff,
  color-primary-400: #b18aff,
  color-primary-500: #a16eff,
  color-primary-600: #7b51db,
  color-primary-700: #5a37b8,
  color-primary-800: #3e2494,
  color-primary-900: #29157a,

有人可以帮我一下吗？由于Nebular 5是基于Bootstrap框架的，我该如何生成这些代码？

Answer 1

首先，您需要为项目选择一种主要颜色。例如它的＃a16eff（紫色）。现在，您需要转到https://maketintsandshades.com/并填写您的原色代码，然后按Enter。

您会看到许多颜色的阴影。现在，您需要将此基色代码设置为＃a16eff并将其设置为“ color-primary-500”。

“ color-primary-100”，“ color-primary-200”，“ color-primary-300”，“ color-primary-400”将是您可以设置的阴影。 “ color-primary-100”将是最浅的，并且进一步变暗，直到“ color-primary-900”。 “ color-primary-900”将是您最暗的颜色。

这是您可以使用的格式

$nb-themes: nb-register-theme((

  color-primary-100: #faf7ff, // <- lightest shade
  color-primary-200: #ece3ff, // <- light shade
  color-primary-300: #d5bfff, // <- light shade
  color-primary-400: #b18aff, // <- light shade
  color-primary-500: #a16eff, // <- new primary color (main color which defines your UI)
  color-primary-600: #7b51db, // <- Darker Shade
  color-primary-700: #5a37b8, // <- Darker Shade
  color-primary-800: #3e2494, // <- Darker Shade
  color-primary-900: #29157a, // <- Darkest Shade
), default, default);

这些额外的阴影会自动用于悬停效果，焦点效果，boder，活动状态等。

更改主题原色

1 个答案: