Custom Colour Themes

Details
Category: Guides
  • Applicable Software: Mokonyx
  • Min Version Number: Development
  • Max Version Number: Not Applicable

Creating a Custom Light Theme

  1. Copy templates/mokonyx/templates/light.custom.css to:
    media/templates/site/mokonyx/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 → Mokonyx.
  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

Mokonyx 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
Hits: 127