Share via

Dark theme only partly working in MAUI

Jai Holloway 65 Reputation points
2026-05-13T07:38:09.18+00:00

Hi there

I am new to theming in MAUI and have read up on how to do it. You use AppThemeBinding and define two or more styles. I have Dark and Light.

For some reason Dark mode is only being partially applied.

Here is the xaml for my main page

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

         xmlns:controls="clr-namespace:TourGrosses.Controls"

         xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

         xmlns:vm="clr-namespace:TourGrosses.ViewModels"

         xmlns:models="clr-namespace:TourGrosses.Models"

         x:DataType="vm:MainPageViewModel"

         x:Class="TourGrosses.Views.MainPage"

         Title="{Binding Title}" Style="{AppThemeBinding Light={DynamicResource ContentPageBase}, Dark={DynamicResource ContentPageBaseDark}}">

<FlexLayout Direction="Column" AlignItems="Center" JustifyContent="SpaceEvenly">

    <telerik:RadBusyIndicator x:Name="BusyIndicator" Style="{AppThemeBinding Light={DynamicResource BusyIndicator}, Dark={DynamicResource BusyIndicatorDark}}"

                                   IsBusy="{Binding IsBusy}">

        <telerik:RadBusyIndicator.Content>

            <!--<StackLayout Padding="10,0,10,0" Spacing="0" VerticalOptions="Fill" >-->

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="{OnPlatform Android=45, iOS=30, WinUI=45, Default=30}"/>

                    <RowDefinition Height="{OnPlatform iOS=80,Android=80, WinUI=220, Default=144}"/>

                    <RowDefinition Height="{OnPlatform iOS=45,Android=30, WinUI=45, Default=30}"/>

                    <RowDefinition Height="*"/>

                </Grid.RowDefinitions>

                <Picker x:Name="DatePeriodPicker" 

                        Grid.Row="0" 

                        x:DataType="models:HomeMenuItem" 

                        ItemDisplayBinding="{Binding Title}" 

                        SelectedIndex="0" 

                        SelectedIndexChanged="DatePeriodPicker_SelectedIndexChanged" 

                        BackgroundColor="{AppThemeBinding Light={StaticResource backgroundColor}, Dark={StaticResource backgroundColorDark}}" 

                        TextColor="{AppThemeBinding Light={StaticResource TextPrimaryColor}, Dark={StaticResource TextPrimaryColorDark}}"></Picker>

                <StackLayout x:Name="myTableView" 

                            Grid.Row="1" 

                            Style="{AppThemeBinding Light={DynamicResource TableViewBase}, Dark={StaticResource TableViewBaseDark}}"

                            BindableLayout.ItemsSource="{Binding TourGrossResult}" >

                    <controls:TotalsControl 

                                NoShows="{Binding TourGrossResult.TotalShows, StringFormat='{0:N0}'}"

                                Attendance="{Binding TourGrossResult.TotalAttendance, StringFormat='{0:N0}'}"

                                Gross="{Binding TourGrossResult.TotalGrossString}"/>


                        

                </StackLayout>

                <Grid Grid.Row="2">

                    <controls:SortPickerControl x:Name="SortByControl" HeightRequest="{OnPlatform WinUI=50, Default=25}" HorizontalOptions="Center" Style="{AppThemeBinding Light={DynamicResource SortPickerControlStyle}, Dark={DynamicResource SortPickerControlStyleDark}}"/>

                </Grid>

                <telerik:RadTabView x:Name="tabView" Grid.Row="3" BackgroundColor="{AppThemeBinding Light={DynamicResource TabViewBackgroundColor}, Dark={DynamicResource TabViewBackgroundColorDark}}" MinimumHeightRequest="500">

                    <telerik:RadTabView.Items>

                        <telerik:TabViewItem HeaderText="Artist">

                            <telerik:TabViewItem.Content>

                                <StackLayout Orientation="Vertical" BackgroundColor="{AppThemeBinding Light={DynamicResource TableViewBase}, Dark={DynamicResource TableViewBaseDark}}">

                                    <RefreshView 

                                        IsRefreshing="{Binding IsRefreshing}"

                                        Command="{Binding Refresh}">

                                        <CollectionView x:Name="ArtistsView" 

                                                        Style="{AppThemeBinding Light={DynamicResource ListViewDetail}, Dark={DynamicResource ListViewDetailDark}}"

                                                        x:DataType="models:ArtistSummary"

                                                        SelectionChanged="ArtistsView_SelectionChanged"

                                                        SelectionMode="Single"

                                                        VerticalOptions="FillAndExpand">

                                        <!--Built in Cells-->

                                        <CollectionView.ItemTemplate>

                                            <DataTemplate x:DataType="models:ArtistSummary">

                                                <Grid>

                                                    <controls:ArtistSummaryItem Margin="0,0,0,5"

                                                        Artist="{Binding Artist}" 

                                                        NoShows="{Binding NoShows, StringFormat='{0:N0}'}"

                                                        Attendance="{Binding TotalAttendance, StringFormat='{0:N0}'}"

                                                        Gross="{Binding TotalGrossString}" 

                                                        PerHead="{Binding PerHeadString}"

                                                        ProductsSold="{Binding ProductsSoldString}"/>

                                                    </Grid>

                                                </DataTemplate>

                                            </CollectionView.ItemTemplate>

                                        </CollectionView>

                                    </RefreshView>


                                    

                                </StackLayout>

                            </telerik:TabViewItem.Content>

                        </telerik:TabViewItem>

                        <telerik:TabViewItem HeaderText="Region" >

                            <telerik:TabViewItem.Content>

                                <StackLayout Orientation="Vertical" 

                                             BackgroundColor="{AppThemeBinding Light={DynamicResource TableViewBase}, Dark={DynamicResource TableViewBaseDark}}">

                                    <RefreshView IsRefreshing="{Binding IsRefreshing}"

                                                 Command="{Binding Refresh}">

                                        <CollectionView x:Name="RegionsView" 

                                                        Style="{AppThemeBinding Light={DynamicResource ListViewDetail}, Dark={DynamicResource ListViewDetailDark}}"

                                                        x:DataType="models:RegionSummmary"

                                                        SelectionChanged="RegionsView_SelectionChanged"

                                                        SelectionMode="Single"

                                                        VerticalOptions="FillAndExpand"

                                            >

                                            <!--Built in Cells-->

                                            <CollectionView.ItemTemplate>

                                                <DataTemplate x:DataType="models:RegionSummmary">

                                                    <Grid>

                                                        <controls:ArtistSummaryItem Margin="0,0,0,5"

                                                            Artist="{Binding RegionName}" 

                                                            NoShows="{Binding NoShows, StringFormat='{0:N0}'}"

                                                            Attendance="{Binding TotalAttendance, StringFormat='{0:N0}'}"

                                                            Gross="{Binding TotalGrossString}" 

                                                            PerHead="{Binding PerHeadString}"

                                                            ProductsSold="{Binding ProductSoldString}"/>

                                                    </Grid>

                                                </DataTemplate>

                                            </CollectionView.ItemTemplate>

                                        </CollectionView>

                                    </RefreshView>

                                </StackLayout>

                            </telerik:TabViewItem.Content>

                        </telerik:TabViewItem>

                        <telerik:TabViewItem HeaderText="Country" >

                            <telerik:TabViewItem.Content>

                                <StackLayout Orientation="Vertical" BackgroundColor="{AppThemeBinding Light={DynamicResource TabViewBackgroundColor}, Dark={DynamicResource TabViewBackgroundColorDark}}">

                                    <RefreshView IsRefreshing="{Binding IsRefreshing}"

                                                 Command="{Binding Refresh}">

                                        <CollectionView x:Name="CountriesView" Style="{AppThemeBinding Light={DynamicResource ListViewDetail}, Dark={DynamicResource ListViewDetailDark}}"

                                                        x:DataType="models:CountrySummary"

                                                        SelectionChanged="CountriesView_SelectionChanged"

                                                        SelectionMode="Single"

                                                        VerticalOptions="FillAndExpand"

                                            >

                                            <!--Built in Cells-->

                                            <CollectionView.ItemTemplate>

                                                <DataTemplate x:DataType="models:CountrySummary">

                                                    <Grid>

                                                        <controls:ArtistSummaryItem Margin="0,0,0,5"

                                                            Artist="{Binding Country}" 

                                                            NoShows="{Binding NoShows, StringFormat='{0:N0}'}"

                                                            Attendance="{Binding TotalAttendance, StringFormat='{0:N0}'}"

                                                            Gross="{Binding TotalGrossString}" 

                                                            PerHead="{Binding PerHeadString}"

                                                            ProductsSold="{Binding ProductSoldString}"/>

                                                    </Grid>

                                                </DataTemplate>

                                            </CollectionView.ItemTemplate>

                                        </CollectionView>

                                    </RefreshView>

                                </StackLayout>

                            </telerik:TabViewItem.Content>

                        </telerik:TabViewItem>

                        <telerik:TabViewItem HeaderText="Genre" >

                            <telerik:TabViewItem.Content>

                                <StackLayout Orientation="Vertical" BackgroundColor="{AppThemeBinding Light={DynamicResource TabViewBackgroundColor}, Dark={DynamicResource TabViewBackgroundColorDark}}">

                                    <RefreshView IsRefreshing="{Binding IsRefreshing}"

                                                 Command="{Binding Refresh}">

                                        <CollectionView x:Name="GenresView" Style="{AppThemeBinding Light={DynamicResource ListViewDetail}, Dark={DynamicResource ListViewDetailDark}}"

                                                        x:DataType="models:GenreSummary"

                                                        SelectionChanged="GenresView_SelectionChanged"

                                                        SelectionMode="Single"

                                                        VerticalOptions="FillAndExpand">

                                            <CollectionView.ItemTemplate>

                                            <DataTemplate x:DataType="models:GenreSummary">

                                                    <Grid>

                                                        <controls:ArtistSummaryItem  Margin="0,0,0,5"

                                                            Artist="{Binding Genre}" 

                                                            NoShows="{Binding NoShows, StringFormat='{0:N0}'}"

                                                            Attendance="{Binding TotalAttendance, StringFormat='{0:N0}'}"

                                                            Gross="{Binding TotalGrossString}" 

                                                            PerHead="{Binding PerHeadString}"

                                                            ProductsSold="{Binding ProductSoldString}"/>

                                                    </Grid>

                                                </DataTemplate>

                                            </CollectionView.ItemTemplate>

                                        </CollectionView>

                                    </RefreshView>

                                </StackLayout>

                            </telerik:TabViewItem.Content>

                        </telerik:TabViewItem>

                    </telerik:RadTabView.Items>

                </telerik:RadTabView>

                <!--</StackLayout>-->

            </Grid>

        </telerik:RadBusyIndicator.Content>

        <telerik:RadBusyIndicator.BusyContent>

            <Label HorizontalOptions="Center"

                   Text="Loading..."

                   VerticalOptions="Center" Style="{AppThemeBinding Light={DynamicResource RadBusyIndicatorGlobal}, Dark={DynamicResource RadBusyIndicatorGlobalDark}}" />

        </telerik:RadBusyIndicator.BusyContent> 

    </telerik:RadBusyIndicator>

