Colors

A collection of helpers to customize the text and background color of any element.

Customize colors helpers

You can customize colors helpers using the colors field of your theme configuration: any value provided will generate additional color helpers.

import colors from "@siimple/colors";

export default {
    colors: {
        primary: colors.blue["500"],
        secondary: colors.mint["500"],
        accent: colors.royal["600"],
        // ...other colors
    },
    // ...other configuration
};

Background color

Use has-bg-{name} to set the background color of any element. Background color helpers will be generated using the values provided in the colors field of your theme.

The following background helpers will be always available, regardless the colors you provide in your theme configuration:

Example:

<div class="button has-bg-secondary">
    <strong>Button</strong>
</div>

Background color on hover

You can change the background color of any element on hover adding the -hover suffix to the background color helper.

<div class="button has-bg-secondary-hover">
    <strong>Hover me</strong>
</div>

Text color

Use has-text-{name} to set the text color of any element. Text colors helpers will be generated using the values provided in the colors field of your theme.

The following text helpers will be always available, regardless the colors you provide in your theme configuration:

Example:

<strong class="has-text-secondary">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</strong>

Text color on hover

You can change the text color of any element on hover adding the -hover suffix to the text color helper.

<strong class="has-text-primary has-text-secondary-hover">
    Hover me
</strong>