Description:

sleek palette

An opiniated color palette.

Install #
Add the dependency to your pubspec.yaml :
dependencies:
sleek_palette: <version>
copied to clipboard
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,
),
),
)
},
),
)
copied to clipboard
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>,
)
copied to clipboard
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>,
)
copied to clipboard
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,
),
);
copied to clipboard
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,
),
),
);
copied to clipboard
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(
//...
),
);
copied to clipboard
You can also update the palette from a distant one.
await SleekPalette.updateFromUrl(context, 'https://company.com/theme.json');
copied to clipboard
Thanks #
Thanks to the bulma framework team for the inspiration.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter