Theming Components

Metro UI components can be themed using CSS variables, which provide a flexible way to customize styles without modifying the component’s source code. You can override the default CSS variables to change colors, sizes, and other styles globally or for specific components.

Tip

To apply your theme, you must add styles after the Metro UI styles.

Example: Theming a Button

See the Example by Serhii Pimenov on CodePen.

<button class="button"
    style="
    --button-background: #4CAF50;
    --button-color: white;
    --button-background-hover: #104e12;
    --button-border-color: #104e12;
    ">
    Themed Button
</button>

Default themes

Each component has its own set of CSS variables that can be customized and supports two themes by default: light, and dark. For example, the Button component uses:

:root {
    --button-background: #ebebeb;
    --button-background-hover: #dadada;
    --button-color: #191919;
    --button-border-color: #ebebeb;
}

.dark-side {
    --button-background: #2b2d30;
    --button-background-hover: #333439;
    --button-color: #f3fcff;
    --button-border-color: #4e5157;
}

For dark mode, you can put your custom styles into a .dark-side class. For example:

.button-theme {
    --button-background: #4CAF50;
    --button-color: white;
    --button-background-hover: #104e12;
    --button-border-color: #104e12;
}

.dark-side {
    .button-theme {
        --button-background: #2b2d30;
        --button-color: #f3fcff;
        --button-background-hover: #333439;
        --button-border-color: #4e5157;
    }
}