AnsweredAssumed Answered

Style to Follow Light/Dark Theme

Question asked by tchapin on Mar 28, 2018
Latest reply on Jun 5, 2018 by tchapin

Like • Show 0 Likes0
Comment • 11

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.

No one else has this question

Outcomes

11 Replies

UHarano-esristaff Mar 28, 2018 3:03 PM
Mark Correct
Correct Answer
Hi
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>
```
Like • Show 0 Likes0
Actions
- tchapin @ UHarano-esristaff on May 7, 2018 11:56 AM
  Mark Correct
  Correct Answer
  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.
  Like • Show 0 Likes0
  Actions
  - UHarano-esristaff @ tchapin on May 7, 2018 4:37 PM
    Mark Correct
    Correct Answer
    Hi Ted,
    If possible, can you please share your xaml with me?
    
    Thanks
    Uma
    Like • Show 0 Likes0
    Actions
    - tchapin @ UHarano-esristaff on May 8, 2018 11:18 AM
      Mark Correct
      Correct Answer
      Uma, how did you post the code snippet above?
      Like • Show 0 Likes0
      Actions
UHarano-esristaff May 8, 2018 9:54 PM
Mark Correct
Correct Answer
Hi Ted,
Click the "Expand Toolbar" button and select "Syntax Highlighter" from the "More" drop down.
Thanks
Uma
Like • Show 0 Likes0
Actions

tchapin May 23, 2018 8:17 AM

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>

Actions

cmacleod-esristaff May 23, 2018 10:25 AM
Mark Correct
Correct Answer
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).
Like • Show 0 Likes0
Actions
tchapin May 23, 2018 10:41 AM
Mark Correct
Correct Answer
Charles Macleod
Like • Show 0 Likes0
Actions
tchapin May 23, 2018 11:02 AM
Mark Correct
Correct Answer
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
Like • Show 0 Likes0
Actions
- cmacleod-esristaff @ tchapin on May 23, 2018 11:32 AM
  Mark Correct
  Correct Answer
  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
  Like • Show 0 Likes0
  Actions
tchapin Jun 5, 2018 11:23 AM
Mark Correct
Correct Answer
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.
Like • Show 0 Likes0
Actions

GeoNet

The Esri Community

Style to Follow Light/Dark Theme

Outcomes

Related Content

Recommended Content