如何在 ngx-admin 主题中使用主题颜色

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
} 

Answer 1

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.