How to use theme colors in ngx-admin theme

Question

I am new to Angular and I am trying to learn it by using ngx-admin theme. It uses Sass for styling and in one of my components I want to set background color of div. However I want to use one of the colors provided by the theme so that if user toggles the theme the color can change. I cannot figure out how to use global colors of the theme in my component's scss file.

This is what I want

.product-container{
    background:#3d3780; // Instead of using a hard coded color, I want to use theme color here
}

Afraz Ali Afraz Ali · Accepted Answer · 2018-06-07T06:24:16

Ok I was able to find out how to use theme global colors.

Firs you need to import global theme styles by importing

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

Then I can set color like this

@include nb-install-component() {
    .product-container{
        background:nb-theme(color-bg);
    }
  }

We need to wrap our styles inside the @include nb-install-component() call so that styles are refreshed when user changes theme.

For anyone interested in further reading, here is the official documentation of the theme.

How to use theme colors in ngx-admin theme

1 Answers