Search code examples
angularnebular

How do you change theme variable value in Nebular UI?

Supposed that i want to change nb-layout-header height, Nebular Documentation shows that variable name for header height is header-height

https://akveo.github.io/nebular/docs/components/layout/theme#nblayoutheadercomponent

how do i modify the variable value? do i have to create a custom theme for that?

Solution

  • I've checked Nebular UI documentation and to change the header height, you can go to the themes.scss and define the header-height there.

    I've tried it on the Nebular sample Stackblitz

    @import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/default';

$nb-themes: nb-register-theme((
  header-height: 3rem
), default, default);

    The changing of the Nebular UI CSS Component reference here