Trying to Use Dark Mode with the Light Switch

[goobernacular]

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]

Thank you for your kind words!

Import the Dark CHILD XML as a child of your style. It should trickle down most of the changes.

 

[goobernacular]

Sweet. It appears to be like 90% there if not further. I'm assuming from here I just use the Xenbase settings and it's own extra.less to finish it off?

 

[Russ]

Yep! Really the only things that won't trickle down is if a property is customized in the dark style and you've made a change in your light style in that same property.

 

[goobernacular]

Russ, is it possible to target the background color of these icons in the header?

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?

 

[Russ]

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

 

[goobernacular]

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!

 

[goobernacular]

For Future Reference I did it with CSS in the extra.less file:

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

 

[goobernacular]

Russ, in the Style Properties, I'm having an insane time trying to find out how to change the background color of these buttons BEFORE hover. I see that they're transparent and inheriting the parent, which seems to be a "pop up" but nothing in the Pop Up section targets it, and nothing at the bottom of the Rich Text Editor where I can otherwise target buttons features a background color before the hover.

Any tips so that they're not invisible? The problem is the icon color is the same as the inherited background color, and I'm only able to change the background color upon hover, as seen in the Unlink button.

Thanks!

 

[Russ]

Try something like:

.fr-toolbar .fr-command.fr-btn, .fr-popup .fr-command.fr-btn, .fr-modal .fr-command.fr-btn { color: @xf-linkColor; }

See if that helps.