</FlexLayout>
```</ContentPage>

And the theme

<?xml version="1.0" encoding="utf-8" ?>

<ResourceDictionary  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

```xml
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

         xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

         x:Class="TourGrosses.Styles.DarkMode"

         Source="DefaultTheme.xaml">

<Color x:Key="backgroundColorDark">#FF000000</Color>

<Color x:Key="TextPrimaryColorDark">#B0FFFFFF</Color>

<Color x:Key="TextSecondaryColorDark">#B0FFFFFF</Color>

<Color x:Key="TextTernaryColorDark">#C8C8C8</Color>

<!--<Color x:Key="NavigationPrimary">#2196F3</Color>-->

<Color x:Key="NavigationPrimaryDark">Black</Color>

<Color x:Key="LabelColorDark">#D9D9D9</Color>

<Color x:Key="ValueLabel1Dark">#9DC3E6</Color>

<Color x:Key="GlobalRedDark">#BF2026</Color>

<!--<Color x:Key="NavigationPrimary">Black</Color>-->

<Style TargetType="NavigationPage">

    <Setter Property="BarBackgroundColor" Value="{StaticResource NavigationPrimaryDark}" />

    <Setter Property="BarTextColor" Value="White" />

</Style>

<Style TargetType="Label" x:Key="ValueHeaderDark">

    <Setter Property="TextColor" Value="{StaticResource LabelColorDark}"/>

