Day / Night mode for webhelp stylesheets

[shudson310]

The stylesheets could incorporate code to automatically switch between day/night mode based on the local browser time:

Code: Select all

<script>

<!--

function getStylesheet() {

      var currentTime = new Date().getHours();

      if (0 <= currentTime&&currentTime < 5) {

       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");

      }

      if (5 <= currentTime&&currentTime < 11) {

       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");

      }

      if (11 <= currentTime&&currentTime < 16) {

       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");

      }

      if (16 <= currentTime&&currentTime < 22) {

       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");

      }

      if (22 <= currentTime&&currentTime <= 24) {

       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");

      }

}



getStylesheet();

-->

</script>

        

        <noscript><link href="main.css" rel="stylesheet" /></noscript>

and stylesheets for day vs night mode incorporated into the theme builder. This would be extremely helpful for webhelp and mobile help that is delivered to devices or settings that are light-sensitive, such as driving/flying/boating/security.

[alin]

Hello,

Thank you for your feedback.

In order to refer a custom JavaScript file in the WebHelp Responsive output HTML files please follow these steps:

1. Include the script declaration into an well-formed XML file. For example the content of the XML file should look like:

   Code: Select all

   <script type="text/javascript" src="${oxygen-webhelp-output-dir}/my-script.js"/>

   Note: Note that the example above uses the ${oxygen-webhelp-output-dir} macro in order specify the path of the referenced JavaScript file relative to the output directory.
   Note: If you want to reference multiple JavaScript files, place the <script> elements within a <div> element. For example:

   Code: Select all

   <div>
   
     <script type="text/javascript" src="http://www.example.com/my-script1.js"/>
   
     <script type="text/javascript" src="${oxygen-webhelp-output-dir}/my-script2.js"/>
   
   </div>

2. Edit the WebHelp Responsive transformation scenario and set the value for the webhelp.fragment.head parameter to the absolute path of the XML file at step 1.
   Note: If you want to insert the JavaScript reference in another location within the HTML page you can find the complete list of available parameters here: https://www.oxygenxml.com/doc/versions/ ... ders_usage

In order to copy JavaScript resources to the output directory follow these steps:

1. Place all your JavaScript resources in the same directory.
2. Edit the WebHelp Responsive transformation scenario and set the value for the webhelp.custom.resources parameter to the absolute path of the directory at step 1.
   Note: All files from this directory will be copied to the root of the WebHelp output.

The procedure of including custom CSS files in the output is similar with the one above.

[qualler]

Is there a plan to have a "dark mode" included by default in the webhelp responsive product? Or is it something that the user still has to customize?

Justin

[ionela]

Hi,

Currently, there isn't a default dark mode theme that can be applied to the WebHelp Responsive output, but we do have various publishing templates which you can use: Publishing Templates
You might choose for example, Hightech or Mechano template and further customize it if needed.
You can choose a template by editing the DITA Map WebHelp Responsive transformation (you need to duplicate the scenario and edit a copy) and then select Templates tab.

I hope this helps.

Regards,
Ionela

[qualler]

Hi lonela,

Thanks for the reply. The request we've gotten from the user teams is something to toggle. Although a template might be helpful. Right now, we've customized our plug-in and I'd need to talk to our developer to see how changing templates would behave with our customizations.

Justin

[ionela]

Hi Justin,

Thank you for these details.
I have added all your feedback to our issue tracking tool as an improvement request regarding a dark mode for the WebHelp Responsive output.
This will be analyzed by our development team.

Regards,
Ionela