Theming

By default, Mod ships with two themes: light and dark. Both themes are implemented as color palettes, made up of several CSS variables that can be overriden in your app.

Default Variables

The folowing variables are defined by Mod. For simplicity, the dark theme is just an inversion of the light theme, save for the primary colors (at the bottom of the table).

Overriding Variables

How you override Mod's built-in CSS variables depends on the load order of Mod's CSS relative to your own app's styles. If Mod is loaded before your app's own CSS (e.g., a global index.css file), theme overrides can be defined as follows:

[data-mod-theme="light"],
[data-mod-theme="dark"] {
  --mod-brand: #ef7007;
}

Above, we target the --mod-brand variable for both the light and dark themes in Mod. If we wanted to override additional variables, we'd place them inside of this CSS rule, for example:

[data-mod-theme="light"],
[data-mod-theme="dark"] {
  --mod-brand: #ef7007;
  --mod-success: lime;
}

If Mod's CSS is loaded after your own app's CSS, the approach is the same, however, you'll want to suffix each variable override with the CSS !important rule:

[data-mod-theme="light"],
[data-mod-theme="dark"] {
  --mod-brand: #ef7007 !important;
  --mod-success: lime !important;
}

It's recommended that you load Mod's CSS first and then load your own app's styles so you can avoid the usage of !important.