rydmike / flex_seed_scheme

A more flexible version of Flutter's ColorScheme.fromSeed
Other
24 stars 2 forks source link

True Colour. #10

Closed samuelinNUI closed 5 months ago

samuelinNUI commented 6 months ago

Are there any settings that select the colour match in the "colour algorithm" so that it stays true to my colour input? I'm trying to get close to the brand colour as long as possible.

rydmike commented 6 months ago

Hi @samuelinNUI, thanks for your question.

Yes you can override the produced seed generated ColorScheme individual colors results with any color value.

Typically you would want e.g. the primary color to become the same color as your input seed color, which often is your main branding color.

// Define your seed colors.
const Color primarySeedColor = Color(0xFF6750A4); // Our MAIN brand/app color!
const Color secondarySeedColor = Color(0xFF3871BB);
const Color tertiarySeedColor = Color(0xFF6CA450);

// Make a light ColorScheme from the seeds.
final ColorScheme schemeLight = SeedColorScheme.fromSeeds(
  brightness: Brightness.light,

  // Use a "brand" seed color as primary color in the resulting ColorScheme.
  primaryKey: primarySeedColor,
  primary: primarySeedColor, // <- Put same brand color as primaryKey color here too!

  // You can do the same for secondary and tertiary too, if they are important brand colors.
  secondaryKey: secondarySeedColor,
  secondary:  secondarySeedColor,
  //
  tertiaryKey: tertiarySeedColor,
  tertiary: tertiarySeedColor,

  // This controls the seed generation algo and color mapping, you can make your own too!
  tones: FlexTones.vivid(Brightness.light),
);

When you do this, you must also manage that contrasting "on" color for the overridden ColorScheme color gets a suitable contrast color. This is only needed in case where the none "on" color, e.g. the primary color that would have been computed from the input primaryKey color has another contrast requirement result than the the input color, in this case the primarySeedColor.


This feature is explained in docs here: https://github.com/rydmike/flex_seed_scheme/tree/master?tab=readme-ov-file#override-color-values. The functionality is the same as with Flutter's standard ColorScheme.fromSeed, but it supports more than just one key color, and different seed generation algorithms, and even custom algos version and custom tone to scheme mappings.

rydmike commented 5 months ago

Closed due to no response.