How do you guys maintain a consistent look on multiple styles?

[WoodiE]

Right now on one of my forums I'm wanting to use FlatAwesome+ so I know the install would look like this:

-Xenbase
-- FlatAwesome+
--- My Theme (to make custom changes, etc)

However with the release of FlatAwesome+ Dark I'd like to have the ability to offer that as an option for users but at the same time I'd like it so that when I make a template change to "My Theme" that the dark version also gets updated.

Basically a consistent look between both the light and dark version without having to worry about, if I make a change then I'll need to make sure that exact change is also done on dark.

Would something like this make it all work?

-Xenbase
-- FlatAwesome+
--- My Theme (to make custom changes, etc)
---- FlatAwesome+ Dark
----- My "dark" Theme

Thoughts?

 

[bt012ss]

I think i would take this way

-Xenbase
-- FlatAwesome+
--- Your Style (to make Template changes, Adds etc.)
---- Your light Style (for colors and styling)
---- Your dark Style (for colors and styling)

 

[Russ]

We've approached it a few ways in the past... dark styles being childs of the light, light as childs of the dark. Through our time... it's far easier to manage them as entirely separate styles.

Now in regards to the FA+ Light/Dark combo, one thing you can do is setup your style on the light version, be very careful on certain things. Rather than hard coding in colors using #FFF, try to use the color palette as smart as possible.

Need to set a font color? Set it to @contentText, or one of the @dimmedTextColor @mutedTextColor @faintTextColor palettes. These are text colors around the XF style that would be changed appropriately on the dark style. Same thing for background colors, borders use our @xbPrimaryContent / @xbSecondaryContent along with the @xbPrimaryBorder / @xbSecondaryBorder.

Once you have all of your changes on the light style export that child of the FA+ Light and import it onto the FA+ Dark. Assuming you've been careful with your edits it should work with minimal to no extra work.

Also a thought too... put your additional CSS you plug into into the template: xb_custom_style.css which would be directed towards both styles, while specific light or dark fixes would go inside your extra.css.

I hope that makes sense...

 

[WoodiE]

Thanks guys for the replies, sounds like this is going to take careful planning and still a bit of work.

 

[Ashley.S.]

Typically, I will go like this, after learning the hard way, many moons ago:
-XenBase Framework [Do Not Edit]
--Zipped [Do Not Edit]
---My Custom Zipped Style

Because in the last update, when working for my client, the dark style got bugged through outdated style properties (templates were fine for once so nice work on that!), I've gone for this setup now:
-XenBase Framework [Do Not Edit]
--Zipped [Do Not Edit]
---My Custom Zipped Style
----Zipped Dark [Do Not Edit]
-----My Custom Zipped Dark Style