UWP apps – modify dark theme text element colors

In windows dark mode, when the cursor is placed in a textbox for example, the textbox background becomes white. Many peoples eyeballs are very upset about this. Some want to make their apps not do this.

Solution. It can be done completely in a bit of XAML. TLDR Notes below.

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <!-- Dark Theme Dictionary -->
            <ResourceDictionary x:Key="Dark">
                <!-- Define dark theme background color for TextBox -->
                <SolidColorBrush x:Key="TextControlBackground" Color="#FF111111"/>
                <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#FF111111"/>
                <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="#FF111111"/>
                <SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/>
                <SolidColorBrush x:Key="TextControlBorderBrushPointerOver" Color="White" Opacity="0.8"/>
                <SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="{ThemeResource SystemAccentColor}" Opacity="0.9"/>
                <Style TargetType="TextBox">
                    <Setter Property="FontFamily" Value="Segoe UI Light"/>
                </Style>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

It doesnt change the behavior of other modes such as light or high contrast. This XAML overrides the 3 states of the text element. Ignored, Looked at, and Greeted. The colors create a subtle but easily seen effect, by using the border color. Modify as required.

Place this XAML in the place that gives you the level of effect you want. Inside <TextBox></TextBox> to affect just that one, or inside <Page></Page> to affect all the text elements on that page, or inside <App></App> to affect the entire apps text elements. You will have to change the top tag to match. “TextControl…” resource names are being used, because the “TextBox…” versions didnt have the desired effects. The text Font is a lightweight version for dark mode – letters are separated better. If you use the theme resource “TextControlBorderBrushPointerOver” and not “TextControlBorderBrushFocused”, then it may also act on the focused state. Here the accent color chosen by the user, colors the border when focused.

Searching for the fix to this problem, was upsetting. Both AI and “the old way”, mostly failed to come up with a correct answer. In the end, phind.com won. Again. There were some wild and complicated not-working solutions out there! Maybe one day Microsoft will fix this UWP issue, but in some cases the white focused background can make sense. In the future, people may ask how to make a text element background white, when focused in dark mode. Just not me.