Light & Dark Mode Support

Herozi supports both Light and Dark Modes, allowing users to choose a theme based on their environment or preferences. Light Mode is ideal for bright settings, while Dark Mode is perfect for low-light conditions.

To enable Dark Mode, adjust the theme mode attribute in the root HTML tag and configure the layout-default.js file.

Light Mode and Dark Mode are attributes that define the theme of your webpage. Switching between them ensures that the page layout is optimized for different lighting conditions.

const DEFAULT_VALUES = {
    [ATTRIBUTES.THEME]: 'light'  // Change 'light', 'dark' or 'auto'
};

The theme mode can be set individually for particular page blocks despite having a different mode for the page:

When you switch to Dark Mode, Herozi will automatically load the Dark Mode-specific CSS files to adjust the layout:

Light Mode Layout:

In Light Mode, the background is light, and the text is dark, providing high contrast for easy reading in bright environments. To enable this, set the theme mode to light in the HTML tag:

Dark Mode Layout:

In Dark Mode, the background is dark, and the text is light, making it ideal for reading in low-light environments. To enable Dark Mode, set the theme mode to dark in the HTML tag: