The UWP Notepad Project (Redux): Windows 10 Theme Support (Premium)

When I first started working with the Universal Windows Platform (UWP) several months ago, I ran into a weird problem: While the platform’s native support for Windows 10’s app modes---what most people erroneously call “themes”---is excellent, it doesn’t work so well for a document-based app like .NETpad. That is, we always want the textbox to be white with black text, even if the user has selected a Dark app mode.

But that’s not exactly how it works. When you switch from Light app mode to Dark app mode (in Windows 10 Settings > Personalization > Colors), the command bars turn black, which is nice. But there are situations in which the textbox is also black, which is never acceptable. This was more problematic in the original UWP version of .NETpad, where the textbox would change from white to black when the user opened a menu. And while it’s less problematic in the current command bar-based version, you still can see this happen sometimes. For example, when you mouse over the app when it doesn’t have the focus.

To my Neanderthal brain, this should be easy to fix: If I just specify the background color for the textbox, UWP will respect that and I’ll have nothing to worry about, right?

Wrong. As it turns out, there’s a whole new world of resource dictionaries and theme dictionaries that UWP developers need to learn about and deal with. Frustrated by this, I asked Rafael Rivera if he had an easy fix. And he gave me some code that manually ensures that the textbox will always be black text on a white background. It ain’t pretty---this isn’t the most elegant way to deal with this kind of thing---but it works.

If you want to see it in action, just open MainPage.xaml and switch the TextBox1 definition, which is currently a single line of code, to this two-line version:
<TextBox Grid.Row="1" Name="TextBox1" Background="White" AcceptsReturn="True" BorderThickness="0,1,0,1" BorderBrush="Black" TextChanged="TextBox1_TextChanged">
</TextBox>
Then, add the following code between TextBox1’s opening and closing tags:
<TextBox.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="TextControlBackgroundDisabled" Color="White" />
                <SolidColorBrush x:Key="TextControlForegroundDisabled" Color="Black" />
                <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="White" />
                <SolidColorBrush x:Key="TextControlBackground" Color="White" />
                <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="White" />
                <SolidColorBrush x:Key="TextControlForegroundPointerOver" Color="Black" />
            </ResourceDictionary...

Gain unlimited access to Premium articles.

With technology shaping our everyday lives, how could we not dig deeper?

Thurrott Premium delivers an honest and thorough perspective about the technologies we use and rely on everyday. Discover deeper content as a Premium member.

Tagged with

Share post

Please check our Community Guidelines before commenting

Windows Intelligence In Your Inbox

Sign up for our new free newsletter to get three time-saving tips each Friday

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

Thurrott © 2024 Thurrott LLC