Color schemes

Create your own color scheme with a special mixin in just a few lines of code, just defining the main colors.

About

Metro UI contains special mixin for simplicity creating color scheme. If you want to create your own color scheme:

1. Create less file in less/schemes folder
2. Define main colors and put them to the mixin
3. Build your one scheme

                    @import (once) "include/vars"; <-- Metro UI variables
                    @import (once) "builder/builder"; <-- scheme builder mixin

                    @schemeBackground: ...;
                    @schemeBackgroundSecondary: ...;
                    @schemeTextColor: ...;
                    @schemeTextColorSecondary: ...;
                    @schemeControlColor: ...;
                    @schemeControlTextColor: ...;
                    @schemeFontFamily: ...;
                    @schemeFontSize: ...;

                    .scheme-builder(
                        @schemeBackground,
                        @schemeBackgroundSecondary,
                        @schemeTextColor,
                        @schemeTextColorSecondary,
                        @schemeControlColor,
                        @schemeControlTextColor,
                        @schemeFontFamily,
                        @schemeFontSize
                    );

                    ... <-- put here additional styles for your color scheme
                

You can see prebuild schemes in this example.

Scheme example - sky-net.css

The sky-net.css source

                    @import (once) "../include/vars";
                    @import (once) "builder/builder";

                    @schemeBackground: #ffffff;
                    @schemeBackgroundSecondary: #f5f5f5;
                    @schemeTextColor: #464646;
                    @schemeTextColorSecondary: #464646;
                    @schemeControlColor: #0CA9F2;
                    @schemeControlTextColor: #ffffff;
                    @schemeFontFamily: @fontName;
                    @schemeFontSize: @fontSize;

                    .scheme-builder(
                        @schemeBackground,
                        @schemeBackgroundSecondary,
                        @schemeTextColor,
                        @schemeTextColorSecondary,
                        @schemeControlColor,
                        @schemeControlTextColor,
                        @schemeFontFamily,
                        @schemeFontSize
                    );

                    .navview {
                        .navview-pane {
                            .navview-menu {
                                li {
                                    &.active {
                                        &::before {
                                            background-color: @white;
                                        }
                                    }
                                }
                            }
                        }
                    }