</Style>

<!--ArtistSummaryItem Control styles -->

<Style TargetType="Label" x:Key="ArtistSummaryLabelDark">

    <Setter Property="TextColor" Value="{DynamicResource LabelColorDark}"/>

</Style>

<Style TargetType="Label" x:Key="ArtistSummaryValueDark">

    <Setter Property="TextColor" Value="{DynamicResource ValueLabel1Dark}"/>

</Style>

<Style TargetType="Label" x:Key="ArtistSummaryTitleDark">

    <Setter Property="BackgroundColor" Value="#003E52"/>

    <Setter Property="TextColor" Value="#EDDF98"/>

    <Setter Property="FontAttributes" Value="Bold"/>

</Style>

<Color x:Key="ArtistSummaryItemBackgroundDark">Black</Color>

<!-- ListView for Main Pages -->

<Style TargetType="CollectionView" x:Key="ListViewDetailDark">

    <Setter Property="Margin" Value="5,5,5,5"/>

    <Setter Property="BackgroundColor" Value="{DynamicResource TabViewBackgroundColorDark}"/>

</Style>



<!--ArtistTourDetailItem Control styles -->

<Color x:Key="ArtistTourDetailBackgroundDark">Black</Color>





<!--TourGrossSummaryItem Control styles -->

<Style TargetType="Label" x:Key="TourGrossSummaryLabelDark">

    <Setter Property="TextColor" Value="{DynamicResource LabelColorDark}"/>

