Different theme behaviour on physical phone (Xamarin)-CodePudding

The default theme applied to my xamarin android project displays different on a physical phone than on an emulated phone.

I have not changed any style beside some overrides for android.
As far as I am aware, the controls are shown and usable, only the colors are wrong.

I also have published the app via APK and installed it. So no debugger attached or anything, just plain installation. Same result though.

Emulated:

Physical:

This is my login View:

<ContentPage.Resources>
    <Style TargetType="{x:Type Label}">
        <Setter Property="Margin" Value="4,0,0,0" />
    </Style>
</ContentPage.Resources>

<ContentPage.BindingContext>
    <vm:LoginViewModel />
</ContentPage.BindingContext>

<ContentPage.Content>
    <Grid Padding="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <StackLayout>
            <Image Source="teleport_foundation_logo.jpg"
                   Margin="0, 20, 0, 50" />
        </StackLayout>

        <StackLayout Grid.Row="1"
                     VerticalOptions="StartAndExpand">
            <Label Text="{Binding UsernameTitle}" />
            <Entry Text="{Binding Username}"/>
            <Label Text="{Binding PasswordTitle}" />
            <Entry IsPassword="True"
                   Text="{Binding Password}" />
            <StackLayout Orientation="Horizontal"
                         HorizontalOptions="StartAndExpand">
                <CheckBox IsChecked="{Binding SaveUsername}" />
                <Label Text="Remember username" 
                       VerticalOptions="Center"/>
            </StackLayout>

            <StackLayout Orientation="Horizontal">
                <CheckBox IsChecked="{Binding ShowAdvanced}" />
                <Label Text="Advanced options"
                       VerticalOptions="Center" />
            </StackLayout>
            <Grid IsVisible="{Binding ShowAdvanced}"
                  Margin="0, 10, 0, 0">
                <StackLayout>
                    <Label Text="Server Address" />
                    <Entry Text="{Binding ServerAddress}" />
                </StackLayout>
            </Grid>
            
        </StackLayout>
        <Button VerticalOptions="Center" 
                Grid.Row="2"
                Text="Login" Command="{Binding LoginCommand}"/>
    </Grid>
</ContentPage.Content>

My App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <Style TargetType="{x:Type Label}">
            <Setter Property="Margin" Value="3, 0, 0, 0" />
        </Style>
        <Color x:Key="Primary">#1976D2</Color>
        <Style TargetType="Button">
            <Setter Property="TextColor" Value="White"></Setter>
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="#ffe6e6" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ResourceDictionary>        
</Application.Resources>

And Accent Color override on Android (styles.xml):

<style name="MainTheme" parent="MainTheme.Base">
  <item name="colorAccent">#1976D2</item>
</style>

This is my first real xamarin project, so any input is appreciated!

CodePudding user response：

Alright,

The system preferred theme overrides the different elements, hence why in emulated environment (Light Theme) the elements where rendered as expected and on physical phone (Dark Mode) not.

Since I wanted to have one style for all devices, the rather simple solution is adding following line in your Android Project MainAcitity.cs:

AppCompatDelegate.DefaultNightMode = AppCompatDelegate.ModeNightNo;