theme_x 1.0.4 copy "theme_x: ^1.0.4" to clipboard
theme_x: ^1.0.4 copied to clipboard

ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you.

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 #

theme_x_palette

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,
);
copied to clipboard

Set theme on MaterialApp

MaterialApp(
  title: 'ThemeX',
  theme: theme.get(), //Here set theme attribute with ThemeX codes
  home: const MyHomePage(),
);
copied to clipboard

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();
  },
);
copied to clipboard

How to get properties from ThemeX? #

Colors #

Get primary color

var primary = ThemeX.I.primary;
copied to clipboard

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];
copied to clipboard

Get secondary color

var secondary = ThemeX.I.secondary;
copied to clipboard

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];
copied to clipboard

Get Greyscale color

var grey = ThemeX.I.grey;
copied to clipboard

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];
copied to clipboard

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;
copied to clipboard

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;
copied to clipboard

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);
copied to clipboard

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 or ThemeXColorEngine.complementary
);
copied to clipboard

Pass attribute "googleFont" to using GoogleFonts packages

final theme = ThemeX(
    brightness: Brightness.light,
    primaryColor: const Color(0xFF684437),
    colorEngine: ThemeXColorEngine.constantin, 
    googleFont: GoogleFonts.latoTextTheme, //Here pass google fonts
);
copied to clipboard

Pass attribute "backgroundColor"

final theme = ThemeX(
    brightness: Brightness.light,
    primaryColor: const Color(0xFF684437),
    colorEngine: ThemeXColorEngine.constantin, 
    backgroundColor: (primary, secondary, grey) {
      return Colors.white;
    }, //Here pass background color
);
copied to clipboard
19
likes
80
points
28
downloads

Publisher

unverified uploader

Weekly Downloads

2024.07.08 - 2025.01.20

ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, pigment

More

Packages that depend on theme_x