Custom Title bar showing up white-ish in WinUI 3 - xaml

Question

I'm back with another problem in my browser that I'm working on. I made a custom title bar where the Tabs come into the title bar to create a more immersive experience. but all that "Immersive experience" is being ruined by this seemingly unfixable bug. what ive tried to do is change the background of the CustomDragRegion Element.
look at the title bar. its disgusting. someone help me. plss
heres the code:
<Window
x:Class="Microsoft_Edge_WebView2_Runtime_Application.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Microsoft_Edge_WebView2_Runtime_Application"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">
<Grid BorderBrush="Transparent" x:Name="Browser" Margin="0,0,0,0" Background="{ThemeResource SystemControlBackgroundAccentRevealBorderBrush}">
<TabView Margin="0, 0, 0, 0" x:Name="Tabv" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AddTabButtonClick="TabView_AddTabButtonClick" TabCloseRequested="TabView_TabCloseRequested">
<TabViewItem FontFamily="Gellix" x:Name="HomeTab" Header="Home" IsClosable="False">
<TabViewItem.IconSource>
<SymbolIconSource Symbol="Document" />
</TabViewItem.IconSource>
<Grid x:Name="TabContent" Margin="0,0,0,0" Background="#282828">
<WebView2 x:Name="WebView" Source="https://google.com" Margin="0,52,0,0"/>
<Grid Margin="0,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="666">
<TextBox KeyDown="AddressBar_KeyDown" FontFamily="Gellix" x:Name="AddressBar" HorizontalAlignment="Center" TextWrapping="NoWrap" Text="" VerticalAlignment="Center" Width="576" PlaceholderText="Search or type a URL here..." TextAlignment="Center" />
<Button Height="32" Width="40" x:Name="Home" Click="Button_Click_1">
<FontIcon FontFamily="Segoe Fluent Icons" Glyph="" Margin="-2,-1,-2,-1"/>
</Button>
<Button Height="32" Width="40" x:Name="Go" Margin="626,0,0,0" Click="Button_Click">
<FontIcon FontFamily="Segoe Fluent Icons" Glyph="" Margin="-2,-1,-2,-1"/>
</Button>
</Grid>
<Button x:Name="Refresh" Margin="0,10,10,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Button_Click" HorizontalAlignment="Right">
<FontIcon FontFamily="Segoe Fluent Icons" Glyph="" Margin="-2,-1,-2,-1"/>
</Button>
<Button x:Name="Backward" Margin="10,10,0,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Backward_Click">
<FontIcon FontFamily="Segoe Fluent Icons" Glyph="" Margin="-2,-1,-2,-1"/>
</Button>
<Button x:Name="Forward" Margin="53,10,0,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Forward_Click">
<FontIcon FontFamily="Segoe Fluent Icons" Glyph="" Margin="-2,-1,-2,-1"/>
</Button>
</Grid>
</TabViewItem>
<TabView.TabStripFooter>
<Grid Margin="0,0,0,0" x:Name="CustomDragRegion" Background="Transparent"/>
</TabView.TabStripFooter>
</TabView>
</Grid>
if you really need c# code then just comment. cuz I have only two lines of c# related to the title bar.

Answer 1

In my case, I was able set the tittle bar to the color defined in the xaml by setting the WindowCaptionsBackground and WindowCaptionsBackgroundDisabled properties to Transparent, as such:
App.xaml
<Application
...
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
<SolidColorBrush x:Key="WindowCaptionBackground">Transparent</SolidColorBrush>
<SolidColorBrush x:Key="WindowCaptionBackgroundDisabled">Transparent</SolidColorBrush>
</ResourceDictionary>
</Application.Resources>
</Application>
More info on customizing the tittle bar: https://learn.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=winui3