DataGrid Header colours are not adapting to Dark Theme. (Are they not using ThemeResources?)

[mdtauk]

I'm submitting a...

Bug report (I searched for similar issues and did not find one)

Current behavior

The Header row does not change colours to adapt to the Dark Theme. Either System Wide Dark Theme, or when toggling the RequestedTheme in the Sample App

Hover state also does not display correctly

Expected behavior

The Header row should use an appropriate dark background with light foreground, whilst still offering differentiation with the rows below

Appropriate Hover states should be used as well.

Minimal reproduction of the problem with instructions

• Open the Toolkit Sample App
• Navigate to the DataGrid example
• Set system or toggle example to Dark Theme

Environment

Nuget Package(s): 

Package Version(s): 

Windows 10 Build Number:
- [ ] Creators Update (15063)
- [ ] Fall Creators Update (16299)
- [X] April 2018 Update (17134)
- [ ] Insider Build (build number: )

App min and target version:
- [ ] Creators Update (15063)
- [ ] Fall Creators Update (16299)
- [X] April 2018 Update (17134)
- [ ] Insider Build (xxxxx)

Device form factor:
- [X] Desktop
- [ ] Mobile
- [ ] Xbox
- [ ] Surface Hub
- [ ] IoT

Visual Studio 
- [ ] 2017 (version: )
- [ ] 2017 Preview (version: )

[nmetulev]

This seems to be another issue when the theme is changed in runtime. Seems to work when the app is launched in dark theme.

@WilliamABradley, any thoughts on this?

[mdtauk]

ThemeResources update at runtime if the Theme changes, but StaticResources do not. So if you are using the ControlTemplate's ResourceDictionary, make sure you are calling on and using ThemeResources. See if that helps

[harinikmsft]

@mdtauk is right, I do see a lot of resources specified as StaticResources which might be the source of the problem. @MSRegisB - can you take a look?

[lukeblevins]

Although progress has been made in fixing this, I noticed that the DataGrid still fails to utilize the color defined with:

<controls:DataGrid.ColumnHeaderStyle>
      <Style TargetType="controlsprimitives:DataGridColumnHeader">
            <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
      </Style>
</controls:DataGrid.ColumnHeaderStyle>

[RexfelisLOC]

The following does not work either to change the background. The foreground changes but the background does not.

<Style x:Key="ColumnHeaderStyle" TargetType="primitives:DataGridColumnHeader">
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="Background" Value="Green"/>
</Style>

[KexyBiscuit]

Also, when changing theme from Dark to System(on my system it's Light), all text rows are totally white, instead of changing into black, making them invisible.

[RBrid]

At this point, there is no bug when toggling the RequestedTheme in the Sample app from

• Light to System
• System to Light
• Sytem to Dark
• Light to Dark
• Dark to Light
  As stated by KexyBiscuit, a bug occurs when changing from Dark to System. Rows need to be re-rendered to fix their colors.

Regarding ApplicationPageBackgroundThemeBrush, I think it's #FF1D1D1D in Dark theme and #FFF4F4F4 in Light theme.
The DataGridColumnHeader uses the DataGridColumnHeaderBackgroundColor resource.

Using this should work:

    <Color x:Key="ApplicationPageBackgroundThemeColor">#FFF4F4F4</Color> for Light
    <Color x:Key="ApplicationPageBackgroundThemeColor">#FF1D1D1D</Color> for Dark

    <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="ApplicationPageBackgroundThemeColor"/>

[lukeblevins]

@RBrid I'm very happy to confirm that your method finally works! I'm now able to style the DataGrid headers to match my app's custom dark theme.

[harinikmsft]

Customer unblocked.