How to Enable Dark Mode in the Output

The WebHelp Responsive output supports dark mode, allowing users to switch between light and dark themes based on their preference or their browser's settings. The dark mode feature enhances readability and reduces eye strain in low-light environments.

After enabling dark mode, the output will use the theme selected in the browser's settings and a "Switch theme" button will be displayed in the header.

By default, the plugin only provides color variables for the light theme, as follows:

:root {
  --wh-body-bg: #fff;
  --wh-body-color: #000;
  --wh-border-color: #000;
  --wh-link-color: #0d6efd;
  --wh-search-bg: #ddd;
  --wh-letters-bg: #f2f2f2;
  --wh-main-page-toc-bg: #eeeeee;
  --wh-toc-shortdesc-color: #808080;
  --wh-top-menu-bg: #e6e6e6;
  --wh-oxy-change-bg: #ffff00;
}

How to Add Dark Mode in a New Publishing Template

Create a Publishing Template, see Creating a Publishing Template Starting from Scratch.
Create a custom CSS stylesheet (custom-color.css for example) and copy the default variables you want to override, for example:
```
:root {
  --wh-search-bg: #ECF2F9;
  --wh-main-page-toc-bg: #F2F8FF;
  --wh-toc-shortdesc-color: #0D1A2B;
}
```

Duplicate the default variables for the dark color scheme (identified with @data-wh-theme="dark"), for example:

:root[data-wh-theme="dark"] {
  color-scheme: dark;
  --wh-body-bg: #212529;
  --wh-body-color: #e3e3e3;
  --wh-border-color: #e3e3e3;
  --wh-link-color: #5185cb;
  --wh-search-bg: #2b3035;
  --wh-letters-bg: #2a2a2a;
  --wh-main-page-toc-bg: #22303c;
  --wh-toc-shortdesc-color: #d5d5d5;
  --wh-top-menu-bg: var(--wh-search-bg);
  --wh-oxy-change-bg: #b59f00;
}

Add custom additional variables for elements that you need two color or image variants, for example:

:root {
  /* Override default colors */
  --wh-search-bg: #ECF2F9;
  --wh-main-page-toc-bg: #F2F8FF;
  --wh-toc-shortdesc-color: #0D1A2B;

  /* New color variables */
  --wh-tile-bg: #ECF2F9;
  --wh-breadcrumb-bg: #ECF2F9;
  --wh-search-input-bg: #2771bb;

  /* Image variable */
  --wh-search-image-small: url("resources/images/bgr_right_small.png");
}

:root[data-wh-theme="dark"] {
  /* Add default colors */
  color-scheme: dark;
  --wh-body-bg: #212529;
  --wh-body-color: #e3e3e3;
  --wh-border-color: #e3e3e3;
  --wh-link-color: #5185cb;
  --wh-search-bg: #2b3035;
  --wh-letters-bg: #2a2a2a;
  --wh-main-page-toc-bg: #22303c;
  --wh-toc-shortdesc-color: #d5d5d5;
  --wh-top-menu-bg: var(--wh-search-bg);
  --wh-oxy-change-bg: #b59f00;

  /* New color variables */
  --wh-tile-bg: #2B3035;
  --wh-breadcrumb-bg: #2B3035;
  --wh-search-input-bg: #184573;

  /* Image variable */
  --wh-search-image-small: url("resources/images/bgr_right_small_dark.png");
}

Open the template descriptor file associated with your publishing template and add your custom CSS in the resources section:

<publishing-template>
    ...
    <webhelp>
        ...
        <resources>
            <css file="custom-color.css"/>

Create another custom CSS stylesheet (custom.css for example) and add CSS rules using the custom created variables, for example:
```
.wh_tile {
  background-color: var(--wh-tile-bg);
}
.wh_tools{
  background-color: var(--wh-breadcrumb-bg);
}
.wh_search_input{
  background: var(--wh-search-image-small) right no-repeat var(--wh-search-input-bg);
}
```
Note: Default CSS rules with color variables (such as body { background-color: var(--wh-body-bg); } in wh-common.css) will automatically use the new colors.

Add the second stylesheet and the parameter in the template descriptor:

<publishing-template>
    ...
    <webhelp>
        ...
        <resources>
            <css file="custom-color.css"/>
            <css file="custom.css"/>
        </resources>
        ...
        <parameters>
            ...
            <parameter name="webhelp.enable.dark.mode" value="yes"/>
        </parameters>

Duplicate the DITA Map WebHelp Responsive transformation scenario.
Click the Choose Custom Publishing Template link and select your template.
Click OK to save the changes, then run the transformation scenario.

How to Add Dark Mode in a Publishing Template Copied from an Existing Template

Fastpath: Light and Oxygen templates come with both light and dark color schemes.

Copy an existing Publishing Template (see Creating a Publishing Template Starting from an Existing Template).

Add or edit the color.css stylesheet with the colors you want to add/change:

:root {
  --wh-body-bg: #fff;
  --wh-body-color: #000;
  ...
}
:root[data-wh-theme="dark"] {
  color-scheme: dark;
  --wh-body-bg: #293136;
  --wh-body-color: #e3e3e3;
  ...
}

If you create a color.css stylesheet, open the template descriptor file associated with your publishing template and add your custom CSS in the resources section, for example:

<publishing-template>
    ...
    <webhelp>
        <resources>
            <css file="ashes-color.css"/>
            <css file="ashes.css"/>
            ...
        </resources>

Add CSS rules using the custom created variables in the main stylesheet (ashes.css for example):
```
body {
  font-family: "PT Sans", sans-serif;
  background-color: var(--wh-body-bg);
}
```
Duplicate the DITA Map WebHelp Responsive transformation scenario.
Click the Choose Custom Publishing Template link and select your template.
Click OK to save the changes, then run the transformation scenario.

Restriction: If you open the output locally in Firefox, the theme settings may not persist between pages. This happens because Firefox treats each local page as a separate origin, preventing shared storage of theme preferences. If you deploy the output on an HTTP server or use another browser, theme settings will persist.