Theme Configuration

Customize your application’s default surfaces, text colors, breakpoints and more. Easily modify your theme in real time with one file configuration! Mytril comes with standard support for light and dark variants with theme process.

Basic

Mytril comes with two themes pre-installed, light and dark. To set the default theme of your application; use the defaultTheme option in the mytril.config.js file.

export default {
  theme: {
    defaultTheme: "light",
  },
};

By default, the configured theme is light, you can change it to dark or any other theme name you have created.

Customize default themes

You can modify existing properties or create new ones. The logic of mytril is to generate style variables for each property in classes that correspond to the theme name. However, a nuance exists for the default theme which, in addition to being included in a class, will be present in root css.

export default {
  theme: {
    defaultTheme: "light",
    colors: {
      primary: {
        light: "var(--c-green-6)",
        dark: "var(--c-green-2)",
      },
      secondary: "#eaea",
      background: {
        dark: "var(--c-stone-10)",
      },
    },
  },
};

To modify a color of an existing theme you have several possibilities:

key: string, : A string property, apply the same color for all generated themes. For example for the secondary property, you will have the color #eaea diffused on light and dark.
key: object, : An object type property that allows you to refine your color charts according to the theme. In our example, primary will have a different shade of green between the dark and light theme.

If you create a new property it will be distributed only on the theme indicated for the other themes it will be undefined. If you do not have a nuance for other themes we recommend that you define it as a string.

Add new theme

You can quickly add new themes to your application.

export default {
  theme: {
    defaultTheme: "dark",
    colors: {
      primary: {
        light: "var(--c-green-6)",
        dark: "var(--c-green-2)",
        "my-theme": "var(--c-green-10)",
      },
      secondary: "#eaea",
    },
  },
};

To add a theme to your project, simply define a new shade in a property. For example in primary we added the my-theme nuance. This generated a new class named .my-theme. This new theme directly inherits the existing variables in the selected default theme.

Default colors set

All the color properties installed by default in mytril are presented to you here.

palette

--c-primary

#3b8eed

--c-secondary

#ff3e00

typography

--c-text-head

var(--c-gray-10)

--c-text

var(--c-gray-7)

--c-text-soft

var(--c-gray-5)

--c-text-mute

var(--c-gray-4)

--c-text-code

var(--c-gray-8)

background

--c-bg

var(--c-neutral-0)

--c-bg-soft

var(--c-neutral-1)

--c-bg-mute

var(--c-neutral-2)

state

--c-info

var(--c-blue-5)

--c-success

var(--c-green-5)

--c-error

var(--c-red-5)

--c-warning

var(--c-yellow-5)

global

--c-shadow

var(--c-stone-10)

We provide a sensible default theme with a very generous set of values to get you started, but don’t be afraid to change it or extend it; you’re encouraged to customize it as much as you need to fit the goals of your design.