更改 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/