Road To Material Design 3, Fixing Dark Mode Overlays

The fix to customize the Dark Mode Overlay color is currently in the GitHub repo of Flutter. But, it will take time for that fix to make it to the stable branch. Let me show you how to do a work-around now that will allow customizing the Dark Mode overlay color.

How Dark Mode Overlays Work

Remember, all Material Widget components can receive an overlay that sits on top when the widget is rendered. That means what determines the final color of the widget is the ElevationOverlay class. Specifically this method:

Now, let’s see if you understand that method. What does this do?

It does not do what you think it does, as the color of the widget rendered is computed in the overlay for dark mode and not at the Widget surface layer. The actual neat…