Color with variants

To add colors with variants, go to Pilo’Press > Styles > Configuration > Colors.

By “Colors with variants“, we mean colors like TailwindCSS does by default (gray-500 is a variant of gray).

Thanks to this UI, we can change your colors without writing Javascript.

The equivalent of the data above is this:

module.exports = {
    'theme': {
        'colors': {
            'gray': {
                'DEFAULT': '#a0aec0',
                '100': '#f8fafc',
                '200': '#edf2f7',
                '300': '#e1e7ef',
                '400': '#ccd6e0',
                '500': '#a0aec0',
                '600': '#728197',
                '700': '#4a5568',
                '800': '#2d3748',
                '900': '#1a212d'
            },
        }
    }
};

Override colors

You can choose to override default colors or to complete them thanks to this toggle:

(It will affect compiled CSS file size.)