Coloring support - LuccaSA/lucca-ui GitHub Wiki

You can have any custom element support luccaUI color scheme by using the .lui_supports_coloring mixin.

The mixin takes a ruleset as parameter. Inside the given ruleset, you can use 3 variables:

• @coloring-color: the color main color
• @coloring-text: the color of any text being displayed over said color
• @coloring-lightOnDark: is the coloring-text color lighter than the main color?

Example:

.my-element {
    .lui_supports_coloring({
        background-color: @coloring-color;
        color: @coloring-text;

        & when (@coloring-lightOnDark = true) {
            text-shadow: 0 1px 1px darken(@coloring-color, 10);
        }
    });
}

<div class="lui red my-element"></div>