Trying to make clever UI Themes mechanism for my app

Unity Engine
1

Greetings people,

I have a Unity application that is almost 99% UI. I want to make it possible to apply themes (mostly colors and maybe some images) with a click of a button. I build my app for different clients and each has it’s own branding and logo so I need it to look differently for every build. I thought of making a theme script and hook up all the used colors of my app that instead of choosing a UI color it will use a predefined color from that script.

So to sum it up I want this things to happen “magically”

  1. User sends me their desired color scheme.
  2. I make my own in-app readable theme script of it.
  3. for each specific client I load the applicable theme and then build the app with their desired colors.

What’s the simple most clever way of doing so ?
And if I would to start from zero how would I create the new UI elements ?

Thanks!

2

i dont know how easy it is, but it should be possible in unityUI.

i went the easy route for kissUI and stuck to Style switching. :{
i know… its not the most flexible, but its easy to include it.

ex: press a single button to change all the styles.

And the Style Switching can find the Mirror match in a certain Resources folder:

3

Well that’s sweet but it is not what I’m aiming for currently

4

Does anyone know of another design that I could use to apply themes to my UI elements ?

5

If it’s something as simple as switching colors and such you could keep track of a list of colors and apply it in Awake(). Something like:

class ButtonThemer : MonoBehaviour {
    void Awake(){
        GetComponent<Button>().color = Themer.buttonColor;
        //Or perhaps an all-purpose Themer class with a selection enum for determining the color to use (main1, main2, ...)
    }
}

How you store the colors and/ or images is entirely up to you. You could use a storage format like XML, YAML or even INI, a static class or even a “Theme” ScriptableObject that you plug in somewhere. The advantage of the latter two is that you can easily modify themes and create more from right within the editor, as well as it allowing for direct application of images, fonts, etc.

Just some thoughts.

6

@Senshi , Thanks a lot for you answer and sharing. Actually I implemented something almost identical to your idea already. But I wasn’t sure if it was any good. What I did was using a “Theme” which is ScriptableObject and it has an enum with all the colors for my app. Then I have a "Theme Manager: class that holds the current theme and has methods to change and apply new themes. Lastly for each UI element I tied a script called “ApplyTheme” which does exactly that it lets you chose from the enum the desired color to use with that specific element (on a specific component color field). My ApplyTheme uses reflection so that I just convert the enum to string and get the desired field with Type.GetField(string Name) method. I’m not sure if my solution is ideal but that’s a walk in the good direction. I’d be appreciate If anyone can add to thoughts to this matter :slight_smile: