更改 NGX-ADMIN 提供的深色主题的所有（背景、侧边栏、组件等）背景颜色

Question

我已经开始使用ngx-admin模板，它真的很棒。

但是，我想更改提供的模板之一，即黑暗模板。 我想要做的就是将主题颜色（某种蓝色阴影）更改为不同的深色，例如（黑色等）。

可以这样做吗，如果是，请告诉我如何？

我曾尝试阅读文档，但要么我搜索正确，要么无法完成。

我第一次使用任何类型的模板，任何帮助将不胜感激。

Answer 1

Nebular 允许您创建自己的自定义主题以及从已经存在的主题继承。 如果您使用 ngx-admin，您可以将您自己的主题放在src/app/@theme/styles/themes.scss ，继承dark主题并仅修改原色。

src/app/@theme/styles/themes.scss

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

  color-primary-100: #FEEBE0,
  color-primary-200: #FED2C2,
  color-primary-300: #FEB3A3,
  color-primary-400: #FD968C,
  color-primary-500: #FD6767,
  color-primary-600: #D94B57,
  color-primary-700: #B6334A,
  color-primary-800: #92203E,
  color-primary-900: #791336,
  color-primary-transparent-100: rgba(253, 103, 103, 0.08),
  color-primary-transparent-200: rgba(253, 103, 103, 0.16),
  color-primary-transparent-300: rgba(253, 103, 103, 0.24),
  color-primary-transparent-400: rgba(253, 103, 103, 0.32),
  color-primary-transparent-500: rgba(253, 103, 103, 0.4),
  color-primary-transparent-600: rgba(253, 103, 103, 0.48),

), custom-dark, dark); // <- theme name and a parent theme

然后只需在theme.module.ts设置您的默认主题

src/app/@theme/theme.module.ts

NbThemeModule.forRoot({
    name: 'custom-dark',
  }, [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ]
)

或者，如果您使用主题放置，您可以将自定义主题添加到header.component.ts文件中。

src/app/@theme/components/header/header.component.ts

@Component({
  selector: 'ngx-header',
  styleUrls: ['./header.component.scss'],
  templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit, OnDestroy {

  themes = [
    ...
    {
      value: 'custom-dark',
      name: 'Custom Dark',
    }
    ...
  ];

}

星云主题文档

https://akveo.github.io/nebular/docs/design-system/create-custom-theme#select-parent-theme

星云主题生成器

https://colors.eva.design/