</Style>

<Style TargetType="Label" x:Key="TourGrossSummaryValueDark">

    <Setter Property="TextColor" Value="{DynamicResource ValueLabel1Dark}"/>

</Style>

<Style TargetType="Label" x:Key="TourGrossSummaryTotalDark">

    <Setter Property="TextColor" Value="#FFAE5F"/>

    <Setter Property="FontAttributes" Value="Bold"/>

</Style>

<Style TargetType="StackLayout" x:Key="TourGrossSummaryBackgroundDark">

    <!--<Setter Property="BackgroundColor" Value="#48484A"/>-->

    <Setter Property="BackgroundColor" Value="Black"/>

</Style>

<!--TourGrossDetailItem Control styles -->

<Style TargetType="Label" x:Key="TourGrossDetailItemLabelDark">

    <Setter Property="TextColor" Value="{DynamicResource LabelColorDark}"/>

</Style>

<Style TargetType="Label" x:Key="TourGrossDetailItemValueDark">

    <Setter Property="TextColor" Value="{DynamicResource ValueLabel1Dark}"/>

    <!--<Setter Property="TextColor" Value="{StaticResource GlobalRed}"/>-->

    <Setter Property="FontAttributes" Value="Bold"/>

</Style>

<!--TourProductItem Control styles -->

<Style TargetType="Label" x:Key="TourProductItemLabelDark">

    <Setter Property="TextColor" Value="{DynamicResource LabelColorDark}"/>

</Style>

<Style TargetType="Label" x:Key="TourProductItemValueDark">

    <Setter Property="TextColor" Value="{DynamicResource ValueLabel1Dark}"/>

    <Setter Property="FontAttributes" Value="Bold"/>

</Style>



<!--Default ContentPage styles -->

<Style TargetType="ContentPage" x:Key="ContentPageBaseDark" ApplyToDerivedTypes="True">

    <Setter Property="BackgroundColor" Value="#48484A" />

