This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(147.20000000000002, 70%, 24%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EIP%3C/text%3E%3C/svg%3E)
Hi everyone. I noticed that when navigating between pages in the shell, the transition animation has a background color that matches the system theme. Is it possible to override it somehow? The same problem exists in the bottom tabs when navigating. But the bottom tabs behave the same regardless of which Android system theme is selected. I'm attaching pictures and video to make it clearer what I'm talking about.
Try to watch at 0.25 or 0.5 speed.
Light android theme:
https://youtu.be/xwvUhVdkYNg
Dark android theme:
https://youtu.be/zQcuMXkCodA
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(316.8, 40%, 40%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EYL%3C/text%3E%3C/svg%3E)
For further investigation, could you please provide the following information?
Your prompt reply will be highly appreciated.
Versions
.NET 7.0!
SDK: 7.0.100
maui-android 7.0.49
android 33.0.4
Dark theme
I am not using app theme bindings and my app have no themes. It is just colors by design. But some animation elements has colors depends on system theme colors. It is white background on pages transition and bottom tab bar animation, which you can see on screenshots and video in my post.
Android
I am working on android only, so can't tell you if there are same visual issue on iOS or not sorry :(
Reproduction steps
It is very simple. Just create MAUI app with shell flyout with two items. Items have to contains bottom tab bar. Set pages background and bottom tab backgound black. Then try to navigate between flyout items with dark system theme. Then change system theme, restart and try to test transition animations again. You would see some white details.
Thanks for your feedback, I successfully reproduced this issue using the same development environment and reproduction steps as you.
Since there is no API to set or cancel animations in the Shell, it could be better to post the issue on maui-issues to make our product group aware of it.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(25.6, 33%, 12%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EBH%3C/text%3E%3C/svg%3E)
The posted MAUI issue is Shell page transition animation causes color blinking #16621.
My workaround for this is to force a dark theme natively in the Android app. In Platforms\Android\MainApplication.cs, insert in the class constructor the line: AppCompatDelegate.DefaultNightMode = AppCompatDelegate.ModeNightYes;