Color switch for WebHelp publishing template?

Post by **Frank Ralf** » Mon Feb 09, 2026 1:40 pm

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

Post by **julien_lacour** » Thu Feb 12, 2026 9:52 am

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

Post by **Frank Ralf** » Thu Feb 12, 2026 2:05 pm

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

Color switch for WebHelp publishing template?

Color switch for WebHelp publishing template?

Re: Color switch for WebHelp publishing template?

Re: Color switch for WebHelp publishing template?