</Style>

<!--Default ContentView styles -->

<Style TargetType="ContentView" x:Key="ContentViewBaseDark">

    <!--<Setter Property="BackgroundColor" Value="#48484A" />-->

    <Setter Property="BackgroundColor" Value="Transparent" />

</Style>



<!--TourGrossDetailPage styles -->

<Style TargetType="ContentPage" x:Key="TourGrossDetailPageDark" ApplyToDerivedTypes="True">

    <Setter Property="BackgroundColor" Value="{DynamicResource backgroundColorDark}" />

</Style>

<!--ArtistsPage styles -->

<Style TargetType="Label" x:Key="ArtistListValueDark">

    <Setter Property="TextColor" Value="{StaticResource LabelColorDark}" />

</Style>

<Style TargetType="ContentPage" x:Key="ArtistsContentPageDark" ApplyToDerivedTypes="True">

    <Setter Property="BackgroundColor" Value="{DynamicResource backgroundColorDark}" />

</Style>



<!--RadBusyIndicator styles -->

<Style TargetType="Label" x:Key="RadBusyIndicatorGlobalDark">

    <Setter Property="TextColor" Value="{DynamicResource LabelColorDark}"/>

</Style>

<Style TargetType="telerik:RadBusyIndicator" x:Key="BusyIndicatorDark">

    <Setter Property="AnimationContentHeightRequest" Value="100"/>

    <Setter Property="AnimationContentWidthRequest" Value="100"/>

    <Setter Property="AnimationType" Value="Animation8"/>

    <Setter Property="AnimationContentColor" Value="#FFAE5F"/>

</Style>

<!--RadSegmentedControl styles -->

<Style TargetType="telerik:RadSegmentedControl" x:Key="SortPickerControlStyleDark">

    <Setter Property="SegmentBackgroundColor" Value="Black"/>

    <Setter Property="SegmentTextColor" Value="White"/>

    <Setter Property="SelectedSegmentTextColor" Value="White"/>

    <Setter Property="SelectedSegmentBackgroundColor" Value="#AEAEB2"/>

    <!--<Setter Property="BackgroundColor" Value="Orange"/>-->

</Style>

<!--TotalsControl styles -->

<Style TargetType="Label" x:Key="TotalsControlLabelDark">

    <Setter Property="TextColor" Value="{DynamicResource LabelColorDark}"/>

</Style>

<Style TargetType="Label" x:Key="TotalsControlValueDark">

    <Setter Property="TextColor" Value="#FFAE5F"/>

    <!--<Setter Property="TextColor" Value="{DynamicResource ValueLabel1}"/>-->

    <Setter Property="FontAttributes" Value="Bold"/>

</Style>

<Style TargetType="Grid" x:Key="TotalsControlGridDark">

    <Setter Property="BackgroundColor" Value="#48484A"/>

</Style>

<!--TableViewBase styles -->

<Style TargetType="StackLayout" x:Key="TableViewBaseDark">

    <Setter Property="BackgroundColor" Value="#48484A"/>

</Style>

<!--TabbedPage styles -->

<Style TargetType="TabbedPage" x:Key="TabbedPageBaseDark">

    <Setter Property="SelectedTabColor" Value="#9DC3E6"/>

    <!--<Setter Property="SelectedTabColor" Value="Orange"/>-->

</Style>

<!--RadTabView Styles -->

<Color x:Key="TabViewBackgroundColorDark">#48484A</Color>

<!--LoginPage Styles -->

<telerik:RadBorder x:Key="EntryBorderStyleDark" 

                          BorderColor="#FFAE5F"

                          BorderThickness="1"

                          CornerRadius="5"/>

<Style TargetType="telerik:RadEntry" x:Key="LoginNameEntryDark">

    <Setter Property="HeightRequest" Value="50"/>

    <Setter Property="TextColor" Value="#FFAE5F"/>

    <!--<Setter Property="BorderStyle" Value="{DynamicResource EntryBorderStyle}"/>-->

</Style>

