更改所有（背景、侧边栏、组件等）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',
    }
    ...
  ];

}

Nebular Theme Documentation

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

Nebular Theme Generator

https://colors.eva.design/

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

Change all (background, sidebar, components, etc) the background color of the dark theme provided by NGX-ADMIN

sass

angular

ngx-admin

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

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

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