Can dark mode be provided when the theme is all black

[laterdayi]

Can dark mode be provided when the theme is all black

The current dark mode is purple or other colors. Is there any configuration that can be set to all black

[rydmike]

Hi @laterdayi,

Thanks for your question. Yes it can, there are many ways to tune and adjust the amount color blend into both light and dark background colors, there are also different background colors used for different surfaces (background) by different Widgets. So it is important to know which background we are talking about.

For black scaffold background the simplest way is typically to turn on use "True black":

FlexThemeData.dark(
  darkIsTrueBlack: true,
);

This does it for the ThemeData.scaffoldBackgroundColor. When darkIsTrueBlack: true is set the scaffold background will always be black regardless of used blends or M3 seed scheme.

Usually it is a good idea to have a bit of another dark shade on ColorScheme surface and background colors, as seen above. Typically surface and background are the same color, but can also differ slightly from each other, depends on used blend mode. If you want them to be much darker too, then you can certainly make them so by adjusting the blend level to 0, until they are as dark as possible.

They won't go to zero though, they will go to the dark theme base level, which is and almost black (0xFF050505).

If you really want them to be black too (and you are not using M3 seed generated ColorScheme), you can provide direct color value overrides via the API by giving certain color values supported directly in the API a fixed value.

This is not available in Playground, but this is way to make them all black with the API, it will override any colors come from the built-in themes scheme or custom color values provided in colors or colorScheme color input APIs.

FlexThemeData.dark(
  blendLevel: 0,
  surface: Colors.black,
  background: Colors.black,    
  scaffoldBackground: Colors.black,
);

Keep the blend level at 0 though, because increasing it will start adding blend color into surface and background, however not into `` if you also set darkIsTrueBlack: true.

Using M3 Seed generated ColorScheme?

If you did the above (not the API only setup, the screenshots) and turn on Seeded Scheme, you will notice that dark colors for surface and background get a bit less dark, up from 0xFF050505 to in this case 0xFF0F0F11. What value it actually gets depends on the used FlexTones seeding strategy, the default Material 3 (only one supported by vanilla Flutter, other ones are from my ColorScheme PKG FlexSeedScheme) is shown below:

This dark surface and background colors now got lighter and tinted differently, because using seed generated ColorScheme create all new ColorScheme based on the input key color (primary and optional secondary and tertiary). It then computes new dark (and light) surface/background colors with its own M3 color system and algorithm. It is actually a very cool color magician.

This new ColorScheme then becomes to input for the starting point for the optional surface blend additions on top of that. Surface blends was done by FlexColorScheme and used way before M3 ColorScheme algo was a thing, its idea is a bit similar though.

The result of the seed output becomes input for additional blends, in this case the dark starting surface and background level becomes 0xFF1C1B1E. It assigns background also to scaffoldBackground ,so you if set darkIsTrueBlack: false (OFF, default), you will see it has that value too. The darkIsTrueBlack works on input scaffoldBackground as before making it always black.

However, when using seeded ColorScheme, we have a few additional toggles that in addition to selected FlexTones seed strategy can be used to adjust the result after the seed generation, but before it becomes input for the blends. shown in green box below, on option is making surface and background (and thus also scaffoldBackground) plan black too.

This then becomes input to blends, that as long as blend level is zero, will result in all three main surface colors being black.

Again if you up the blend level, but keep darkIsTrueBlack: true, the surface and black color will get blends again, but now the mix of blend color starts from black. This means the used blend mode starts from black, so you need to crank it up very high before you see any impact on them, how much also depends on the used mode:

---

Lastly, by default the used blend color and surface tint color in M3, is equal to primary color, but it does not have to be, it can be any color:

Here using a "Carmel" color on the purple primary theme. This also impact the elevation tint color used by Material 3. Above scaffold is still black but other surfaces got this Carmel tint, also the elevated color picker dialog itself got it.

Typically keeping it primary color is the best approach, but maybe some optional design can look cool too.

You have probably noticed that any theme change you make, is impacted in and directly reflected in the Themes Playground app itself too and all widgets and light/dark mode it uses, so it provides a good reflection of what the current configured theme looks like. This in addition to the mock sample apps in the simulated devices.

Hope this helps 🙏🏻 😄

[laterdayi]

Thank you, you are my angel

[laterdayi]

Is there a way to make the button black as well
@rydmike

[rydmike]

Depends on what button you refer to.

For a button that is always background colored I recommend using the Material3 TextButton. It has transparent background, but it gets a hint of its assigned button color as hover focus and splash.

(Above I hovered the TextButton that is tinted, with the mouse while taking the screenshot)

You can of course theme any of the Material3 buttons to be black as well. If that is what you want, it can be a cool effect in light themes with black buttons that have white text.

In the Themes Playground and any M2/M3 std defaults based ColorScheme, the Shadow color is always black, so that can work to make e.g. all ElevatedButtons black:

If you really want to use pure black as color that you is part of your main colors in the ColorScheme, you can make a custom theme (you can add your own colors in Themes Playground too, copy any built-in theme to the last one as a starting point, then change one ore more main colors in it) and e.g add total black color to the resulting ColorScheme as one of its main colors. Use e.g. tertiary color for it. It is a good choice since its usage by default, by any built in M3 widget is almost none (perhaps even none), so you wont get any M3 widgets using this black color by default.

Then you can use the tertiary color in dark mode that is now also "black", on any of the ColorScheme based color assignments, below changed the shadow color to the new customized tertiary color that is now black: