ModulesGarden Documentation
Back Home Home

Theme Management Tool

# Theme Management Tool

# About Theme Managemnt Tool

The Theme management tool allows you to customize the appearance of the module interface using configurable templates.
A theme template defines colors used across the UI, including backgrounds, text, buttons, inputs, and system messages, and can be assigned independently to the Admin Area, Client Area, or both.

Create your own themes or use the built-in and officially supported Default and Dark themes to maintain a consistent appearance 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.

# Themes

To access the theme management section, navigate to your addon module menu: Navigation → Tools/Others → Themes or find it directly in the main menu, depending on the module.
The main view displays all available themes along with their status and assigned areas.
The standard package includes the following built-in themes:

  • Default – used across all ModulesGarden modules; this theme is protected and cannot be modified or deleted. To make changes, create a new preset based on it.
  • Dark – pre-configured, officially supported dark theme intended for use as is or for further customization.
  • Ocean Mint – sample custom preset available for modification.
    Important: The "Default" and "Dark" themes are the only officially supported themes. The remaining ones are provided as examples and may require adjustments before use.
Theme Management Tool: Tools Themes list in cPanel Extended with Dark, Default, Multicolor and Ocean Mint themes

To create a new theme:

  • Click Create Theme
  • Enter a Name
  • Select a theme to copy settings from
  • Confirm creation
    The newly created theme will appear on the list. You can then edit its settings to match your needs.
Theme Management Tool: Create Theme dialog with the name Deep Ocean and Copy From Theme set to Default

To activate a selected theme:

  • Click Activate
  • Choose the destination:
    • Admin Area
    • Client Area
    • Both
  • Confirm changes
    You can assign different themes to the admin and client areas to better match your preferred appearance.
Theme Management Tool: Activate Theme dialog with the Apply To list set to Admin & Client Areas

Themes can be saved as files and reused across environments.

  • Export - download a theme as a JSON file for reuse in another module
Theme Management Tool: Import Theme dialog with a custom name and a JSON theme file, opened from Additional Actions
  • Import - upload an existing theme file and optionally rename it for the current module
Theme Management Tool: Import Preset dialog in the Proxmox VE VPS & Cloud module with a preset file selected

  1. Edit theme to adjust the module's appearance.

  2. Remove any unused themes. Note that the "Default" theme and any theme currently assigned to an area cannot be deleted.

Theme Management Tool: themes list with the edit and delete icons marked, Default theme delete icon disabled

# Editing in Basic Mode

When editing a theme, you can switch between two modes depending on the level of control required:

  • Mode

    • Expert Mode - detailed customization; explained in the next section
    • Basic Mode - simplified configuration
      Allows you to quickly define a consistent appearance using global color groups.

  • Theme Base

    • Default – the theme is based on the default style. The original ModulesGarden logo will be used.
    • Dark – the theme is based on the dark style. A dedicated ModulesGarden logo optimized for dark backgrounds will be used.

Preview

  • On the left side, you will find specific areas with default colors configured and open for customisation.
  • 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 theme 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.

Theme Management Tool: Shadow Grey theme editor in Basic mode with the General section and live preview

# 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.
  • Module name - Color of the module name next to the logo (logo colors do not apply to changes).
  • Module version - text with the used version number located at the very bottom of each module page.
  • Headers - Color of header texts.
  • Icons - Color of icons used in navigation and UI elements.
Theme Management Tool: General section in Basic mode with default text, page background and icon color fields
Theme Management Tool: preview of the module dashboard form with switcher, text, text area and password fields

# Inputs

Input element settings:

  • Knob
  • Background (Inactive)
  • Background (Active)
Theme Management Tool: Inputs section in Basic mode with Knob and switcher background color fields
Theme Management Tool: preview data table with the Logging column switchers highlighted in a red frame

# 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
  • Critical
    Each type includes the following states:
  • Base
  • Hover
  • Active
  • Faded
Theme Management Tool: Default, Primary and Secondary Type sections with Base, Hover, Active and Faded colors
Theme Management Tool: preview of texts, buttons, tile buttons, icons, labels, badges and alerts in theme colors

# Others

Others with tooltip appearance settings:

  • Icon - Color of the tooltip icon.
  • Text - Text color inside tooltips.
  • Background - Background color of tooltips.
Theme Management Tool: Others section with tooltip, preloader and scrollbar color fields
Theme Management Tool: preview with an arrow to the Switcher Description tooltip and the text area scrollbar

# Editing in Expert Mode

Expert Mode provides full control over every interface element, allowing you to customize the module's appearance in detail.

  • Tooltip - 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.
  • Target - Use the target icon to locate the currently customized item with its live preview on the right side.
  • Reset - 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 text style
    • Headers – header text style

  • Containers – text, background, and borders

  • Tables

    • Dividers – lines separating table sections
    • Mass Action Bar Background – background of the mass action bar
    • Pagination Text – pagination text color
    • Pagination Text (Active) – active pagination text color
    • Pagination Icons – pagination icon color

  • Modals – text, background, and borders

  • Dropdowns

    • Selected Text – text of the currently selected value
    • Background and Borders – dropdown background and border styling
Theme Management Tool: General section in Expert mode with base styles, containers, tables, modals and dropdowns
Theme Management Tool: dark theme preview of the module dashboard form with dropdown, tagger, date and color pickers

