How to change onPrimary Color

[Luwx]

My primary color is #65BB46, and the FlexColorScheme generate a dark onPrimary for best contrast accordingly, but I need it to be white for branding reasons, even if contrast is downgraded. How can I do that?

[rydmike]

Hi @Luwx and thanks for your question!

TLDR

How about just setting onPrimary to Colors.white?

Longer explanation

With the FlexColorScheme API you can easily override the generated colors, or the pre-defined ones set via scheme or colors API, it even overrides the color set in a passed colorScheme.

For example:

      theme: FlexThemeData.light(
        useMaterial3: true,
        scheme: FlexScheme.redWine,
        onPrimary: Colors.yellow, // <== override onPrimary color to YELLOW
        blendLevel: 2,
        appBarOpacity: 0.98,
        subThemesData: const FlexSubThemesData(
          inputDecoratorRadius: 8,
          inputDecoratorPrefixIconSchemeColor: SchemeColor.primary,
          inputDecoratorSchemeColor: SchemeColor.primary,
          inputDecoratorBackgroundAlpha: 0x18,
          inputDecoratorUnfocusedHasBorder: false,
          appBarScrolledUnderElevation: 6,
          popupMenuOpacity: 0.96,
          bottomNavigationBarOpacity: 0.96,
          navigationBarOpacity: 0.96,
          navigationRailOpacity: 0.96,
        ),
        keyColors: const FlexKeyColors(),
      ),

FlexColorScheme contains many more flexibility and convenience API's than those used and settable via the Themes Playground. This particular yellow onPrimary will keep its yellow color despite using a given scheme as input (redWine) that is here even used to seed generate the ColorScheme, it just overrides that particular color to the defined Color values. This API is intended for giving quick and easy access to overriding any of the computed results. (Most of them not all ColorScheme colors have direct overrides, but this one happens to have)

Result of above theme:

From the doc comment about FlexThemeData.light(onPrimary):

    /// A color that is clearly legible when drawn on [primary] color.
    ///
    /// To ensure that an app is accessible, a contrast ratio of 4.5:1 for
    /// [primary] and [onPrimary] is recommended. See
    /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
    ///
    /// When using this extension, this is an override color for the color that
    /// would be used based on the corresponding color property defined in
    /// [FlexSchemeColor] [colors] property or when using pre-defined color
    /// scheme based [FlexScheme] and its [scheme] property, including any
    /// used blend logic. If a [colorScheme] was provided with this
    /// corresponding color defined, this color property will override the
    /// same color in it as well.
    ///
    /// You can use this property for convenience if you want to override the
    /// color that this scheme color gets via the extensions factory behavior.
    final Color? onPrimary,

In Themes Playground

In the Themes Playground, you can define and ask for main onColors to always be white or black, but they will be so based on "correct" contrast for the color.

There is an algorithm (provided by Flutter SDK) for determining if a color is "light" and should have a dark contrasting color, or if it is "dark" and should have a light contrasting color. The white/black auto selection here is based on that.

The color you mention #65BB46 is by this algorithm considered to be "light", so based on the algo it should have a "dark" background, so when you set it to use black or white onColor, it will get black color since that is its "correct" contrast color.

However, the color #65BB46 is fairly close in darkness to where the switch to white happens, so it can actually be a bit subjective what works best, and white might not be totally wrong either, especially not if that is what the branding says it should be 😃

In that case the override above should give you what you need.

Testing with your use case color

I'm curious what it looks like so, here first with default dark onPrimary:

      darkTheme: FlexThemeData.dark(
        colors: FlexSchemeColor.from(
          primary: const Color(0xff65bb46),
        ),
        surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
        blendLevel: 11,
        subThemesData: const FlexSubThemesData(
          blendOnLevel: 20,
          blendOnColors: false,
          useTextTheme: true,
          useM2StyleDividerInM3: true,
          alignedDropdown: true,
          useInputDecoratorThemeInDialogs: true,
        ),
        keyColors: const FlexKeyColors(
          keepPrimary: true,
        ),
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
        useMaterial3: true,
        swapLegacyOnMaterial3: true,
      ),

Then with the Colors.white override:

      darkTheme: FlexThemeData.dark(
        onPrimary: Colors.white, // <=== Set to white here!
        colors: FlexSchemeColor.from(
          primary: const Color(0xff65bb46),
        ),
        surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
        blendLevel: 11,
        subThemesData: const FlexSubThemesData(
          blendOnLevel: 20,
          blendOnColors: false,
          useTextTheme: true,
          useM2StyleDividerInM3: true,
          alignedDropdown: true,
          useInputDecoratorThemeInDialogs: true,
        ),
        keyColors: const FlexKeyColors(
          keepPrimary: true,
        ),
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
        useMaterial3: true,
        swapLegacyOnMaterial3: true,
      ),

Result:

Imo, it looks like white works pretty well contrast wise on this color too, as I suspected 😅

Hope this helps!

BR
Mike

Related questions

This question has some relation to these two questions and answers:

• Can dark mode be provided when the theme is all black #201
• Override built-in scheme colors and how to add extra semantic colors #206

[Luwx]

Remarkable answer @rydmike, thank you very much
Yeah I just missed the onPrimary parameter 😅