topic Re: Style to Follow Light/Dark Theme in ArcGIS Pro SDK Questions

Style to Follow Light/Dark Theme

TedChapin — Wed, 28 Mar 2018 20:45:45 GMT

Per the style guide:

ProGuide Style Guide · Esri/arcgis-pro-sdk Wiki · GitHub

I am using

to make the text white in the dark theme and black in the light theme. But the text is dark gray in both themes.

Furthermore, the doc says

Certain UI elements such as TextBlocks, radio buttons, etc do not need any styling. ArcGIS Pro will automatically style them using the "Default" style.

but if I leave out the style altogether the text is just black in both themes.

Re: Style to Follow Light/Dark Theme

UmaHarano — Sun, 12 Dec 2021 10:08:16 GMT

Can you please check if the code snippet below is in your xaml? Add this code snippet to your xaml so that these Dynamic resources will load in Design mode in Visual Studio. (The templates will automatically add this to the xaml)

<UserControl ...
      xmlns:extensions="clr-namespace:ArcGIS.Desktop.Extensions;assembly=ArcGIS.Desktop.Extensions"
      ...>
<UserControl.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
     <extensions:DesignOnlyResourceDictionary Source="pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml"/>
            </ResourceDictionary.MergedDictionaries>
      </ResourceDictionary>
 </UserControl.Resources>‍‍‍‍‍‍‍‍‍‍

Re: Style to Follow Light/Dark Theme

TedChapin — Mon, 07 May 2018 18:56:29 GMT

Thanks Uma Harano‌ I added the extensions you specified but the text is still gray if I add

Style="{DynamicResource Esri_TextBlockRegular}"

in both themes. It is black in both themes if I omit it. Looking for white in the dark theme and black in the light theme.

Re: Style to Follow Light/Dark Theme

UmaHarano — Mon, 07 May 2018 23:37:12 GMT

Hi Ted,

If possible, can you please share your xaml with me?

Thanks

Uma

Re: Style to Follow Light/Dark Theme

TedChapin — Tue, 08 May 2018 18:18:42 GMT

Uma, how did you post the code snippet above?

Re: Style to Follow Light/Dark Theme

UmaHarano — Wed, 09 May 2018 04:54:05 GMT

Hi Ted,

Click the "Expand Toolbar" button and select "Syntax Highlighter" from the "More" drop down.

Thanks

Uma

Re: Style to Follow Light/Dark Theme

TedChapin — Sun, 12 Dec 2021 10:08:19 GMT

Uma Harano‌

This is what I am seeing:

with this xaml:

<UserControl x:Class="ProjectSettingsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"              
             xmlns:extensions="clr-namespace:ArcGIS.Desktop.Extensions;assembly=ArcGIS.Desktop.Extensions"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <extensions:DesignOnlyResourceDictionary Source="pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml"/>
                
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <StackPanel Orientation="Vertical" Margin="5">
            <TextBlock Style="{DynamicResource Esri_TextBlockRegular}" Text="Project Number" VerticalAlignment="Center" />
            <TextBox Text="{Binding ProjectNumber, UpdateSourceTrigger=PropertyChanged}" Margin="10,2,0,2" Width="150" HorizontalAlignment="Left" />
            <TextBlock Style="{DynamicResource Esri_TextBlockRegular}" Text="Elevation Delta Tolerance (ft)" VerticalAlignment="Center"/>
            <TextBox Text="{Binding ElevationDeltaTolerance, UpdateSourceTrigger=PropertyChanged}" Margin="10,2,0,2" Width="150" HorizontalAlignment="Left" />
            <TextBlock Style="{DynamicResource Esri_TextBlockRegular}" Text="Proximity Delta Tolerance (ft)" VerticalAlignment="Center"/>
            <TextBox Text="{Binding ProximityDeltaTolerance, UpdateSourceTrigger=PropertyChanged}" Margin="10,2,0,2" Width="150" HorizontalAlignment="Left" />
            <TextBlock Style="{DynamicResource Esri_TextBlockRegular}">Config file</TextBlock>
            <TextBlock Text="{Binding ConfigFile}" Margin="10,2,4,2" Width="auto" HorizontalAlignment="Stretch" Style="{DynamicResource Esri_TextBlockRegular}" />
            <Button Height="25" Width="Auto"  Command="{Binding StatesButtonCommand}" HorizontalAlignment="Left" Margin="0, 2, 0, 2" ToolTip="Show a list of application conditions that drive ribbon enabled state">Button States</Button>
        </StackPanel>
    </Grid>
</UserControl>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Style to Follow Light/Dark Theme

CharlesMacleod — Sun, 12 Dec 2021 10:08:21 GMT

Ted, you have something else going on. When I put your xaml directly into a Dockpane it looks fine. I am thinking your UserControl is part of a larger UI on a dockpane?

If so, somewhere along the line, in one of your user control parents, I suspect the underlying foreground color for the default TextBlock style is getting overwritten or, less likely, the Foreground color itself (brush, technically speaking) is getting overwritten.

Paste this xaml into the bottom of your StackPanel and see how it looks on your UserControl...

<TextBlock Style="{DynamicResource Esri_TextBlockRegular}" Margin="0,10,0,0"
                 Text="Esri_TextStyleDefaultBrush" VerticalAlignment="Center" 
                 Foreground="{DynamicResource Esri_TextStyleDefaultBrush}"/>
      <Rectangle Width="200" Height="30" Fill="{DynamicResource Esri_TextStyleDefaultBrush}"/>

      <TextBlock Style="{DynamicResource Esri_TextBlockRegular}"
                 Text="Esri_Gray170_Brush" VerticalAlignment="Center" 
                 Foreground="{DynamicResource Esri_Gray170_Brush}"/>
      <Rectangle Width="200" Height="30" Fill="{DynamicResource Esri_Gray170_Brush}"/>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This is what I see...(the red box and arrow are mine - not in the xaml). See, on your dockpane, if the text and rectangle colors ~match~ your original text color (dim) or do not match (bright). I am thinking that both the text and boxes will look ok (bright).

Re: Style to Follow Light/Dark Theme

TedChapin — Wed, 23 May 2018 17:41:58 GMT

Charles Macleod‌

Re: Style to Follow Light/Dark Theme

TedChapin — Wed, 23 May 2018 18:02:13 GMT

Charles Macleod‌

This is a custom properties page, not a dock pane. The ViewModel inherits from Page, not DockPane. When I put your test TextBlocks and Rectangles on a DockPane it works as expected.

I followed this documentation to create the custom project settings page:

ProGuide Custom settings · Esri/arcgis-pro-sdk Wiki · GitHub

Re: Style to Follow Light/Dark Theme

CharlesMacleod — Wed, 23 May 2018 18:32:27 GMT

I cannot reproduce Ted. Somewhere the style or brush is getting overwritten. If you'd like me to debug you'll have to get the Add-in code to me

Re: Style to Follow Light/Dark Theme

TedChapin — Tue, 05 Jun 2018 18:23:52 GMT

Just closing this up. After some DM'ing, Charles Macleod‌ and I determined that due to the age of this project (1.3, 2016) it would be best to recreate the project from a new project template in Visual Studio. There must be some legacy stuff preventing the theme-switching styles from working.