<!--TourDetailPage Styles -->

<Style TargetType="Label" x:Key="WarningLabelDark">

    <Setter Property="TextColor" Value="#FFAE5F"/>

</Style>

<!--AboutPage Styles -->

<Style TargetType="Image" x:Key="AboutPageImageDark">

    <Setter Property="Source" Value="globallogodarkmode.png"/>

    <Setter Property="VerticalOptions" Value="Center"/>

    <Setter Property="HeightRequest" Value="128"/>

    <Setter Property="Margin" Value="0,10,0,0"/>

</Style>

<Style TargetType="Label" x:Key="AboutPageAppNameDark">

    <Setter Property="TextColor" Value="#FFAE5F"/>

    <Setter Property="FontSize" Value="22"/>

    <Setter Property="FontAttributes" Value="Bold"/>

</Style>

<Style TargetType="Label" x:Key="AboutPageTextDark">

    <Setter Property="TextColor" Value="{DynamicResource LabelColorDark}"/>

</Style>

<Style TargetType="Label" x:Key="ValueLabelDark">

    <Setter Property="TextColor" Value="{StaticResource GlobalRedDark}"/>

    <Setter Property="FontAttributes" Value="Bold"/>

</Style>



<Style TargetType="Label" x:Key="TotalsLabelDark">

    <Setter Property="TextColor" Value="DarkRed"/>

    <Setter Property="FontAttributes" Value="Bold"/>

    <Setter Property="FontSize" Value="Small"/>

</Style>

<Style TargetType="Label" x:Key="DetailPageLabelDark">

    <Setter Property="TextColor" Value="White"/>

    <Setter Property="BackgroundColor" Value="#CC3333"/>

    <Setter Property="FontAttributes" Value="Bold"/>

    <Setter Property="FontSize" Value="Medium"/>

    <Setter Property="Margin" Value="10"/>

    <Setter Property="LineHeight" Value="1.2"/>

    <Setter Property="VerticalTextAlignment" Value="Center"/>

</Style>

<Style TargetType="Label" x:Key="TableCellTextDark">

    <Setter Property="FontSize" Value="Small"></Setter>

</Style>

<Style TargetType="Label" x:Key="TableCellDetailDark">

    <Setter Property="FontAttributes" Value="Bold"></Setter>

    <Setter Property="FontSize" Value="Medium"></Setter>

</Style>

<Style TargetType="StackLayout" x:Key="DetailStackLayoutDark">

    <Setter Property="Padding" Value="10"/>

    <Setter Property="Spacing" Value="0"/>

    <Setter Property="Orientation" Value="Vertical"/>

