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

Question

I have started using the ngx-admin template and it is really great.

However, I want to change one of the templates provided, the dark one. All I want to do is change the main theme colour (which is some shade of blue) to a different dark colour like (black, etc).

Can that be done, if yes, please tell me how?

I have tried reading the docs, but either I am searching it right or it cannot be done.

I am using any kind of template for the first time and any help would be hugely appreciated.

Answer 1

Nebular allows you to create your own custom theme as well has inherit from an already exiting theme. If you're using ngx-admin you can put your own theme in src/app/@theme/styles/themes.scss, inherit from the dark theme and modify just the primary color.

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

Then just set your default theme in the theme.module.ts

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

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

Or if you're using the theme drop you can add your custom theme to the header.component.ts file.

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/