Changing HTML5 Help Colors According to Theme

[deevee]

Hello,

The software I am working on has around 4 themes. Each theme has its own set of colors. A user can select the theme of their choice. I would like to change the colors of the HTML5 online help (created using Flare r2) according to the theme selected. Is there an easy way to go about this? Right now, I am thinking of manually creating separate outputs for each theme.

Thanks,
Dee

[ChoccieMuffin]

Hello,

The software I am working on has around 4 themes. Each theme has its own set of colors. A user can select the theme of their choice. I would like to change the colors of the HTML5 online help (created using Flare r2) according to the theme selected. Is there an easy way to go about this? Right now, I am thinking of manually creating separate outputs for each theme.

Thanks,
Dee

I don't know if you've looked at CSS variables? Here's one of the many help topics in the 2019r2 help file that you might find useful.

https://help.madcapsoftware.com/flare20 ... hlight=CSS Variables

This would make is easier to define your different colour sets, and if you put the :root bit in different mediums you should find it easy to generate 4 different outputs, but someone cleverer than me will need to suggest how your user can change the colours of their help on the fly.

[NorthEast]

Assuming that the theme is chosen in the application (not the help), you could do this by specifying a skin for each different theme when you use CSH calls in the app.

* Set up 4 skins in your project; e.g. Theme1, Theme2, etc.

* Make sure all skins are built by your target - Advanced > Generate all skins.

* Add some code your application so that it appends the skin name to the URL for all CSH links. For example:
Help.htm#cshid=identifier&skinName=Theme1
Help.htm#cshid=identifier&skinName=Theme2

* If you want to change other styles (not in the skin), you can specify them in by using the html class name that's used for that skin. When you make the CSH call, it dynamically changes the class name on the html tag, according to the skin being used - in the format html._Skins_SkinName
For example, to set a different h1 colour for each skin:

html._Skins_Theme1 h1
{
color: red;
}

html._Skins_Theme2 h1
{
color: blue;
}

Also discussed here: viewtopic.php?f=9&t=31713