Guides

Details

Category: Guides

• Applicable Software: MokoOnyx
• Min Version Number: Development
• Max Version Number: Not Applicable

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

Last Updated: September 02, 2026

Hits: 78

• MokoOnyx
• Branding

Details

Category: Guides

• Applicable Software: MokoOnyx
• Min Version Number: Development
• Max Version Number: Not Applicable

Overview

MokoOnyx provides two files for site-specific customisations that survive template updates:

• media/templates/site/mokoonyx/css/user.css
• media/templates/site/mokoonyx/js/user.js

How They Load

Both files are loaded last via the Joomla Web Asset Manager, after all theme stylesheets and template scripts. This ensures your overrides take precedence without needing !important.

Auto-Minification

MokoOnyx automatically minifies user.css and user.js on first page load when not in development mode. The minified versions are served to visitors for better performance.

Development Mode

Enable Development Mode in the Advanced tab to load unminified source files for easier debugging, skip the minification cache, and see verbose error output.

Best Practices

• Use user.css for layout tweaks, colour overrides, or component styling
• Use user.js for analytics snippets, custom interactions, or third-party integrations
• These files are excluded from version control and are site-specific

Last Updated: September 02, 2026

Hits: 73

• MokoOnyx

Details

Category: Guides

• Applicable Software: MokoOnyx
• Min Version Number: Development
• Max Version Number: Not Applicable

Overview

MokoOnyx ships a built-in light/dark theme system and a front-end accessibility toolbar. Both are configured under System > Site Templates > MokoOnyx > Theme.

Dark mode and the theme switcher

In the Theme tab’s General section:

• Theme system — the master on/off switch for light/dark mode.
• Control type — how visitors switch: Switch (a Light/Dark toggle), Radios (Light/Dark/System), or None (no visible control).
• Default choice — the theme shown before a visitor chooses one: System (follows the device setting), Light, or Dark.
• Auto dark — optionally switch to dark automatically by time of day.

A floating theme button can be shown or hidden under Theme Toggle UI. Each visitor’s choice is remembered on their device and, for accessibility, bridged to Bootstrap’s data-bs-theme and ARIA attributes so assistive tech is aware of the active theme. To design your own light and dark colours, see Custom Colour Themes.

Accessibility toolbar

The Accessibility section adds a front-end toolbar (bottom-right) that lets visitors adapt the page to their needs. Each control can be enabled independently:

• Text resize — increase or decrease the text size.
• Colour inversion — invert the page colours.
• High contrast — a high-contrast mode.
• Highlight links — make every link stand out.
• Readable font — switch to a more legible typeface.
• Pause animations — stop CSS animations and motion.

Use the master Accessibility toolbar switch to turn the whole toolbar on or off. Each visitor’s choices are remembered on their device. The same accessibility toolbar is also available inside the Joomla administrator via the Admin Extender plugin.

Last Updated: September 02, 2026

Hits: 5

• MokoOnyx

Details

Category: Guides

• Applicable Software: MokoOnyx
• Min Version Number: Development
• Max Version Number: Not Applicable

Overview

MokoOnyx ships with Font Awesome 7 Free, providing thousands of icons out of the box. You can use either the bundled local copy or a Font Awesome Kit for Pro icons.

Using Local FA7 Free

By default, MokoOnyx loads the local minified FA7 Free CSS. No configuration needed. Use icons in your content with standard FA classes:

<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-envelope"></i>
<i class="fa-brands fa-github"></i>

Using a Font Awesome Kit (Pro)

If you have a FA Pro subscription:

1. Go to template settings, Advanced tab.
2. Enter your Kit code in the Font Awesome Kit field.
3. The local FA7 files will be replaced by your Kit script, giving access to Pro icons, custom sets, and versioned updates.

Drawer Icons

The left and right offcanvas drawer toggle icons are configurable in the Drawers tab. Enter any FA class string (e.g., fa-solid fa-chevron-right).

Last Updated: September 02, 2026

Hits: 64

• MokoOnyx