Day / Night mode for webhelp stylesheets

Are you missing a feature? Request it's implementation here.
shudson310
Posts: 142
Joined: Sat Feb 26, 2005 12:09 am
Location: USA
Contact:

Day / Night mode for webhelp stylesheets

Post by shudson310 » Mon Sep 19, 2016 7:27 pm

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.
Scott Hudson
Staff Content Engineer
Site: servicenow.com

alin
Site Admin
Posts: 161
Joined: Thu Dec 24, 2009 11:21 am

Re: Day / Night mode for webhelp stylesheets

Post by alin » Thu Sep 22, 2016 6:08 pm

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.
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

qualler
Posts: 8
Joined: Fri Jan 26, 2018 8:05 pm

Re: Day / Night mode for webhelp stylesheets

Post by qualler » Tue Apr 07, 2020 9:27 pm

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
Posts: 334
Joined: Mon Dec 05, 2011 6:08 pm

Re: Day / Night mode for webhelp stylesheets

Post by ionela » Wed Apr 08, 2020 12:46 pm

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
Ionela Istodor
oXygen XML Editor and Author Support

qualler
Posts: 8
Joined: Fri Jan 26, 2018 8:05 pm

Re: Day / Night mode for webhelp stylesheets

Post by qualler » Wed Apr 29, 2020 12:31 am

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
Posts: 334
Joined: Mon Dec 05, 2011 6:08 pm

Re: Day / Night mode for webhelp stylesheets

Post by ionela » Thu Apr 30, 2020 10:41 am

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
Ionela Istodor
oXygen XML Editor and Author Support

Post Reply