Custom Colour Themes

  • Applicable Software: MokoOnyx (Template)
  • Applicable Version: Development

How Theming Works

MokoOnyx uses CSS custom properties (variables) for all colours. Two built-in palettes are provided: Light Standard and Dark Standard. You can create fully custom palettes by overriding these variables.

Creating a Custom Light Theme

  1. Copy templates/mokoonyx/templates/light.custom.css to:
    media/templates/site/mokoonyx/css/theme/light.custom.css
  2. Edit the CSS variables in the file to match your brand colours.
  3. In the Joomla admin, go to System → Site Templates → MokoOnyx.
  4. Under the Theme tab, select Custom for the Light palette.

Creating a Custom Dark Theme

Follow the same steps using dark.custom.css instead. Both custom files contain all variables from their standard counterparts.

Theme Switcher

MokoOnyx includes a floating theme switcher button (FAB) that lets visitors toggle between light and dark mode. Configure it under the Theme tab in template settings.

Variables Reference

The template uses over 1300 CSS variables. Key ones include:

  • --body-bg / --body-color — Page background and text colour
  • --color-primary — Primary brand colour
  • --color-link / --color-hover — Link colours
  • --card-bg / --card-color — Card component colours
  • --nav-bg-color / --nav-item-color — Navigation colours