sleek_palette 0.1.1

An opiniated color palette.

An opiniated color palette.

Install

Add the dependency to your pubspec.yaml :

dependencies:
    sleek_palette: <version>

Quick start

SleekPalette(
    child: Builder((context) {
            final palette = SleekPalette.of(context);
            return Container(
                color: palette.danger
                child: Text(
                    'Warning', 
                    style: TextStyle(
                        color: palette.danger.variants.invert,
                    ),
                ),
            )
        },
    ),
)

Usage

Defining a palette

Constant

SleekPalette(
    data: const SleekPaletteData(
        primary: Color(0xFF5D3BE8),
        info: Color(0xFF3C39EE),
        secondary: Color(0xFF396BEE),
        danger: Color(0xFFEE394E),
        success: Color(0xFF3AC281),
        warning: Color(0xFFFFC369),
        dark: Color(0xFF323232),
        light: Color(0xFFEFEFEF),
        white: Color(0xFFFCFCFC),
        black: Color(0xFF090909),
        grey: Color(0xFF6A6A6A),
    ),
    child: <your app>,
)

Distant

The theme can be loaded asynchronously from a json file. The loaded palette is then stored in shared preferences and loaded automatically when the app is started.

SleekPalette.fromUrl(
    url: SleekPaletteData.fromUrl('https://company.com/theme.json')
    data: SleekPaletteData.fallback(), // Used while loading
    child: <your app>,
)

Reading a palette

To read a color value from the palette use SleekPalette.of.

final palette = SleekPalette.of(context);
return Text(
    'Stay home!', 
    style: TextStyle(
        color: palette.danger,
    ),
);

The derived_color package is also automatically imported to access color variants through extensions.

final palette = SleekPalette.of(context);
return Container(
    color:  palette.danger,
    child: Text(
        'Stay home!', 
        style: TextStyle(
            color: palette.danger.variants.invert,
        ),
    ),
);

Updating palette

You can update the current palette at any time. By default, the new palette is saved to preferences and automatically loaded on app launch.

SleekPalette.update(context, 
    SleekPaletteData(
        //...
    ),
);

You can also update the palette from a distant one.

await SleekPalette.updateFromUrl(context, 'https://company.com/theme.json');

Thanks

Thanks to the bulma framework team for the inspiration.