Theme configuration

Customize 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 pre-installed with two default themes: light and dark. To set your app’s default theme, edit the defaultTheme option in the plugins/mytril.(js|ts) file.

// plugins/mytril.(js|ts)
export default {
	theme: {
		defaultTheme: 'light'
	}
};

By default, the light theme is applied, but you can easily switch to dark or any custom theme you’ve created.

Custumizing default themes

You can modify existing themes or create new ones by adjusting properties. Mytril generates style variables for each property, linked to the theme name. The default theme is also included in the global CSS root.

// plugins/mytril.(js|ts)

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

To customize theme colors, you can:

key: string, : Apply the same color across all themes. For example, setting secondary: "#eaea" will apply this color to both the light and dark themes.
key: object – Define specific colors for each theme. For example, primary can have different shades of green for light and dark themes.

If you create a new property, it will only apply to the specified theme unless you define it for others.

Adding a new theme

To add a new theme, simply define a new color property to your application.

// plugins/mytril.(js|ts)

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

To add a new theme, simply define a new color property, like my-theme in primary. This will generate a new CSS class .my-theme, which inherits variables from the default theme.

Default color set

Mytril comes with a generous set of default colors.

palette

--primary

#1976D2

--secondary

#424242

--tertiary

#82B1FF

typography

--text

#1d1b20

--text-variant

#322f35

--text-soft

#49454f

--text-mute

#79747e

background

--surface

#FEF7FF

--surface-variant

#E7E0EC

--surface-container

#F3EDF7

state

--info

#2196F3

--success

#4CAF50

--error

#FF5252

--warning

#FB8C00

global

--shadow

#000000

--outline

#79747e

We provide a well-balanced default theme with an extensive set of color values to start your project. However, the real power of Mytril lies in its flexibility you’re not confined to the defaults. Mytril encourages you to tailor the theme to your exact design needs. Whether you want to tweak a few colors or create entirely new themes, Mytril makes it easy to customize every detail.