Color Themes

Move beyond the limitations of single-theme frameworks. Mojo empowers you to define limitless color themes, effortlessly switching between them to express your brand's full spectrum.

Dark Mode and More

Dark mode is just the beginning. Mojo empowers you to effortlessly expand your theme repertoire without limitation & project overload.

How it works

Simplifying color theme development, we utilize a three-color approach:

Body : The overall background color of the theme.
Invert : The color with the highest contrast relative to the body, primarily used for text elements.
Primary : The brand color or the theme's main color, often used for headers, buttons, and other prominent elements.

  • Light
  • Dark
  • Coffee
  • Night

Arthur C. Clarke once said:

“Any sufficiently advanced technology is indistinguishable from magic”

body
invert
primary
Learn how to add and customize theme colors in config's themes page.

By employing this approach, the need for repetitive code in theme-specific colors would be substantially reduced:



<!-- Repetitive way -->
<div class="bg-white text-black dark:bg-black dark:text-white">
    ...
</div>

<!-- Mojo way -->
<div class="--bg-c-body text-c-invert**">
    ...
</div>

While Mojo handles most theme styling, occasional manual color adjustments can be achieved through Theme Variants.

Switching themes

To switch the theme, just put the theme's name in the m-theme attribute on either the body or html element.



<!-- Default theme -->
<html>
    <body>
        <div class="text-c-black" dark="text-c-white">
            ...
        </div>
    </body>
</html>

<!-- Dark theme enabled -->
<html -- m-theme="dark" **>
    <body>
        <div class="text-c-black" dark="text-c-white">
            ...
        </div>
    </body>
</html>