Themes

The base.themes in lets coders tweak existing themes or add new ones.

PropertyDescriptionType
defaultThe default color theme for the application.object
[Custom Theme]Users can define and set their custom color themes.object

Default Theme

Mojo comes with a default theme color, perfect to kickstart your project.

PropertyTypeDefault Value
bodystring"#fff"
invertstring"#202129"
primarystring"#ff6145"
whitestring"#fff"
blackstring"#000"
graystring"#666666"
graybluestring"#455370"
redstring"#e84c3d"
pinkstring"#ff004e"
orangestring"#f39b13"
yellowstring"#f1c40f"
tealbluestring"#01caff"
bluestring"#0078ff"
greenstring"#2ccd70"
purplestring"#5a51de"
bronzestring"#c67c3b"
orchidstring"#9a59b5"
charcoalstring"#31394c"

Customizing Colors

You can create custom themes and colors.

→
When users choose to make a new theme without specifying a color, the system defaults to preset values.

Here's an example of defining new themes and colors



  mojo({
    base: {
      themes: {
        default: {
          body: "#f2f7f9",
          invert: "#6b88a5",
          primary: "#ff6145",
          customname: "#1f1d2b",
        },
        dim: {
          body: "#1a2a39",
          invert: "#90a4b8",
          customname: "#e1f0ff",
        },
        blackout: {
          body: "#000",
          invert: "#999",
          customname: "#e1f0ff",
        },
      },
    }
  });