Setting up an umbraco site theme picker including a context aware approved color picker (for multisite environments)

Here is the usecase: say you have an umbraco instance that will contain several sites (all using the same doctypes/views/js/css/models/code...) but you also want these site to be able to use a unique color theme.. (corresponding with the brand of the specific branch site of a bigger entity).

Disclaimer: example is for v7 but same concept can be used for v8

First step we'll need to add a scheme/theme picker
Something like Color Pallettes

Now we can define the themes a content editor can pick from in the backend (adding a new datatype, setting up the different themes, adding that to our website doctype)

So you end up with something similar to:

So editor can just pick the overal color scheme for the site (from a predefined list, we don't want them to go loco)

In addition to defining the theme in the backend you'll also have a stylesheet that sets some things things depending on the selected one... so lets say you then have

/css/mainshared.css
/css/first.css
/css/second.css

Depending on the alias of the picker theme you can then load the additional stylesheet in your layout...

Similar to something like
... "/css/." + Model.Theme.Alias + ".css" ... (where theme is the alias of the property , alias being the property on the model where the value is stored we need

that value will change whenever the theme is updated on the website node ... loading the corresponding css

So pretty basic stuff atm... but what if you now want to use a color picker (that consist of the available colors in the chosen theme)... so the backoffice UI also needs to change depending on the theme chosen on the website node.

You can't use the approved color, since that is a fixed set of colors that doesn't take the theme into account...

Hello custom prop editor, we need to extend the backoffice with a custom component...

Luckily umbraco makes that pretty easy, here are the official docs.

So for this one I'll need to fetch the possible colors from the theme (using an api controller) This api controller will output the different colors available on the theme (name and hex code)

An AngularJS controller/view can output these (passing in the id of the current page being edited in the backoffice)

This of course all uses the api/models provided by the color pallettes package (so if you use a different package for the theme picker that needs to change

To wire this all up we still need a package manifest..

After that is all in place I can now add a context aware color picker to my sub page doc types

Changing the theme on the main website node, will show a different (correct color picker) on the sub pages...

Of course you don't want to save, output the hex color codes on the frontend but the alias of the color instead...

You'll probably add a class in your views like class="@Model.ThemeColor" that then outputes class="color_ secondary" (and in the theme specific css that is defined correctly with the hex color code)

So now when the content editor choses a different theme, depending on the theme the color picker in the CMS will also show the correct ones!

Hope this is usefull!