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
- Skin Type:
- Menu style:
- Navbar style:
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.
||This class will give the element the main theme color as a background color|
||This class will give the element its parent background color, and the text will get th theme color|
||This class will give the element the theme's accent color as a background color.|
||This class will give the text the theme color.||Example text|
||This class will give the text the theme accent color.||Example text|