Themed colors

Because the Mizzou Design System uses Bootstrap for a foundation, theming is available from the ground up.

While much of our own theme settings are still in development, if you need to use any Bootstrap classes that support theme variants they are available to you. Please be aware, though, the Bootstrap defaults will be overridden by our values.

Theme settings

We override Bootstrap’s theming with our own values.

$theme-colors: (
  'primary': $miz-gold,
  'secondary': $miz-black,
  'success': $miz-green,
  'danger': $miz-red,
  'warning': $miz-orange,
  'info': $miz-blue,
  'light': $miz-black-100,
  'dark': $miz-black-600
);

Theme examples

Bootstrap buttons

Example Bootstrap buttons using theme variants:

Mizzou buttons

Currently we only support the following theme buttons with our core .miz-button. More will become available in a future release.

Dark & light views

We are planning on adding dark and light settings in the future. By using a single class we will be able to change a component from a light version to a dark one.