</Style>
```</ResourceDictionary>Can you see any reason why the dark theme won't fullly work?
Developer technologies | .NET | .NET Multi-platform App UI

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Nancy Vo (WICLOUD CORPORATION) 4,190 Reputation points Microsoft External Staff Moderator
    2026-05-13T10:49:53.18+00:00

    Hello @Jai Holloway ,

    Thanks for your question.

    I recommend some following steps:

    1. Replace DynamicResource with StaticResource inside AppThemeBinding.

    In MainPage.xaml, change every occurrence of DynamicResource inside AppThemeBinding:

    You can refer to these following code examples:

    Replace this:

    Style="{AppThemeBinding Light={DynamicResource ContentPageBase}, Dark={DynamicResource ContentPageBaseDark}}"

Style="{AppThemeBinding Light={DynamicResource BusyIndicator}, Dark={DynamicResource BusyIndicatorDark}}"

Style="{AppThemeBinding Light={DynamicResource ListViewDetail}, Dark={DynamicResource ListViewDetailDark}}"

Style="{AppThemeBinding Light={DynamicResource RadBusyIndicatorGlobal}, Dark={DynamicResource RadBusyIndicatorGlobalDark}}"

BackgroundColor="{AppThemeBinding Light={DynamicResource TabViewBackgroundColor}, Dark={DynamicResource TabViewBackgroundColorDark}}"

Style="{AppThemeBinding Light={DynamicResource SortPickerControlStyle}, Dark={DynamicResource SortPickerControlStyleDark}}"

BackgroundColor="{AppThemeBinding Light={DynamicResource TableViewBase}, Dark={DynamicResource TableViewBaseDark}}"

BackgroundColor="{AppThemeBinding Light={DynamicResource TabViewBackgroundColor}, Dark={DynamicResource TabViewBackgroundColorDark}}"

    With this:

    Style="{AppThemeBinding Light={StaticResource ContentPageBase}, Dark={StaticResource ContentPageBaseDark}}"

Style="{AppThemeBinding Light={StaticResource BusyIndicator}, Dark={StaticResource BusyIndicatorDark}}"

Style="{AppThemeBinding Light={StaticResource ListViewDetail}, Dark={StaticResource ListViewDetailDark}}"

Style="{AppThemeBinding Light={StaticResource RadBusyIndicatorGlobal}, Dark={StaticResource RadBusyIndicatorGlobalDark}}"

BackgroundColor="{AppThemeBinding Light={StaticResource TabViewBackgroundColor}, Dark={StaticResource TabViewBackgroundColorDark}}"

Style="{AppThemeBinding Light={StaticResource SortPickerControlStyle}, Dark={StaticResource SortPickerControlStyleDark}}"

BackgroundColor="{AppThemeBinding Light={StaticResource TableViewBase}, Dark={StaticResource TableViewBaseDark}}"

BackgroundColor="{AppThemeBinding Light={StaticResource TabViewBackgroundColor}, Dark={StaticResource TabViewBackgroundColorDark}}"
    1. Fix the inconsistent mix of DynamicResource and StaticResource.

    Both Light= and Dark= sides must use the same resource type.

    In MainPage.xaml, change this line:

    Style="{AppThemeBinding Light={DynamicResource TableViewBase}, Dark={StaticResource TableViewBaseDark}}"

    To:

    Style="{AppThemeBinding Light={StaticResource TableViewBase}, Dark={StaticResource TableViewBaseDark}}"
    1. Remove Source= from ResourceDictionary that has x:Class=.

    In DarkMode.xaml, you should not use Source= and x:Class= on the same element.

    Change this:

    <ResourceDictionary
    x:Class="TourGrosses.Styles.DarkMode"
    Source="DefaultTheme.xaml">

    To:

    <ResourceDictionary
    x:Class="TourGrosses.Styles.DarkMode">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="DefaultTheme.xaml"/>
    </ResourceDictionary.MergedDictionaries>
    1. Add AppThemeBinding inside custom controls.

    Your dark styles for custom controls are defined in DarkMode.xaml but never connected to the actual controls. Open each custom control XAML and apply AppThemeBinding to each Label:

    For ex: in ArtistSummaryItem.xaml:

    <Label Text="{Binding Artist}"
       Style="{AppThemeBinding
           Light={StaticResource ArtistSummaryLabel},
           Dark={StaticResource ArtistSummaryLabelDark}}"/>

    I tested by creating a simple project and it works as expected.

    enter image description here

    I hope this addresses your question. If this response was helpful, please consider following the guidance to provide feedback.

    Was this answer helpful?

    0 comments
  2. Q&A Assist
    2026-05-13T07:38:44.3833333+00:00
    AI generated content. This question contains an answer created with AI from Q&A Assist. Learn more

    Dark theme resources in .NET MAUI only apply correctly when they are defined and consumed in a way that MAUI’s theming system understands. From the provided XAML and resource dictionary, there are a few likely causes for “partially” applied dark mode:

    1. Mix of StaticResource and DynamicResource in AppThemeBinding
      AppThemeBinding is designed to switch values automatically when the system theme changes. The documentation shows it being used directly with literal values or with resources, and notes that resources can be consumed via StaticResource or DynamicResource inside AppThemeBinding:
    TextColor="{AppThemeBinding Light=Green, Dark=Red}"
Image Source="{AppThemeBinding Light=lightlogo.png, Dark=darklogo.png}"

    and when using resources:

    • Resources in a ResourceDictionary can be consumed with StaticResource or DynamicResource inside AppThemeBinding.

    However, for runtime theme switching, any resource that must update when the theme changes must ultimately be resolved dynamically. If a value is resolved once and not tracked, it will not update when the theme changes.

    In the page XAML, some bindings use:

    Style="{AppThemeBinding Light={DynamicResource TableViewBase}, Dark={StaticResource TableViewBaseDark}}"

    This mixes DynamicResource and StaticResource. The dark style here is resolved statically and may not update when the theme changes at runtime, leading to partial theming.

    Action: Use DynamicResource for both light and dark entries where theme changes at runtime are expected, for example:

    Style="{AppThemeBinding Light={DynamicResource TableViewBase}, Dark={DynamicResource TableViewBaseDark}}"

    Similarly, ensure all theme-dependent properties (styles, colors) that must react to theme changes use DynamicResource inside AppThemeBinding.

    1. Ensure theme dictionaries are correctly defined and merged
      The theming model in .NET MAUI expects:
    • Themes defined as ResourceDictionary objects with identical keys for light and dark resources.
    • A default theme merged into Application.Resources in App.xaml.

    From the theming guidance:

    • A theme is a ResourceDictionary with color and style resources.
    • A default theme is set by merging the theme dictionary into the app-level ResourceDictionary.

    Example:

    <Application.Resources>
    <ResourceDictionary Source="Themes/LightTheme.xaml" />
</Application.Resources>

    Also, each ResourceDictionary requires a code-behind file that calls InitializeComponent so that the CLR object for the theme can be created at runtime.

    If the dark theme dictionary (DarkMode.xaml) is not properly merged or its code-behind does not call InitializeComponent, some resources may not be available or may fall back to the default (light) theme, causing partial dark mode.

    Actions:

    • Verify that both light and dark theme dictionaries are defined as ResourceDictionary with matching keys.
    • Ensure each theme dictionary has a code-behind file that calls InitializeComponent.
    • Confirm that the default theme is merged in App.xaml and that the dark theme is applied via UserAppTheme or AppThemeBinding as per the guidance.
    1. Use Application.UserAppTheme or system theme correctly
      To force the app into dark mode regardless of system theme, use:
    Application.Current.UserAppTheme = AppTheme.Dark;

    If UserAppTheme is left as Unspecified, the app follows the system theme. If some parts of the UI are using AppThemeBinding and others are hard-coded or using non-theme-aware resources, only the theme-aware parts will change.

    Action:

    • Ensure that all UI elements that should change with dark mode use either AppThemeBinding, SetAppThemeColor, or SetAppTheme<T>.
    • Avoid hard-coded colors or styles for elements that are expected to participate in theming.
    1. Check that all keys used in AppThemeBinding exist in both themes
      AppThemeBinding relies on the specified resources existing. If a dark resource key (e.g., TableViewBaseDark, TabViewBackgroundColorDark) is missing or not merged, MAUI may fall back to the light resource or default values.

    Action:

    • Verify that every ...Dark key used in XAML is defined in the dark theme dictionary and that the corresponding light key exists in the light theme dictionary.
    1. Use extension methods for C#-created controls
      If some controls are created in code-behind or C#, they should use SetAppThemeColor or SetAppTheme<T> so they respond to theme changes:
    label.SetAppThemeColor(Label.TextColorProperty, Colors.Green, Colors.Red);
image.SetAppTheme<FileImageSource>(Image.SourceProperty, "lightlogo.png", "darklogo.png");

    If such controls are not theme-aware, they will remain in light mode while XAML-defined controls switch, again appearing as “partial” dark mode.

    Summary of likely fix for the provided XAML:

    • Replace any Dark={StaticResource ...} inside AppThemeBinding with Dark={DynamicResource ...} where runtime switching is required.
    • Ensure both light and dark theme dictionaries are correctly defined, merged, and have code-behind calling InitializeComponent.
    • Confirm that all theme-dependent keys exist in both themes and that UserAppTheme or system theme is set as intended.

    References:

    Was this answer helpful?

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.