themex is an easy theme manipulation basied on material design. only inform primary color and the themex generate all color combination palette for you
themex result
usage
themex a simple usage. only inform primary color and the magic happens
create a themex instance
final theme = themex(
brightness: brightness.light,
primarycolor: const color(0xff684437),
colorengine: themexcolorengine.traditional,
backgroundcolor: colors.white,
);
set theme on materialapp
materialapp(
title: 'themex',
theme: theme.get(), //here set theme attribute with themex codes
home: const myhomepage(),
);
how to see visual result?
for see result is simple call a dialog any page or menu that you will see the entire generated color palette
showdialog(
context: context,
builder: (context) {
return const themexdialog();
},
);
how to get properties from themex?
colors
get primary color
var primary = themex.i.primary;
or get primary variants
var primary50 = themex.i.primary[50];
var primary100 = themex.i.primary[100];
var primary200 = themex.i.primary[200];
var primary300 = themex.i.primary[300];
var primary400 = themex.i.primary[400];
var primary500 = themex.i.primary[500];
var primary600 = themex.i.primary[600];
var primary700 = themex.i.primary[700];
var primary800 = themex.i.primary[800];
var primary900 = themex.i.primary[900];
get secondary color
var secondary = themex.i.secondary;
or get secondary variants
var secondary100 = themex.i.secondary[100];
var secondary200 = themex.i.secondary[200];
var secondary400 = themex.i.secondary[400];
var secondary700 = themex.i.secondary[700];
get greyscale color
var grey = themex.i.grey;
or greyscale variants
var grey50 = themex.i.grey[50];
var grey100 = themex.i.grey[100];
var grey200 = themex.i.grey[200];
var grey300 = themex.i.grey[300];
var grey400 = themex.i.grey[400];
var grey500 = themex.i.grey[500];
var grey600 = themex.i.grey[600];
var grey700 = themex.i.grey[700];
var grey800 = themex.i.grey[800];
var grey900 = themex.i.grey[900];
semantic colors
var success = themex.i.success;
var danger = themex.i.danger;
var warning = themex.i.warning;
var info = themex.i.info;
var secondarysuccess = themex.i.secondarysuccess;
var secondarydanger = themex.i.secondarydanger;
var secondarywarning = themex.i.secondarywarning;
var secondaryinfo = themex.i.secondaryinfo;
typography
var h1 = themex.i.h1;
var h2 = themex.i.h2;
var h3 = themex.i.h3;
var h4 = themex.i.h4;
var h5 = themex.i.h5;
var bodylarge = themex.i.bodylarge;
var bodymedium = themex.i.bodymedium;
var buttonlarge = themex.i.buttonlarge;
var buttonmedium = themex.i.buttonmedium;
var subtitlelarge = themex.i.subtitlelarge;
var subtitlemedium = themex.i.subtitlemedium;
features
discover highlight/contrast color from the another color
if you use the yellow color in the background and want to find out which one color accent this background
var backgroundaccentcolor = themex.i.contrastcolor(colors.yellow);
color engine
color engine generate a pallet color variants basied on constantin material design, buckner material design and traditional material design.
pass attribute “colorengine” on themex create
final theme = themex(
brightness: brightness.light,
primarycolor: const color(0xff684437),
colorengine: themexcolorengine.constantin, //or themexcolorengine.buckner or themexcolorengine.traditional
);
