Use colors theme variables in custom CSS

[DarthMaul]

You can use sass variables with .css file it's sass exclusive.

[Helayxa]

So, there's no way to get the value of $primaryColor, outside of the .scss file ?

If I create a component outside primeng components, I wont be able to style it with the colors of the primeng theme I'm using ?

[DarthMaul]

No you can use it.For example in app.component.html you have a div with width and height both 200px.I assume that you want to change the background color of that div to primaryColor.
in your app.component.scss you should import the theme which you are using for example you can try this one.

Code: Select all

@import './shared/resources/theme/theme-blue.scss';

.test {
    width: 200px;
    height: 200px;
    background-color: $primaryColor;
}

I placed my theme-** folder and files to a folder called shared then i import my theme-blue.scss from overthere after that primaryColor and accentColor are defined in that theme-blue.scss
Now you have access for theme colors.