Minimal Library

Themes

Essentials

Themes

What are themes?

Themes are internaly .xml files which contain all resources needed for component rendering. Those files are then serialized by M.LoadTheme() method and then new Theme object is returned. Minimal library comes with a light and dark theme by default. Those themes can be accessed via M class using M.Dark and M.Light properties.

Theme file structure

Theme file is structured as classic XML formated document. Not all colors are used by the library by default. However, they are ready to be used in your custom components.

<?xml version="1.0" encoding="utf-8" ?>
<root>
  <COMPONENT_BACKGROUND>
    <ThemeColor Normal="#FFFFFF" Hover="#E9E9EA" Focus="#FFFFFF" Disabled="#F2F2F2"></ThemeColor>
  </COMPONENT_BACKGROUND>
  <COMPONENT_FOREGROUND>
    <ThemeColor Normal="#505050" Hover="#000000" Focus="#000000" Disabled="#999999"></ThemeColor>
  </COMPONENT_FOREGROUND>
  <COMPONENT_FILL>
    <ThemeColor Normal="#D5D2D5" Hover="#C1C1C1" Focus="#000000" Disabled="#DDDDDD"></ThemeColor>
  </COMPONENT_FILL>
  <COMPONENT_BORDER>
    <ThemeColor Normal="#BEBEBE" Hover="#BEBEBE" Focus="#000000" Disabled="#D3D3D3"></ThemeColor>
  </COMPONENT_BORDER>
  <COMPONENT_HIGHLIGHT>
    <ThemeColor Normal="#AFAFAF" Hover="#757575" Focus="#000000" Disabled="#000000"></ThemeColor>
  </COMPONENT_HIGHLIGHT>
  <FORM_BACKGROUND>
    <ThemeColor Normal="#F0F0F1" Hover="#000000" Focus="#000000" Disabled="#000000"></ThemeColor>
  </FORM_BACKGROUND>
  <DARK_BASED>
    <Bool Value="false"></Bool>
  </DARK_BASED>
</root>

Theme instance structure

Every Theme instance have multiple ThemeColor properties which represents basic color palette which can be used for your component rendering. This theme-color is for example COMPONENT_BACKGROUND which as name suggest is used as component background color. Every ThemeColor have also a multiple properties which represents individual color mutations in different component states. Those are Normal, Hover, Focus and Disabled.

Setting themes

Theme can be set to the MForm using M.SetTheme() method. You can also apply themes directly to components using CustomTheme property. See examples below.

public partial class Main : MForm
{
    public Main()
    {
        InitializeComponent();

        // Set form's theme
        M.SetTheme(this, M.Dark);
    }
}

// Set component's custom theme
button.CustomTheme = M.Dark;

Setting accent colors

Accent is main visible color of the component. Accent can be set to the individual components or for whole form.

button.Accent = Color.Red;

public partial class Main : Form
{
    public Main()
    {
        InitializeComponent();

        // Set form's accent color
        M.SetAccent(this, Color.Red);
    }
}

Component model