Same theme but different colors to choose from - qooxdoo

Question

Finally my app is almost done, and instead switching to others themes I would like to stick to Modern and change only combinations of colors.
My possible option are:
a) Make a copy of Theme to ModernA, ModernB, etc and change Color.js
b) Apply States to colors to select them according to some condition
c) Change them at runtime (if possible)
Which could be my easy and best approach to do it? and a snippet would be really appreciate.

Answer 1

The best way to do this is to create a new theme and reuse the modern theme; for example:
source/class/myapp/MyModern.js:
qx.Theme.define("myapp.MyModern", {
title : "My Modern",
meta : {
color : myapp.MyColor,
decoration : qx.theme.modern.Decoration,
font : qx.theme.modern.Font,
appearance : qx.theme.modern.Appearance,
icon : qx.theme.icon.Tango
}
});
and source/class/myapp/MyColor.js:
qx.Theme.define("myapp.MyColor", {
extend : qx.theme.modern.Color,
colors : {
// Add your custom colour overrides here
}
});
By using the extend keyword in the MyColor class, you will start with the normal Modern colours and can then choose to override colours as you need

Answer 2

Option C is possible by creating an edited Color theme at runtime:
// First, get the current Color theme
var currentcolor = qx.theme.manager.Color.getInstance().getTheme();
// Change any or all color entries. This can be as dynamic as you want. Get a user defined color from a color picker control. Create Shades based off of a primary color, etc.
currentcolor.colors.themePrimary = "#00ffd4"; // Or a value from the ColorPicker widget
// Now define a new Color theme with the updated colors
qx.Theme.define("NewColor",
{
colors : currentcolor.colors
});
// Set the new Color theme (button used below as an example)
button.addListener("execute", function(e) {
qx.theme.manager.Color.getInstance().setTheme(qx.Theme.getByName("NewColor"));
});