XF 2.2 Custom dark style for bbTable <th> elements

Slion

Active member
Is there a way to change background color of bbTable <th> without doing CSS?
I've designed a dark theme but my table headers are showing white.
 
Solution
So I guess the solution when designing a dark theme and avoid having to use CSS is to make sure you reverse the color palette to prevent those issues. paletteColor1 should be the darkest and paletteColor5 the lightest. Same for accent and neutral colors.
Then you redefine basic colors as needed from your palette colors mostly swapping the 5s with 1s and 4s with 2s.
All other style properties group should be using basic colors rather than palette colors, just fix those that don't.

This should make sure the rare cases where color palette usage is hard coded should still remain readable. It also helps keeping you sane while designing your style 😁

If you want to customise the table itself I guess you should look at add-ons overriding...
So I guess the solution when designing a dark theme and avoid having to use CSS is to make sure you reverse the color palette to prevent those issues. paletteColor1 should be the darkest and paletteColor5 the lightest. Same for accent and neutral colors.
Then you redefine basic colors as needed from your palette colors mostly swapping the 5s with 1s and 4s with 2s.
All other style properties group should be using basic colors rather than palette colors, just fix those that don't.

This should make sure the rare cases where color palette usage is hard coded should still remain readable. It also helps keeping you sane while designing your style 😁

If you want to customise the table itself I guess you should look at add-ons overriding default TABLE bbCode. I didn't look into it though and that's off topic here.
 
Last edited:
Solution
I checked again @Jordyn styles and somehow he does manage the change the bbTable <th> color without CSS.
@Jordyn Is there any chance you could share your trick?
Sorry mate, i haven't been online much. Little busy at the moment.

Oh and its certainly not fun making a style without the use of style css lol.

Sorry for the late reply.

In Style properties, I think i removed "@xf-contentBg" from BB code blocks background and "@xf-subNavBg" from Sub-navigation row background adding my own color code.

After that, in Basic colors>>Alternate content background color, i just removed "xf-intensify(@xf-contentBg, 3.5%)" again adding my own color code.

Unfortunately, changing Alternate content background color also changes the bbcode header color to. So some fine tuning needs to be done without the use of style css.

I think i also found a bug switching Style type to dark in Color palette. That is why i used Light at the time.

Good luck mate.
 
Last edited:
I think i also found a bug switching Style type to dark in Color palette. That is why i used Light at the time.
I kept that one on light as well. My understanding is that it reverses the behaviour of xf-intensify and xf-diminish macros and that made the style look weird.
 
Back
Top Bottom