Colors

ColorScheme

Every Theme requires a single ColorScheme. ColorSchemes must be either light or dark.

final colorSchemeLight = ColorScheme.light(
  neutral: Colors.slate,
  primary: Colors.violet,
  secondary: Colors.emerald,
  tertiary: Colors.black,
);

There are a lot more options that can be provided such as background, surface and semantic colors (success, error, warning, info). You can have as much or as little control over the colorScheme as you like.

If you only provide a neutralColor, like the example above, background and surface will be inferred. You can also specify a theme as highContrast, which will change the background and surface slightly.

JoltColor

Creating a ColorScheme you will notice that all colors are expected to be of type JoltColor.

Before explaining why JoltColors are useful, lets look at how to create one.

const slate = JoltColor(
  // The default value
  0xff475569,
  // Full shade list, from lightest to darkest
  shade50: Color(0xfff8fafc),
  shade100: Color(0xfff1f5f9),
  shade200: Color(0xffe2e8f0),
  shade300: Color(0xffcbd5e1),
  shade400: Color(0xff94a3b8),
  shade500: Color(0xFF64748b),
  shade600: Color(0xff475569),
  shade700: Color(0xff334155),
  shade800: Color(0xff1e293b),
  shade900: Color(0xff0f172a),
  shade950: Color(0xff020617),
);

The reason that Jolt expects this format is that it can be used to infer colors such foreground, onHover, onFocus and more. You can also specify these varients yourself if you need more control.

What it can do

When you supply a JoltColor as a background for a Surface, any Icons and Text inside the surface will automatically use the foreground varient. If you wrap the Surface in an Interaction, the Surface will use the onHover varient on hover and so on for the other states.

Pre-set Colors

Of course, you don't need to write your own colors if you don't want to. Like with Material, Jolt has a Colors class for convenience. We have used the TailwindCSS colors (opens in a new tab) as a default, so massive thank you to them.