Any Simple Way To Add A Skin Changer?

[Mark_Noc]

Robohelp 2022.0.346

So, I'm using the frameless HTML skin, and I want to add a skin changer to let people use a light/dark skin, as an accessibility function (tbh, I'm suprised this isn't already a feature of the skin...). However, it seems impossible? It should simply be a case of setting some CSS variables then switching them using some basic JavaScript, however with RoboHelp it seems nothing is ever "simple".

So far I've tried switching the default CSS file and dynamically adding/removing CSS elements, but neither work. The second method I've ALMOST got working, but because RoboHelp generates the LayoutDiff and userstyles CSS files dynamically - and the process is pretty much a black box - I can only ever get it to work on the main topic body container, and not the whole style. To elaborate: I have added a :root class to the layouts.css file which defines all the CSS variables, then when someone switches skin, I'm using the following JavaScript to dynamically swap the :root styles:

Like I say, this almost works, but it seems to be getting overriden by userstyles.css and userstyles.css does NOT use the CSS variables I've defined.

Has anyone got something like this to work, and if so, HOW? I've spent a couple of days on this already, when it should be something that requires only a few minutes to set up!

[Amebr]

It's not something I've tried, but what if you generate the dark theme and take a copy of the output skin/template folder, add a post generation script to the light theme preset  to copy the saved dark theme folder into the correct place in the generated output and use the javascript to swap the folder references?  In theory it should work I think.

You can also request features and report issues here: https://tracker.adobe.com/

Post the item number in the discussion so people can easily vote if they want the same functionality.

[Mark_Noc]

Thanks for the suggestion Amebr... that's an interesting approach! I'll give it a try, but I was honestly hoping to avoid having to do anything post-build. However, this seems like only a small amount of work would be needed to get it functioning... I'll give it a try and let you know how I get on!

[Mark_Noc]

I have created a suggestion on the bug tracker to add skin/theme switching to the output:

https://tracker.adobe.com/#/view/RH-11450

[Stefan Gentz]

Here is a simple theme switcher using CSS variables and a little bit of Javascript:

https://codepen.io/stefan-gentz/pen/vYzgyWK

[Mark_Noc]

Thanks Stefan! That is almost exactly what I had to start with, but it won't help with RoboHelp ... It will work for the default.css (or whatever you have added for the main topics) which works on the main body "container", but it can't change the ToC or MiniToc due to them depending on the layoutdiff.css and userstyles.css, and the fact that RoboHelp actually modifies all the CSS on compile. Believe me, I've tried! But I really appreciate the input!