ThemeX 是一个基于 Material Design 的简单主题处理工具。只需提供主色，ThemeX 即可为您生成所有颜色组合的调色板

ThemeX 结果

theme_x_palette

用法

ThemeX 使用简单。只需提供主色，奇迹就会发生

创建 ThemeX 实例

final theme = ThemeX(
    brightness: Brightness.light,
    primaryColor: const Color(0xFF684437),
    colorEngine: ThemeXColorEngine.traditional,
    backgroundColor: Colors.white,
);

在 MaterialApp 上设置主题

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

如何查看视觉结果？

要查看结果，只需在任何页面或菜单中调用对话框，您将看到生成的整个颜色调色板

 showDialog(
  context: context,
  builder: (context) {
    return const ThemeXDialog();
  },
);

如何从 ThemeX 获取属性？

颜色

获取主色

var primary = ThemeX.I.primary;

或获取主色变体

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];

获取次色

var secondary = ThemeX.I.secondary;

或获取次色变体

var secondary100 = ThemeX.I.secondary[100];
var secondary200 = ThemeX.I.secondary[200];
var secondary400 = ThemeX.I.secondary[400];
var secondary700 = ThemeX.I.secondary[700];

获取灰度色

var grey = ThemeX.I.grey;

或灰度色变体

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];

语义颜色

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;

排版

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;

功能

发现另一种颜色的高亮/对比色

如果您在背景中使用黄色，并想找出哪种颜色最适合搭配这种背景

var backgroundAccentColor = ThemeX.I.contrastColor(Colors.yellow);

颜色引擎

颜色引擎根据 Constantin Material Design、Buckner Material Design 和 Traditional Material Design 生成调色板的颜色变体。

在 ThemeX 创建时传递“colorEngine”属性

final theme = ThemeX(
    brightness: Brightness.light,
    primaryColor: const Color(0xFF684437),
    colorEngine: ThemeXColorEngine.constantin, //Or ThemeXColorEngine.buckner or ThemeXColorEngine.traditional
);

GitHub

查看 Github