Page 1 of 1

Color switch for WebHelp publishing template?

Posted: Mon Feb 09, 2026 1:40 pm
by Frank Ralf
Hi,

I am creating a WebHelp publishing template that should be used for two product lines. Each product line is distinguished by a certain color. I would like to use only one publishing template for both product lines and am looking for the best way to switch colors, similar to the dark mode switch.

My first attempt was to use the @product profiling attribute and pass its value to the output. However, even when I set the attribute on the top map, the attribute is not passed to a top HTML element like <html> or <body> which makes it hard to use it as a CSS switch.

Is there any other way to accomplish this? Possibly by passing a transformation parameter to the HTML output or using a macro?

Any pointers welcome.

Best regards,
Frank

Re: Color switch for WebHelp publishing template?

Posted: Thu Feb 12, 2026 9:52 am
by julien_lacour
Hi Frank,

A solution could be to insert an HTML fragment as webhelp.fragment.before.body (see here for more information), this fragment will insert a node containing the product attribute:

Code: Select all

<span data-product="${map-xpath(/map/@product)}"/>
Then based on the attribute value, you can set CSS variables for all your colors and use them:

Code: Select all

:root:has(*[data-product = "product1"]) {
  --custom-primary-bg: lightblue;
}
:root:has(*[data-product = "product2"]) {
  --custom-primary-bg: lightgreen;
}

body {
  background-color: var(--custom-primary-bg, #fff);
}
Regards,
Julien

Re: Color switch for WebHelp publishing template?

Posted: Thu Feb 12, 2026 2:05 pm
by Frank Ralf
Hi Julien,

Many thanks for the pointer! That should do the trick and seems for me to be the most elegant solution, because for the passing through of profiling attributes you must use a DITAVAL file for every transformation which is overhead.

Kind regards,
Frank