Navigation – controls the appearance of the menu and its elements:

  • Text – main navigation text color
  • Icons – navigation icon color
  • Background – background of the navigation bar
  • Text (Active) – text color of the currently selected menu item
  • Submenu Text – default submenu item text color
  • Submenu Text (Hover) – submenu text color on hover
  • Submenu Text (Active) – active submenu item text color
  • Submenu Background – background of the submenu area
Theme Management Tool: Navigation section in Expert mode with menu, submenu text and background color fields
Theme Management Tool: dark theme preview of the top menu with the Settings submenu open

# Inputs

  • General Fields – text, background, and border
  • Labels - text & background
  • Switchers – knob, background (inactive), and background (active)
  • Checkboxes – background (active), border (active), and checkmark color (color of the checkmark inside the checkbox)
  • Select – dropdown text, active text, and 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
Theme Management Tool: Inputs section in Expert mode with switchers, checkboxes, select and markdown editor colors
Theme Management Tool: dark theme preview of the form, markdown editor and data table with status labels

# Text

Text color variants used across the interface:

  • Primary – used for general texts
  • Secondary – supporting or less prominent text
  • Info – informational messages and highlights
  • Success – success states and confirmations
  • Warning – warnings and important notices
  • Danger – errors and critical messages
Theme Management Tool: Text section in Expert mode with Primary, Success, Info, Warning, Danger and Critical colors
Theme Management Tool: dark theme preview of the Texts panel with the text color variants

# Buttons

Buttons - plain, outline, link, and icon styles.
Each style includes the following 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 on hover.
  • Background (Active) - Background color when the button is clicked.
Theme Management Tool: Plain Buttons section in Expert mode with text and background colors for each button type
Theme Management Tool: dark theme preview of plain buttons and icon buttons

# Tile Buttons

Icon color variants for standard and on hover views:

  • Text
  • Background
  • Border
Theme Management Tool: Tile Buttons section in Expert mode with text, background and border colors, normal and hover
Theme Management Tool: dark theme preview of the Tile Buttons panel with Start, Stop, Create Backup and Reinstall tiles

# Icons

Icon color variants:

  • Default
  • Primary
  • Secondary
  • Info
  • Success
  • Warning
  • Danger
  • Critical
Theme Management Tool: Icons color settings in expert mode with hex values for Default to Critical
Theme Management Tool: Icons preview in the dark theme: 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
  • Critical
Theme Management Tool: Labels color settings in expert mode with text and background hex values for each label type
Theme Management Tool: Plain labels preview in the dark theme from Default to Critical, with Plains, Outlines and

# Badges

Text, background, and border for standard badges and outline badges:

  • Default
  • Primary
  • Secondary
  • Info
  • Success
  • Warning
  • Danger
Theme Management Tool: Badges color settings with text, background and border hex values for each badge type
Theme Management Tool: Badges preview in the dark theme showing filled and outlined round badges in all colors

# Alerts

Text and background for alerts and outline alerts of following types:

  • Default
  • Info
  • Success
  • Warning
  • Danger
Theme Management Tool: Alerts color settings with text and background hex values for each alert type
Theme Management Tool: Alerts preview in the dark theme with filled and outline variants for each alert type

# Hints

Define color pattern for hints:

  • Default
  • Info
  • Success
  • Warning
  • Danger
Theme Management Tool: Hints color settings with title, description and underline hex values for each hint type
Theme Management Tool: Hints preview in the dark theme with icons, colored titles, underlines and sample descriptions

# 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
Theme Management Tool: Progress Bars color settings with fill and track hex values for Default to Danger
Theme Management Tool: Progress Bars preview in the dark theme with Default, Primary, Info, Success, Warning and 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
Theme Management Tool: Sliders color settings for Slider Primary and Slider Danger with fill, track, thumb and marks
Theme Management Tool: Sliders preview in the dark theme with Primary slider at 50 and Danger slider at 70

# Graphs

Configure graph general colors and tooltip details display.

Theme Management Tool: Graphs color settings with general colors and tooltip text, background and border hex values
Theme Management Tool: Graph preview in the dark theme with three data sets and an open tooltip for Day 3

# Code Box

Code text box display styling options.

Theme Management Tool: Code Box color settings with text and background hex values
Theme Management Tool: Code Box preview in the dark theme showing a PHP Hello World snippet

# URLs

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

Theme Management Tool: URLs color settings with text, hover and active hex values for links
Theme Management Tool: Data Table preview in the dark theme with arrows pointing at link-styled client names

# Others

Tooltip elements:

  • Icon - color of the tooltip icon
  • Text - text color inside tooltips
  • Background - background color of tooltips
Theme Management Tool: Others color settings for tooltip, preloader and scrollbar track and thumb hex values
Theme Management Tool: Form preview in the dark theme with a switcher tooltip, text field and text area with scrollbar

# 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:

Theme Management Tool: Proxmox VE VPS & Cloud admin Servers details page with the custom theme on the VMs list
Theme Management Tool: Proxmox VE VPS & Cloud admin Node Details page with summary and graphs in the custom theme

Proxmox VE VPS & Cloud client area product view:

Theme Management Tool: Proxmox VE VPS & Cloud client area product details with service actions in the custom theme
Theme Management Tool: Proxmox VE VPS & Cloud client area Graphs page with CPU, Memory, Network Traffic and Disk I/O

# 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.