Ngx-admin: Light theme - Change banner or Nav header color

[gamefundas]

Wondering if there is a way for me to change the banner background color. I have defaulted to Light theme but looking to have a blue banner. Couldn't find any documentation around overriding parts of the theme.

[Mr-Sloth]

Hi,
this is not to hard, go to: @theme/styles/themes.scss

There you have 2 blocks to register theme variables, the first one for default and the second one for cosmic theme.

Since the variable is out of the box declared from nebular component you have to overwrite it like this:

$nb-themes: nb-register-theme((
 // app wise variables for each theme
  sidebar-header-gap: 2rem,
  sidebar-header-height: initial,
  layout-content-width: 1400px,
        header-bg: blue, //header-bg is the variable you need

  font-main: Roboto,
  font-secondary: Exo,
), default, default);

Here is the documentation for it https://akveo.github.io/nebular/#/docs/guides/enabling-theme-system

If you want to know which variables come out of the box look under: node_modules/@nebular/theme/styles/themes/_default.scss or _comics.scss

[nnixaa]

Hey @darklinki, many thanks for your help!
@gamefundas more documentation on topic
1 https://akveo.github.io/nebular/#/docs/concepts/theme-system
2 https://akveo.github.io/nebular/#/docs/themes/default

[gamefundas]

Awesome, tried and it worked.
Thanks @darklinki and @nnixaa

[florarceguet]

Is there any way to change colors outside node_modules? I'm working with git and node_modules is in .gitignore

[PranavBhatia]

@florarceguet
I have the same question as you did. Did you find any solution?