Theme Management Tool

About Theme Managemnt Tool

The Theme management tool allows you to customize the appearance of the module interface using configurable Theme Presets. A preset defines colors used across the UI, including backgrounds, text, buttons, inputs, and system messages. Each preset can be applied separately to the admin area, client area, or both. Compose your own presets, or use the built-in examples to maintain visual consistency across all ModulesGarden modules.

Management

The Theme section in your addon allows you to create, manage, and apply visual configurations for ModulesGarden modules wherever they are accessible.

Theme Presets

To access the Theme management section, navigate to your addon module menu: Navigation → Tools → Theme. The main view displays all available presets along with their status and assigned areas. The standard theme management includes the following built-in presets: Default preset - used across all ModulesGarden modules Dark preset - custom classic dark mode HaX0r - custom built-in preset Important: The "Default" preset is the only official and supported theme; the remaining ones are examples for you to use as is or modify freely.

To create a new preset: Click Create Preset Enter a Name Select a preset to copy settings from Confirm creation The newly created preset will appear on the list. You can edit its settings immediately or use it as is.

To activate a selected preset: Click Activate Choose the destination: Admin Area Client Area Both Confirm changes You can assign different presets to the admin and client areas to better match your preferred appearance.

Presets can be saved as files and reused across environments. Export - download a preset as a JSON file for reuse in another module

Import - upload an existing preset file and optionally rename it for the current module

1. Edit presets to adjust the module display. 2. Remove any unused presets. Note that a preset currently assigned to an area cannot be deleted.

Editing in Basic Mode

When editing a preset, you can switch between two modes depending on the level of control required: Basic Mode - simplified configuration Expert Mode - detailed customization Basic Mode allows you to quickly define a consistent appearance using global color groups. On the left side, you will find specific areas with default colors configured. On the right side, you will find a live preview of the display modification. Whenever you change a color on the left, its live preview will display the change. To revert to default colours, just press the 'Reset to default' icon next to each setting. Remember to save the changes when your custom preset is ready. For your convenience, each option includes a tooltip with the corresponding CSS variable name. This makes it easy to identify which variable controls a given element and locate it directly in the configuration.

General

General settings include: Default text - Default text color used across the interface. Page background - Background color of the entire page. Component background - Background used for containers like tables and cards. Component border - Border color for containers and separators. Icons - Color of icons used in navigation and UI elements.

Inputs

Input element settings: Knob Background (Inactive) Background (Active)

Color Types

Color Types define the main color variants for texts, buttons, icons, labels, badges, alerts and hints: Default Primary Secondary Info Success Warning Danger Each type includes the following states: Base Hover Active Faded

Other

Other with tooltip appearance settings: Icon - Color of the tooltip icon. Text - Text color inside tooltips. Background - Background color of tooltips.

Editing in Expert Mode

Expert Mode provides full control over every interface element, allowing you to customize the module's appearance in detail. Each option includes a tooltip with the assigned CSS variable name, allowing you to clearly identify which variable controls a specific element and reference it in the configuration. Use the target icon to locate the currently customized item with its live preview on the right side. To revert to default colours, just press the 'Reset to default' icon next to each setting.

General

Base Styles - default text and page background Default Texts - default text color used across the interface. Page Background - background color of the entire page. Module Name - module name text style Module Version - module version style Headers - header texts style Containers Table Dividers - lines separating rows and columns in tables, Text, background, and borders Modals - text, background, and borders Dropdowns Selected Text - text of the currently selected value Background and borders

Navigation

Navigation - text, icons, background, and active text color (text color of the currently selected menu item).

Inputs

General Fields - text, background, and border Switchers - knob, background (inactive), and background (active) Checkboxes - background (active), border (active), and checkmark color (color of the checkmark inside the checkbox). Selects - text, active text, background along with: Option Text - text color of options in the dropdown list. Option Background - background of options in the dropdown list. Remove Button - color of the remove button in multi-select fields.

Text

Text color variants: Primary (link, hover, active) Secondary Info Success Warning Danger

Buttons

Buttons - plain, outline, link, and icon styles Available types: Default Primary Secondary Success Info Warning Danger Critical Each type includes color settings for: Text - Text color displayed inside the button. Background - Default background color of the button. Background (Hover) - Background color when the button is hovered. Background (Active) - Background color when the button is clicked.

Icons

Icon color variants: Default Primary Secondary Info Success Warning Danger

Labels

Set colors for text and background of plain, outline, and status type labels: Default Primary Secondary Info Success Warning Danger

Badges

Text, background, and border for standard badges and outline badges: Default Primary Secondary Info Success Warning Danger

Alerts

Text and background for alerts and outline alerts of following types: Default Info Success Warning Danger

Hints

Define color pattern for hints: Default Info Success Warning Danger

Progress Bars

Configure progress bar colors, including: Fill - the portion representing the current value Track - the background representing the remaining value Available color variants: Default Primary Info Success Warning Danger

Sliders

Configure slider colors (Primary and Danger), including: Fill - color of the filled portion of the slider track Background - background of the slider track Thumb - color of the draggable slider handle Thumb Border - border color of the slider handle Thumb (Hover) - color of the slider handle when hovered Thumb Border (Hover) - border color of the slider handle when hovered Marks Text - color of the labels displayed below the slider Marks Ticks - color of the tick marks on the slider scale Value Text - color of the currently selected value displayed above the slider

Code Box

Code text display styling options.

URLs

Styling options for links, links on hover and active (pressed) ones.

Others

Tooltip elements: Icon - color of the tooltip icon Text - text color inside tooltips Background - background color of tooltips

Examples

Here we are illustrating how a module display may change when a fully customized theme is used across the admin and client areas. Proxmox VE VPS & Cloud For WHMCS module addon view:

Proxmox VE VPS & Cloud client area product view:

Tips

1. Export presets to keep backup copies of your configurations and reuse them across other ModuelsGarden modules.

2. Test changes in both admin and client areas, using separate presets is often more effective due to different user needs.

3. Built-in presets are provided as examples and can be freely modified. They are not officially supported or guaranteed to be fully compatible with all ModulesGarden modules. If you encounter any issues, adjust the styles as needed.