I wanted to add two dark and light modes to my project using Material Design and the color palette section in the demo that I added to my project. The problem here is that some items such as the hint in the text boxes are black after changing the mode to dark and cannot be seen. Or, for example, the text of the combo boxes is not readable. Like the picture below:
Should I add another item to my project?
I saw the fields section in the program demo, but I didn't understand how these colors change. is as follows:
As it is clear in the above photo, the hint text box is not readable in dark mode
The code I wrote for this project is as follows:
<materialDesign:Card UniformCornerRadius="16" Margin="8" materialDesign:ElevationAssist.Elevation="Dp12" Grid.Row="0" Grid.Column="1" FlowDirection="RightToLeft">
<StackPanel Margin="8">
<Label Content="میزان حساسیت" Margin="8"/>
<Separator Margin="8"/>
<ComboBox Margin="8" Style="{StaticResource MaterialDesignFilledComboBox}">
<ComboBoxItem Content="ناحیه 1" IsSelected="True" />
<ComboBoxItem Content="ناحیه 2"/>
<ComboBoxItem Content="ناحیه 3"/>
<ComboBoxItem Content="ناحیه4"/>
</ComboBox>
<TextBox
MaxWidth="400" Margin="8"
materialDesign:HintAssist.Hint="مقدار حساسیت"
Style="{StaticResource MaterialDesignFilledTextBox}" />
</StackPanel>
</materialDesign:Card>
I refrain from putting the codes of the color palette section due to the amount of text, but I have not made any changes to the values or models of this section.
Thank you for your help
After searching for an answer and not getting a result about the problem in this case, I was able to fix the problem manually with the following solution and I came to a conclusion by using the binding and the library itself.
The solution ahead is the correct answer to the question.
I first created an object model using a global model from the ThemeSettingsViewModel.cs
(The setting view model theme is the same as the Material Design library and no changes have been made to it) like this:
public class GlobalSettingModel
{
public GlobalSettingModel()
{
}
private ThemeSettingsViewModel tsvm;
public ThemeSettingsViewModel mTSVM
{
get { return tsvm; }
set { tsvm = value; }
}
private static GlobalSettingModel mInstance;
public static GlobalSettingModel getInstance()
{
if (mInstance == null)
{
mInstance = new GlobalSettingModel();
}
return mInstance;
}
}
Then I wrote the following code in the desired class and implemented a converter to connect the theme to the color:
//Connect Data Context to Controls
public partial class ChartPageView : Page
{
public ChartPageView()
{
InitializeComponent();
...
uZoneName_ComboBox.DataContext = GlobalSettingModel.getInstance().mTSVM;
uThresholdValue_Text.DataContext = GlobalSettingModel.getInstance().mTSVM;
}
}
//Converter Implementation
public class ForegroundConverterForIcons : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value != null)
{
if ((bool)value)
{
return (Brush)Brushes.White;
}
else
{
return (Brush)Brushes.Black;
}
}
else
{
return (Brush)Brushes.Black;
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return DependencyProperty.UnsetValue;
}
}
Now we can do the following binding in our Xaml file:
//Using resources in the Page
<Page.Resources>
<ResourceDictionary>
<local:ForegroundConverterForIcons x:Key="ForegroundConverterForIcons" />
</ResourceDictionary>
</Page.Resources>
//using binding in Controls
<ComboBox Margin="8" Style="{StaticResource MaterialDesignFilledComboBox}" Name="uZoneName_ComboBox" Foreground="{Binding IsDarkTheme , Converter={StaticResource ForegroundConverterForIcons}}">
<ComboBoxItem Content="ناحیه 1" IsSelected="True" />
<ComboBoxItem Content="ناحیه 2"/>
<ComboBoxItem Content="ناحیه 3"/>
<ComboBoxItem Content="ناحیه4"/>
</ComboBox>
<TextBox
MaxWidth="400" Margin="8" Name="uThresholdValue_Text" Foreground="{Binding IsDarkTheme , Converter={StaticResource ForegroundConverterForIcons}}"
materialDesign:HintAssist.Hint="مقدار حساسیت"
Style="{StaticResource MaterialDesignFilledTextBox}" />
After performing the following steps, we can use the text box and other controls in a readable manner so that all items change color after changing the theme color. The display of the controls after changing the color is as follows: