Use colors theme variables in custom CSS

[Aorewen]

Hello,

Someone know how to use primary and secondary color variable in custom CSS?

Thanks,

[DarthMaul]

Hi,

In your theme-***.scss for example theme-blue.scss there is primary color and accent color you can just change them it will apply to the ultima.

[Aorewen]

I want the exact opposite, use the primary color in my code to custom my components

[DarthMaul]

You should just define primary and accent color for your own components then apply them to it in your custom theme.

And take a look at here,

http://www.primefaces.org/ultima-ng/#/documentation

[Aorewen]

No way to do it dynamically ?

I want my custom CSS change if i switch theme color

[DarthMaul]

You should variable names directly to the your components.

For example you have a button

Code: Select all

.button {
    .loginBtn {
          background-color: $primaryColor;(Your custom color)
          color: $accentColor;
          &.ui-state-hover {
                 background-color: $primaryDarkColor;
          }
    }
}

When you change theme after this your custom css will automatically applied to your components.

[Aorewen]

I'll try this, thanks a lot

[Aorewen]

So, i tried this w/o success.

This is what i did :

Create a

Code: Select all

<p id="1">hello</p>

in my view and in my css

Code: Select all

#1 { color: $primaryColor; }

There is something missing in the process? Like declare my primary and accentColor in the root off my application with the path of the scss file ?

[DarthMaul]

Yes you should have those variables in your root.

[Helayxa]

Hi,

I'm on the same problem.

In my component.ts, I have :

Code: Select all

styleUrls: ['../../assets/primeng-ultima/theme/theme-dark-blue.scss']

which is the good path to the theme.

Then, in my component.html, I have :

Code: Select all

<p class="test"> test</p> 

And, in my component.css, I try :

Code: Select all

.test {
  color: $accentColor;
}

What's wrong with this method ? Because the navigator returns that $accentColor is an invalid value.

Thanks in advance