Styling and customizing your app was never done so fast and easy!

MDA has a very flexible theming structure build in. This allows you to change and add new themes that also styles the whole UI-kit accordingly to the selected theme color. This is done without having to change any classes on your html files. We created three classes that will style all the UI-elements accordingly to your selected theme for you! All themes can be used on a light and dark skin.
The selected theme and skin will be stored in the users localstorage.

Below are just a few examples of themes and skins combined with different layouts. Change themes, skins and layouts to your liking in the settings.

Theme blue-dark with ev-page
Theme lavendar with classic page
Theme blue-grey ev-page / horizontal menu
Theme dark / dark-skin

Creating your own themes

Easily create new themes with the theme mixin in sass .You can set a main color and a accent color. When using the class theme on a element it will get the main color as a background color. The class theme-inverse will give an element a white backgroud with the theme as text color. To give an element the accent color use class theme-accent.

Styling Options

  • Theme:
  • Skin Type:
  • Light
  • Dark
  • Menu style:
  • Theme
  • Light
  • Dark
  • Navbar style:
  • Theme
  • Theme inverse

UI-elements

As mentioned above we created an easy and fast way to style all your UI-elements accordingly to your theme colors. By using these classes on the components you can change themes or add new themes without having to change any classes on your elements!

Switch themes to see the change on the examples.

Use class Description Example
theme This class will give the element the main theme color as a background color
theme-inverse This class will give the element its parent background color, and the text will get th theme color
theme-accent This class will give the element the theme's accent color as a background color.
text-theme This class will give the text the theme color. Example text
text-theme-accent This class will give the text the theme accent color. Example text

© 2016 YourApp