1

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

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

可以这样做吗，如果可以，请告诉我怎么做？

我已经尝试阅读文档，但要么我正在搜索它，要么它无法完成。

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

4

1 回答 1

3

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/

于 2020-01-01T22:44:38.217 回答