Customising

Custom Stylesheets

You can customise elements in the plugin using seperate .less or .css stylesheets in the styles directory.

The custom stylesheet loader also supports searching subdirectories within the styles directory.

LESS Stylesheets

Due to the way that the less compiler works, all the less stylesheets are merged into a single document, starting with any files named variables.less, followed by any other files. This allows you to override all the variables within the plugin, while overriding CSS styling.

This means that you may need to use 2 seperate stylesheets in the styles directory, one named variables.less and a second named mystyles.less in order for the compiled output to be correct for less and CSS overriding.

CSS Stylesheets

CSS Stylesheets are loaded after the Mikio Plugin stylesheet and should be able to override any built-in styling.

Custom Element Styles

Some elements contain built-in styles such as primary, secondary, success, etc, however you can add your own styles using custom stylesheets.

For an example, to add a new raven style:

1. Create a new variables.css file in the styles directory that contains the following structure:

:root[data-theme="theme-light"] {
    --mikiop-raven-text-color: #910091;
    --mikiop-raven-background-color: #F6CEFC;
    --mikiop-raven-border-color: #910091;
    --mikiop-raven-text-hover-color: #910091;
    --mikiop-raven-background-hover-color: #F6CEFC;
    --mikiop-raven-border-hover-color: #910091;
    --mikiop-raven-light-text-color: #910091;
    --mikiop-raven-light-background-color: #F6CEFC;
    --mikiop-raven-light-border-color: #910091;
}

:root[data-theme="theme-dark"] {
    --mikiop-raven-text-color: #0c5460;
    --mikiop-raven-background-color: #117a8b;
    --mikiop-raven-border-color: #0c5460;
    --mikiop-raven-text-hover-color: #0c5460;
    --mikiop-raven-background-hover-color: #117a8b;
    --mikiop-raven-border-hover-color: #0c5460;
    --mikiop-raven-light-text-color: #0c5460;
    --mikiop-raven-light-background-color: #117a8b;
    --mikiop-raven-light-border-color: #0c5460;
}

Note: all the above variables are required. The theme-dark section is the colours used in dark mode of the browser.

2. Now link the CSS variables to a style by creating a new styles.less file in the styles directory that contains the following code:

._mikiop-custom-type(raven);

3. You can now use the new raven type in elements such as <alert raven>My Alert</alert> or <alert type=raven>My Alert</alert>. An outline-raven style will also be generated based on your variables.