Light and Dark Theme Support for Feedback Components

The embedded Oxygen Feedback components that are integrated into your website support both Light and Dark themes, allowing them to adapt to the visual style of your website. When you switch between Light and Dark mode using the theme switcher in the WebHelp Responsive host page, all embedded Feedback components automatically match the selected theme. No additional configuration is needed.

Important:

The Light and Dark theme support applies only to the Oxygen Feedback components that are embedded in the host page (third-party website).

Components Affected by Theme Change

The theme switcher in the WebHelp Responsive host page determines whether the embedded Oxygen Feedback components render in Light or Dark mode. All of the following embedded Feedback components automatically match the selected theme:

Comments
Page Rating
Block-Level Comments
AI Assistant
AI-Enhanced Search Summary

Theme Switcher Integration

The theme change support is designed to work out of the box with the theme switcher of the WebHelp Responsive host website. The theme switcher must be explicitly activated by generating the WebHelp Responsive output using the webhelp.enable.dark.mode transformation parameter set to true. For more details on how to enable the Dark Theme support in your WebHelp Responsive output, see the following topic in the Oxygen WebHelp User Guide about How to Create a Dark Mode-Ready Publishing Template.

Note:

The theme switcher support was added starting with version 28 of the Oxygen Publishing Engine.

Although Oxygen Feedback is designed to automatically adapt its theme to the user's choice in the WebHelp Responsive host website, if integrated in a non-WebHelp site, it can be configured to change its appearance by adding the data-wh-theme attribute on the <html> root element of the current host page with one of the light or dark values, depending on the current desired theme.

If the data-wh-theme attribute is missing, then the light theme is used by default.

Theme Customization and Style Independence

It is important to understand that the styles and colors of the embedded Oxygen Feedback components are not customizable and are not inherited or influenced by the current styles in Oxygen WebHelp Responsive output or any other hosting website. The embedded Feedback components maintain their own independent styling system.

The styles from the Light theme of the embedded Oxygen Feedback components are designed to fit with the styles of the majority of websites rendered in a light theme, providing visual harmony while maintaining their distinct appearance. Similarly, the styles of the Dark theme of the embedded Oxygen Feedback components are designed to fit within the majority of dark styled websites, ensuring a cohesive look and feel across different website designs.

Both the Light and Dark themes include optimized contrast ratios for text, icons, and visual elements to ensure readability and legibility in their respective modes. The themes are designed to align with accessibility best practices for contrast and readability, with visual elements such as selection outlines, markers, status badges, and control buttons calibrated for appropriate visibility in each mode.