How to recreate Corporate theme header colours from previous version?

[daveboulden]

I have registered an extra theme for my app. I want to recreate the "white text, black background" navigation header style from the previous version of the Corporate theme.

I have registered my new theme (based on Corporate) in /src/app/@theme/styles/themes.scss:

$nb-themes: nb-register-theme((
  layout-padding-top: 2.25rem,

  menu-item-icon-margin: 0 0.5rem 0 0,

  card-height-tiny: 13.5rem,
  card-height-small: 21.1875rem,
  card-height-medium: 28.875rem,
  card-height-large: 36.5625rem,
  card-height-giant: 44.25rem,
  card-margin-bottom: 1.875rem,
  card-header-with-select-padding-top: 0.5rem,
  card-header-with-select-padding-bottom: 0.5rem,

  select-min-width: 6rem,

  slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,

  header-fg: #eee,
  header-bg: #111,
), mytheme, corporate);

Which style overrides do I need to add to change the header colouring as required?

I tried some examples form the Nebular documentation (header-fg and header-bg), but it made no difference.

[yggg]

Hi @daveboulden. Theme variables were heavily updated during migration to the Eva Design system in Nebular 4, so header-fg became header-text-color and header-bg became header-background-color. (full list of header variables) Changing variable names to new ones should do the trick.

In case you have other Nebular components in the header, you also need to include dark theme into themes setup and add nb-theme-dark css class to the ngx-header element. This will change the theme for the header components. To enable dark theme add $nb-enabled-themes: (corporate, dark); to the themes.scss file. Theme names order is important here, please, don't change it.

[daveboulden]

Many thanks for that explanation. I now have the colouring I require and understand better how the theming is wired up. I now have this theme entry:

$nb-themes: nb-register-theme((
  header-text-color: #ddd,
  header-background-color: #111,
  user-picture-box-background-color: #ddd,
  user-picture-box-border-color: #ccc,
  user-initials-text-color: #1a2138,
  user-name-text-color: #ddd,
  user-title-text-color: #ccc,
  actions-icon-color: #ddd,
  actions-divider-color: #666,
  card-header-info-background-color: #888,
), mytheme, corporate);

I am changing the background colour of the "info" status card header. Is there a formalised way to create custom statuses so that I don't have to hijack the "-info" status to recolour the card headers within just one part of my app?

e.g:

<nb-card status="mycustomstatus">   <-------------------------------------
    <nb-card-header [innerHTML]='EditorTitle'></nb-card-header>
    <nb-card-body>
              .... some content ...
    </nb-card-body>
</nb-card>

[yggg]

@daveboulden There is no config for statuses. My suggestion is to extend NbCardComponent and add host binding for the custom status:

export class MyCustomCard extends NbCardComponent {
  @HostBinding('class.status-custom')
  get customStatus() {
    return this.status === 'custom';
  }
}

Then you can add stylesheet for this component and add styles you need for the custom status.

[daveboulden]

@yggg Thank you Sergey!

[DarkToan]

@yggg mr. do you know by chance if there's any hack to use linear-gradient function on header-background-color? On previous variable (header-bg) I was able to use gradient without problem. I tried header-background-color:linear-gradient(270deg, #a2c3f3 0%, #3d5c96 100%), and header-bg: linear-gradient(to right, #a2c3f3, #3d5c96), without any luck. Hope you can help me with this issue.