[LAYOUTS] Color Management: Modes & Schemes

[Admin]

Seamlessly Match Your Website’s Design

RAXO modules are designed to be versatile and fit perfectly into any website, regardless of its color palette or visual style. To help you achieve a native look without touching a single line of CSS, we have introduced a powerful Color Management system. These built-in color presets allow you to instantly adapt our layouts to match your brand identity and site design.


How to Apply
To give you maximum control, we have divided the styling into two main components: Color Mode and Color Scheme. To change the appearance of a module, you don't need to write code. Simply enter the appropriate CSS class in your Joomla module settings:

RAXO Module Admin Panel > Display Options > Module Class

Seamless Layout Switching: Because these classes are unified, your color settings remain active even if you switch between different supported RAXO layouts. You can experiment with different looks (e.g., moving from Bricks to Grid) without having to re-configure the colors.


1. Color Modes (Contrast)
Color modes define the overall background, text contrast and color saturation of the layout.
Light Mode - classic look for light backgrounds. Dark Mode - optimized for dark-themed websites.


Light Mode: Default (leave the "Module Class" field blank).

Dark Mode: Add dark-mode (or mode-dark) to the Module Class.



2. Color Schemes (Accent Colors)
We have prepared 12 professionally selected color presets plus a default version. To use them, add the corresponding class to the Module Class field:


Default Color Scheme: (leave blank)

Red Color Scheme: color-red

Pink Color Scheme: color-pink

Orange Color Scheme: color-orange

Yellow Color Scheme: color-yellow

Brown Color Scheme: color-brown

Green Color Scheme: color-green

Teal Color Scheme: color-teal

Blue Color Scheme: color-blue

Purple Color Scheme: color-purple

Sky Color Scheme: color-sky

Violet Color Scheme: color-violet

Gray Color Scheme: color-gray



Examples & Combinations
You can combine a Mode and a Scheme together by separating them with a space.
This gives you 26 different visual variations.

Dark background with Orange accents: dark-mode color-orange

Light background (default) with Blue accents: color-blue

Standard look: (leave blank)



Supported Layouts

This Color Management system is currently available for the following layouts:

All Built-in Layouts (Bricks, Columns, Default, List)

Grid

Pagination

Note: We are actively updating our other layouts. They will receive these color management features in upcoming releases.