Trying to Use Dark Mode with the Light Switch

Russ, I'm back. I thank you for the work you do here. I want to finally set up Dark Mode now that you have the awesome Light Switch working.

I've imported the Dark version of Flat Awesome. My first question is... should I have imported that as a child of my child theme (the light version) or should that be imported as new child of the parent (DO NOT EDIT version)?

I imported it as a child of the parent (DO NOT EDIT) and none of my template changes carried over or any of my Xenbase settings or extra.less. Was this my first mistake or do I have to maintain two versions?
 
Russ, is it possible to target the background color of these icons in the header?

daxWmea.png


I'm having a heck of a time finding it in the style properties section.

Also: could you help me understand extra.less on this Child-Child theme? It appears to be the exact same file as it's parent (the light theme). If I make edits there, what happens? I stop getting the parent changes from propagating down?
 
Last edited:

Russ

Pixel Exit Staff
That's coming from: Style properties -> Header and navigation -> Header adjustment color

You're understanding extra.less correctly yes. You need to be cautious with a light/dark style. Instead of hard coding values in the parent style like: color: #000;, you should use the style properties: color: @xf-textColor; as an example.

Additionally, you can use this CSS inside the light style extra.less to target the dark:

.style-light .block { color: pink; }
.style-dark .block { color: green;}

Or you can also use the template "xb_custom_style.less" on the dark style to make any edits there specific for the dark style so it'll never customize extra.less and you'll still get those changes from the light.

Make sense? Bit confusing at first :D
 
Russ, you made perfect sense. Thanks. I opted for .style-light & .style-dark. Perfection.

Final question before I go live! Is it possible to make the Font Awesome icons used in the light switch to become the "solid" version rather than light, regular, or duotone? (I think it's currently set to 'light' but I'd prefer 'solid' to match the rest of my icons)

After that I'm all ready to rock, and I appreciate your help with this. Very satisfied customer here!
 
For Future Reference I did it with CSS in the extra.less file:

Code:
/* Make Light Switch in Header be the 'Solid' Font Awesome */
.p-navgroup-link--iconic.p-navgroup-link--switch i:after {
    font-weight: 600;
}
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.