In custom CSS files, colors should never be hardcoded (some examples of non-recommended practices are here and here.
Alternatively, it'd be better to use PF semantic tokens (this will keep the styles dark theme compatible).
I am absolutely happy to help you find the correct semantic tokens. They all live in this css file. Any by default, a semantic token is one with NO number at the end of the token name.
i.e. --pf-t--global--color--brand--100 is NOT a semantic token and should not be used.
Instead --pf-t--global--color--brand--default is a semantic token and would be better to use when trying to use the brand color.
Some semantic tokens I think you'll use often based on looking at your code:
instead of white for a background color use var(--pf-t--global--background--color--primary--default)
instead of white for an inverse text color, use var(--pf-t--global--text--color--inverse)
instead of black for an inverse background color, use var(--pf-t--global--background--color--inverse--default)
instead of red for a text color, use var(--pf-t--global--text--color--required)
It's also easy to identify code that is overriding the PF API's colors incorrectly is to add class="pf-v6-theme-dark" to the html or root element. Anything that does not flip to dark mode correctly is something to investigate.
In custom CSS files, colors should never be hardcoded (some examples of non-recommended practices are here and here.
Alternatively, it'd be better to use PF semantic tokens (this will keep the styles dark theme compatible). I am absolutely happy to help you find the correct semantic tokens. They all live in this css file. Any by default, a semantic token is one with NO number at the end of the token name.
i.e.
--pf-t--global--color--brand--100is NOT a semantic token and should not be used. Instead--pf-t--global--color--brand--defaultis a semantic token and would be better to use when trying to use the brand color.Some semantic tokens I think you'll use often based on looking at your code:
whitefor a background color usevar(--pf-t--global--background--color--primary--default)whitefor an inverse text color, usevar(--pf-t--global--text--color--inverse)blackfor an inverse background color, usevar(--pf-t--global--background--color--inverse--default)redfor a text color, usevar(--pf-t--global--text--color--required)It's also easy to identify code that is overriding the PF API's colors incorrectly is to add
class="pf-v6-theme-dark"to thehtmlor root element. Anything that does not flip to dark mode correctly is something to investigate.