Skip to main content
Mark_Noc
Mark_Noc
Inspiring
February 27, 2023
Question

Any Simple Way To Add A Skin Changer?

  • February 27, 2023
  • 5 replies
  • 400 views

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!

    This topic has been closed for replies.

    5 replies

    Mark_Noc
    Mark_NocAuthor
    Inspiring
    February 28, 2023

    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!

    S
    Community Manager
    Stefan GentzCommunity Manager
    Community Manager
    February 28, 2023

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

     

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

     

    Mark_Noc
    Mark_NocAuthor
    Inspiring
    February 28, 2023

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

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

    Mark_Noc
    Mark_NocAuthor
    Inspiring
    February 28, 2023

    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!

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    February 27, 2023

    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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices