Dark Theme For Graph Control (#1106)

* Added dark them to graph control, started dark theme for the controls on the graph

* Dark theme for graphing mode updated to use event model, diagnostics added, cleaned up code that wasn't needed

* Updated prepare-release-internalonly.yaml internal package version

* Updated Theme Settings properties, removed version change, other small changes from PR feedback>

* Updated the localSettings check and updated the GraphTheme event to send bool instead of string

* Updated the equation line color to change with the graph theme

* Rebased onto master and issues created during the rebase

* Updates per code review feedback

* Update settings properties to just have IsMatchAppTheme property and updated the high contrast settings for the graph control

* Match version to current in master

* Updated per PR feedback

* Fix resetting the m_lastLineColorIndex to only happen when reassignColors is true

* Changed second if to else if in the OnPropertyChanged method

* fixed control button and equation line colors

src/CalcViewModel/Common/TraceLogger.cpp

@@ -41,6 +41,7 @@ namespace CalculatorApp
     constexpr auto EVENT_NAME_VARIABLE_CHANGED = L"VariableChanged";
     constexpr auto EVENT_NAME_VARIABLE_SETTING_CHANGED = L"VariableSettingChanged";
     constexpr auto EVENT_NAME_GRAPH_SETTINGS_CHANGED = L"GraphSettingsChanged";
+    constexpr auto EVENT_NAME_GRAPH_THEME = L"GraphTheme";
 
     constexpr auto EVENT_NAME_EXCEPTION = L"Exception";
 
@@ -303,12 +304,22 @@ namespace CalculatorApp
         TraceLoggingCommon::GetInstance()->LogLevel2Event(StringReference(EVENT_NAME_VARIABLE_SETTING_CHANGED), fields);
     }
 
-    void TraceLogger::LogGraphSettingsChanged(GraphSettingsType settingType)
+    void TraceLogger::LogGraphSettingsChanged(GraphSettingsType settingType, String ^ settingValue)
     {
         auto fields = ref new LoggingFields();
         fields->AddString(StringReference(CALC_MODE), StringReference(GRAPHING_MODE));
         fields->AddInt16(L"SettingType", static_cast<int16>(settingType));
+        fields->AddString(L"SettingValue", settingValue);
 
         TraceLoggingCommon::GetInstance()->LogLevel2Event(StringReference(EVENT_NAME_GRAPH_SETTINGS_CHANGED), fields);
     }
+
+    void TraceLogger::LogGraphTheme(String ^ graphTheme)
+    {
+        auto fields = ref new LoggingFields();
+        fields->AddString(StringReference(CALC_MODE), StringReference(GRAPHING_MODE));
+        fields->AddString(L"GraphTheme", graphTheme);
+
+        TraceLoggingCommon::GetInstance()->LogLevel2Event(StringReference(EVENT_NAME_GRAPH_THEME), fields);
+    }
 }

src/CalcViewModel/Common/TraceLogger.h

@@ -27,7 +27,8 @@ namespace CalculatorApp
     public enum class GraphSettingsType
     {
         Grid,
-        TrigUnits
+        TrigUnits,
+        Theme
     };
 
     public enum class GraphButton
@@ -73,7 +74,8 @@ namespace CalculatorApp
         void LogGraphLineStyleChanged(LineStyleType style);
         void LogVariableChanged(Platform::String ^ inputChangedType, Platform::String ^ variableName);
         void LogVariableSettingsChanged(Platform::String ^ setting);
-        void LogGraphSettingsChanged(GraphSettingsType settingsType);
+        void LogGraphSettingsChanged(GraphSettingsType settingsType, Platform::String ^ settingValue);
+        void LogGraphTheme(Platform::String ^ graphTheme);
         internal:
         void LogStandardException(CalculatorApp::Common::ViewMode mode, std::wstring_view functionName, _In_ const std::exception& e);
         void LogPlatformException(CalculatorApp::Common::ViewMode mode, std::wstring_view functionName, _In_ Platform::Exception ^ e);

src/CalcViewModel/GraphingCalculator/EquationViewModel.cpp

@@ -33,7 +33,7 @@ namespace CalculatorApp::ViewModel
     {
     }
 
-    EquationViewModel::EquationViewModel(Equation ^ equation, int functionLabelIndex, Windows::UI::Color color)
+    EquationViewModel::EquationViewModel(Equation ^ equation, int functionLabelIndex, Windows::UI::Color color, int colorIndex)
         : m_AnalysisErrorVisible{ false }
         , m_FunctionLabelIndex{ functionLabelIndex }
         , m_KeyGraphFeaturesItems{ ref new Vector<KeyGraphFeaturesItem ^>() }
@@ -46,6 +46,7 @@ namespace CalculatorApp::ViewModel
 
         GraphEquation = equation;
         LineColor = color;
+        LineColorIndex = colorIndex;
         IsLineEnabled = true;
     }
 

src/CalcViewModel/GraphingCalculator/EquationViewModel.h

@@ -41,12 +41,13 @@ public
     ref class EquationViewModel sealed : public Windows::UI::Xaml::Data::INotifyPropertyChanged
     {
     public:
-        EquationViewModel(GraphControl::Equation ^ equation, int functionLabelIndex, Windows::UI::Color color);
+        EquationViewModel(GraphControl::Equation ^ equation, int functionLabelIndex, Windows::UI::Color color, int colorIndex);
 
         OBSERVABLE_OBJECT();
         OBSERVABLE_PROPERTY_R(GraphControl::Equation ^, GraphEquation);
         OBSERVABLE_PROPERTY_RW(int, FunctionLabelIndex);
         OBSERVABLE_PROPERTY_RW(bool, IsLastItemInList);
+        PROPERTY_RW(int, LineColorIndex);
 
         property Platform::String ^ Expression
         {

src/CalcViewModel/GraphingCalculator/GraphingSettingsViewModel.cpp

@@ -10,6 +10,7 @@ using namespace CalcManager::NumberFormattingUtils;
 using namespace GraphControl;
 using namespace std;
 using namespace Platform;
+using namespace Windows::UI::Xaml;
 
 GraphingSettingsViewModel::GraphingSettingsViewModel()
     : m_XMinValue(0)
@@ -36,6 +37,7 @@ void GraphingSettingsViewModel::SetGrapher(Grapher ^ grapher)
         }
     }
     Graph = grapher;
+
     InitRanges();
     RaisePropertyChanged(L"TrigUnit");
 }
@@ -100,7 +102,7 @@ void GraphingSettingsViewModel::UpdateDisplayRange()
 
     m_Graph->SetDisplayRanges(m_XMinValue, m_XMaxValue, m_YMinValue, m_YMaxValue);
 
-    TraceLogger::GetInstance()->LogGraphSettingsChanged(GraphSettingsType::Grid);
+    TraceLogger::GetInstance()->LogGraphSettingsChanged(GraphSettingsType::Grid, L"");
 }
 
 bool GraphingSettingsViewModel::HasError()

src/CalcViewModel/GraphingCalculator/GraphingSettingsViewModel.h

@@ -232,7 +232,7 @@ namespace CalculatorApp::ViewModel
                     RaisePropertyChanged(L"TrigModeDegrees");
                     RaisePropertyChanged(L"TrigModeGradians");
 
-                    TraceLogger::GetInstance()->LogGraphSettingsChanged(GraphSettingsType::TrigUnits);
+                    TraceLogger::GetInstance()->LogGraphSettingsChanged(GraphSettingsType::TrigUnits, L"Radians");
                 }
             }
         }
@@ -253,7 +253,7 @@ namespace CalculatorApp::ViewModel
                     RaisePropertyChanged(L"TrigModeRadians");
                     RaisePropertyChanged(L"TrigModeGradians");
 
-                    TraceLogger::GetInstance()->LogGraphSettingsChanged(GraphSettingsType::TrigUnits);
+                    TraceLogger::GetInstance()->LogGraphSettingsChanged(GraphSettingsType::TrigUnits, L"Degrees");
                 }
             }
         }
@@ -274,7 +274,7 @@ namespace CalculatorApp::ViewModel
                     RaisePropertyChanged(L"TrigModeDegrees");
                     RaisePropertyChanged(L"TrigModeRadians");
 
-                    TraceLogger::GetInstance()->LogGraphSettingsChanged(GraphSettingsType::TrigUnits);
+                    TraceLogger::GetInstance()->LogGraphSettingsChanged(GraphSettingsType::TrigUnits, L"Gradians");
                 }
             }
         }

src/Calculator/App.xaml

@@ -72,20 +72,20 @@
                     <SolidColorBrush x:Key="AppChromeAcrylicOperatorFlyoutBackgroundBrush" Color="#FF2F2F2F"/>
                     <SolidColorBrush x:Key="AppControlTransparentButtonBackgroundBrush" Color="Transparent"/>
 
-                    <SolidColorBrush x:Key="EquationBrush1" Color="#FF0063B1"/>
+                    <SolidColorBrush x:Key="EquationBrush1" Color="#4D92C8"/>
-                    <SolidColorBrush x:Key="EquationBrush2" Color="#FF00B7C3"/>
+                    <SolidColorBrush x:Key="EquationBrush2" Color="#4DCDD5"/>
-                    <SolidColorBrush x:Key="EquationBrush3" Color="#FF6600CC"/>
+                    <SolidColorBrush x:Key="EquationBrush3" Color="#A366E0"/>
-                    <SolidColorBrush x:Key="EquationBrush4" Color="#FF107C10"/>
+                    <SolidColorBrush x:Key="EquationBrush4" Color="#58A358"/>
-                    <SolidColorBrush x:Key="EquationBrush5" Color="#FF00CC6A"/>
+                    <SolidColorBrush x:Key="EquationBrush5" Color="#4DDB97"/>
-                    <SolidColorBrush x:Key="EquationBrush6" Color="#FF008055"/>
+                    <SolidColorBrush x:Key="EquationBrush6" Color="#4DA688"/>
-                    <SolidColorBrush x:Key="EquationBrush7" Color="#FF58595B"/>
+                    <SolidColorBrush x:Key="EquationBrush7" Color="#8A8B8C"/>
-                    <SolidColorBrush x:Key="EquationBrush8" Color="#FFE81123"/>
+                    <SolidColorBrush x:Key="EquationBrush8" Color="#EF5865"/>
-                    <SolidColorBrush x:Key="EquationBrush9" Color="#FFE3008C"/>
+                    <SolidColorBrush x:Key="EquationBrush9" Color="#EB4DAF"/>
-                    <SolidColorBrush x:Key="EquationBrush10" Color="#FFB31564"/>
+                    <SolidColorBrush x:Key="EquationBrush10" Color="#CA5B93"/>
-                    <SolidColorBrush x:Key="EquationBrush11" Color="#FFFFB900"/>
+                    <SolidColorBrush x:Key="EquationBrush11" Color="#FFCE4D"/>
-                    <SolidColorBrush x:Key="EquationBrush12" Color="#FFF7630C"/>
+                    <SolidColorBrush x:Key="EquationBrush12" Color="#F99255"/>
-                    <SolidColorBrush x:Key="EquationBrush13" Color="#FF8E562E"/>
+                    <SolidColorBrush x:Key="EquationBrush13" Color="#B0896D"/>
-                    <SolidColorBrush x:Key="EquationBrush14" Color="#FF000000"/>
+                    <SolidColorBrush x:Key="EquationBrush14" Color="#FFFFFF"/>
                     <SolidColorBrush x:Key="DividerBrush" Color="#60FFFFFF"/>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">

src/Calculator/EquationStylePanelControl.xaml.cpp

@@ -25,6 +25,7 @@ using namespace GraphControl;
 DEPENDENCY_PROPERTY_INITIALIZATION(EquationStylePanelControl, SelectedColor);
 DEPENDENCY_PROPERTY_INITIALIZATION(EquationStylePanelControl, SelectedStyle);
 DEPENDENCY_PROPERTY_INITIALIZATION(EquationStylePanelControl, EnableLineStylePicker);
+DEPENDENCY_PROPERTY_INITIALIZATION(EquationStylePanelControl, SelectedColorIndex);
 DEPENDENCY_PROPERTY_INITIALIZATION(EquationStylePanelControl, AvailableColors);
 
 EquationStylePanelControl::EquationStylePanelControl()
@@ -69,8 +70,9 @@ void EquationStylePanelControl::ColorChooserLoaded(Object ^ sender, RoutedEventA
 
 void EquationStylePanelControl::SelectColor(Color selectedColor)
 {
-    for (auto item : ColorChooser->Items->GetView())
+    for (unsigned int i = 0; i < ColorChooser->Items->Size; i++)
     {
+        auto item = ColorChooser->Items->GetAt(i);
         auto brush = static_cast<SolidColorBrush ^>(item);
         auto gridViewItem = dynamic_cast<GridViewItem ^>(ColorChooser->ContainerFromItem(brush));
 
@@ -82,6 +84,7 @@ void EquationStylePanelControl::SelectColor(Color selectedColor)
         if (Utils::AreColorsEqual(brush->Color, selectedColor))
         {
             gridViewItem->IsSelected = true;
+            SelectedColorIndex = i;
             return;
         }
         else

src/Calculator/EquationStylePanelControl.xaml.h

@@ -17,6 +17,7 @@ namespace CalculatorApp
 
         DEPENDENCY_PROPERTY_WITH_DEFAULT_AND_CALLBACK(Windows::UI::Color, SelectedColor, Windows::UI::Colors::Black);
         DEPENDENCY_PROPERTY_WITH_DEFAULT_AND_CALLBACK(GraphControl::EquationLineStyle, SelectedStyle, GraphControl::EquationLineStyle::Solid);
+        DEPENDENCY_PROPERTY(int, SelectedColorIndex);
         DEPENDENCY_PROPERTY_WITH_DEFAULT(Windows::Foundation::Collections::IVector<Windows::UI::Xaml::Media::SolidColorBrush ^> ^, AvailableColors, nullptr);
         DEPENDENCY_PROPERTY(bool, EnableLineStylePicker);
 

src/Calculator/Resources/en-US/Resources.resw

@@ -4534,4 +4534,28 @@
     <value>Black</value>
     <comment>Name of color in the color picker</comment>
   </data>
+  <data name="GraphThemeHeading.Text" xml:space="preserve">
+    <value>Theme</value>
+    <comment>Graph settings heading for the theme options</comment>
+  </data>
+  <data name="AlwaysLightTheme.Content" xml:space="preserve">
+    <value>Always light</value>
+    <comment>Graph settings option to set graph to light theme</comment>
+  </data>
+  <data name="MatchAppTheme.Content" xml:space="preserve">
+    <value>Match app theme</value>
+    <comment>Graph settings option to set graph to match the app theme</comment>
+  </data>
+  <data name="GraphThemeHeading.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Theme</value>
+    <comment>This is the automation name text for the Graph settings heading for the theme options</comment>
+  </data>
+    <data name="AlwaysLightTheme.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Always light</value>
+    <comment>This is the automation name text for the Graph settings option to set graph to light theme</comment>
+  </data>
+    <data name="MatchAppTheme.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Match app theme</value>
+    <comment>This is the automation name text for the Graph settings option to set graph to match the app theme</comment>
+  </data>
 </root>

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml

@@ -850,6 +850,7 @@
                                 <Flyout x:Uid="ColorChooserFlyout" Placement="Bottom">
                                     <local:EquationStylePanelControl EnableLineStylePicker="{x:Bind GraphEquation.IsInequality, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}"
                                                                      SelectedColor="{x:Bind LineColor, Mode=TwoWay}"
+                                                                     SelectedColorIndex="{x:Bind LineColorIndex , Mode=TwoWay}"
                                                                      SelectedStyle="{x:Bind GraphEquation.EquationStyle, Mode=TwoWay}"/>
                                 </Flyout>
                             </controls:EquationTextBox.ColorChooserFlyout>

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp

@@ -16,6 +16,7 @@ using namespace std;
 using namespace Windows::Foundation;
 using namespace Windows::System;
 using namespace Windows::UI;
+using namespace Windows::UI::Core;
 using namespace Windows::UI::ViewManagement;
 using namespace Windows::UI::Xaml;
 using namespace Windows::UI::Xaml::Media;
@@ -31,6 +32,7 @@ namespace
     inline constexpr std::array<int, 14> colorAssignmentMapping = { 0, 3, 7, 10, 1, 4, 8, 11, 2, 5, 9, 12, 6, 13 };
 
     StringReference EquationsPropertyName(L"Equations");
+    StringReference IsMatchAppThemePropertyName(L"IsMatchAppTheme");
 }
 
 EquationInputArea::EquationInputArea()
@@ -42,7 +44,10 @@ EquationInputArea::EquationInputArea()
     m_accessibilitySettings->HighContrastChanged +=
         ref new TypedEventHandler<AccessibilitySettings ^, Object ^>(this, &EquationInputArea::OnHighContrastChanged);
 
-    ReloadAvailableColors(m_accessibilitySettings->HighContrast);
+    m_uiSettings = ref new UISettings();
+    m_uiSettings->ColorValuesChanged += ref new TypedEventHandler<UISettings ^, Object ^>(this, &EquationInputArea::OnColorValuesChanged);
+
+    ReloadAvailableColors(m_accessibilitySettings->HighContrast, true);
 
     InitializeComponent();
 }
@@ -53,6 +58,11 @@ void EquationInputArea::OnPropertyChanged(String ^ propertyName)
     {
         OnEquationsPropertyChanged();
     }
+
+    else if (propertyName == IsMatchAppThemePropertyName)
+    {
+        ReloadAvailableColors(m_accessibilitySettings->HighContrast, false);
+    }
 }
 
 void EquationInputArea::OnEquationsPropertyChanged()
@@ -89,7 +99,7 @@ void EquationInputArea::AddNewEquation()
         colorIndex = colorAssignmentMapping[m_lastLineColorIndex];
     }
 
-    auto eq = ref new EquationViewModel(ref new Equation(), ++m_lastFunctionLabelIndex, AvailableColors->GetAt(colorIndex)->Color);
+    auto eq = ref new EquationViewModel(ref new Equation(), ++m_lastFunctionLabelIndex, AvailableColors->GetAt(colorIndex)->Color, colorIndex);
     eq->IsLastItemInList = true;
     m_equationToFocus = eq;
     Equations->Append(eq);
@@ -281,31 +291,56 @@ void EquationInputArea::FocusEquationIfNecessary(CalculatorApp::Controls::Equati
 
 void EquationInputArea::OnHighContrastChanged(AccessibilitySettings ^ sender, Object ^ args)
 {
-    ReloadAvailableColors(sender->HighContrast);
+    ReloadAvailableColors(sender->HighContrast, true);
 }
 
-void EquationInputArea::ReloadAvailableColors(bool isHighContrast)
+void EquationInputArea::OnColorValuesChanged(Windows::UI::ViewManagement::UISettings ^ sender, Platform::Object ^ args)
+{
+    WeakReference weakThis(this);
+    this->Dispatcher->RunAsync(CoreDispatcherPriority::Normal, ref new DispatchedHandler([weakThis]() {
+                                   auto refThis = weakThis.Resolve<EquationInputArea>();
+                                   if (refThis != nullptr)
+                                   {
+                                       refThis->ReloadAvailableColors(refThis->m_accessibilitySettings->HighContrast, false);
+                                   }
+                               }));
+}
+
+
+void EquationInputArea::ReloadAvailableColors(bool isHighContrast, bool reassignColors)
 {
     m_AvailableColors->Clear();
-
+    if (isHighContrast)
+    {
         m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush1")));
         m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush2")));
         m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush3")));
         m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush4")));
+    }
 
     // If this is not high contrast, we have all 16 colors, otherwise we will restrict this to a subset of high contrast colors
-    if (!isHighContrast)
+    else
     {
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush5")));
+        Object ^ themeDictionaryName = L"Light";
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush6")));
+        if (IsMatchAppTheme && Application::Current->RequestedTheme == ApplicationTheme::Dark)
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush7")));
+        {
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush8")));
+            themeDictionaryName = L"Default";
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush9")));
+        }
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush10")));
+        auto themeDictionary = static_cast<ResourceDictionary ^>(Application::Current->Resources->ThemeDictionaries->Lookup(themeDictionaryName));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush11")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush1")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush12")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush2")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush13")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush3")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush14")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush4")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush5")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush6")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush7")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush8")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush9")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush10")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush11")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush12")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush13")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush14")));
     }
 
     // If there are no equations to reload, quit early
@@ -315,11 +350,19 @@ void EquationInputArea::ReloadAvailableColors(bool isHighContrast)
     }
 
     // Reassign colors for each equation
+    if (reassignColors)
+    {
         m_lastLineColorIndex = -1;
+    }
+
     for (auto equationViewModel : Equations)
+    {
+        if (reassignColors)
         {
             m_lastLineColorIndex = (m_lastLineColorIndex + 1) % AvailableColors->Size;
-        equationViewModel->LineColor = AvailableColors->GetAt(m_lastLineColorIndex)->Color;
+            equationViewModel->LineColorIndex = m_lastLineColorIndex;
+        }
+        equationViewModel->LineColor = AvailableColors->GetAt(equationViewModel->LineColorIndex)->Color;
     }
 }
 

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h

@@ -27,6 +27,7 @@ public
         OBSERVABLE_PROPERTY_RW(Windows::Foundation::Collections::IObservableVector<ViewModel::EquationViewModel ^> ^, Equations);
         OBSERVABLE_PROPERTY_RW(Windows::Foundation::Collections::IObservableVector<ViewModel::VariableViewModel ^> ^, Variables);
         OBSERVABLE_PROPERTY_RW(Windows::Foundation::Collections::IObservableVector<Windows::UI::Xaml::Media::SolidColorBrush ^> ^, AvailableColors);
+        OBSERVABLE_PROPERTY_RW(bool, IsMatchAppTheme);
         event Windows::Foundation::EventHandler<ViewModel::EquationViewModel ^> ^ KeyGraphFeaturesRequested;
         event Windows::Foundation::EventHandler<CalculatorApp::Controls::MathRichEditBoxFormatRequest ^> ^ EquationFormatRequested;
 
@@ -49,8 +50,9 @@ public
         void EquationTextBox_Submitted(Platform::Object ^ sender, CalculatorApp::Controls::MathRichEditBoxSubmission ^ e);
 
         void OnHighContrastChanged(Windows::UI::ViewManagement::AccessibilitySettings ^ sender, Platform::Object ^ args);
-        void ReloadAvailableColors(bool isHighContrast);
+        void ReloadAvailableColors(bool isHighContrast, bool reassignColors);
         void FocusEquationTextBox(ViewModel::EquationViewModel ^ equation);
+        void OnColorValuesChanged(Windows::UI::ViewManagement::UISettings ^ sender, Platform::Object ^ args);
 
         void EquationTextBox_RemoveButtonClicked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
         void EquationTextBox_KeyGraphFeaturesButtonClicked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
@@ -71,6 +73,7 @@ public
         CalculatorApp::ViewModel::EquationViewModel ^ GetViewModelFromEquationTextBox(Platform::Object ^ sender);
 
         Windows::UI::ViewManagement::AccessibilitySettings ^ m_accessibilitySettings;
+        Windows::UI::ViewManagement::UISettings ^ m_uiSettings;
         int m_lastLineColorIndex;
         int m_lastFunctionLabelIndex;
         ViewModel::EquationViewModel ^ m_equationToFocus;

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml

@@ -286,27 +286,43 @@
                     </Setter.Value>
                 </Setter>
             </Style>
+
+            <!-- Graph Theme Colors -->
+            <Color x:Key="LightThemeAxisColor">#000000</Color>
+            <Color x:Key="LightThemeGraphBackgroundColor">#FFFFFF</Color>
+            <Color x:Key="LightThemeGridLinesColor">#C6C6C6</Color>
+            <Color x:Key="DarkThemeAxisColor">#FFFFFF</Color>
+            <Color x:Key="DarkThemeGraphBackgroundColor">#1F1F1F</Color>
+            <Color x:Key="DarkThemeGridLinesColor">#4F4F4F</Color>
+
             <converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/>
+           
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x:Key="Default">
                     <Style x:Key="ThemedSwitchModeToggleButtonStyle"
                            BasedOn="{StaticResource SwitchModeToggleButtonStyle}"
                            TargetType="ToggleButton"/>
                     <Style x:Key="GraphControlCommandPanel" TargetType="Border">
-                        <Setter Property="Background" Value="{StaticResource SystemControlAcrylicElementBrush}"/>
+                        <Setter Property="Background" Value="#303030"/>
-                        <Setter Property="BorderBrush" Value="Transparent"/>
+                        <Setter Property="BorderBrush" Value="#303030"/>
                         <Setter Property="BorderThickness" Value="0"/>
                         <Setter Property="CornerRadius" Value="4"/>
                     </Style>
                     <Style x:Key="ThemedGraphRepeatButtonStyle"
                            BasedOn="{StaticResource GraphRepeatButtonStyle}"
-                           TargetType="RepeatButton"/>
+                           TargetType="RepeatButton">
+                        <Setter Property="Foreground" Value="#FFFFFF"/>
+                    </Style>
                     <Style x:Key="ThemedGraphButtonStyle"
                            BasedOn="{StaticResource GraphButtonStyle}"
-                           TargetType="Button"/>
+                           TargetType="Button">
+                        <Setter Property="Foreground" Value="#FFFFFF"/>
+                    </Style>
                     <Style x:Key="ThemedGraphToggleButtonStyle"
                            BasedOn="{StaticResource GraphToggleButtonStyle}"
-                           TargetType="ToggleButton"/>
+                           TargetType="ToggleButton">
+                        <Setter Property="Foreground" Value="#FFFFFF"/>
+                    </Style>
 
                     <Style x:Key="GraphTooltipStyle" TargetType="Border">
                         <Setter Property="BorderBrush" Value="#e0e0e0"/>
@@ -333,18 +349,21 @@
                     </Style>
                     <Style x:Key="ThemedGraphRepeatButtonStyle"
                            BasedOn="{StaticResource GraphRepeatButtonStyle}"
-                           TargetType="RepeatButton"/>
+                           TargetType="RepeatButton">
+                    </Style>
                     <Style x:Key="ThemedGraphButtonStyle"
                            BasedOn="{StaticResource GraphButtonStyle}"
-                           TargetType="Button"/>
+                           TargetType="Button">
+                    </Style>
                     <Style x:Key="ThemedGraphToggleButtonStyle"
                            BasedOn="{StaticResource GraphToggleButtonStyle}"
-                           TargetType="ToggleButton"/>
+                           TargetType="ToggleButton">
+                    </Style>
                     <Style x:Key="GraphTooltipStyle" TargetType="Border">
+                        <Setter Property="Background" Value="{ThemeResource SystemControlAcrylicElementBrush}"/>
                         <Setter Property="BorderBrush" Value="#e0e0e0"/>
                         <Setter Property="BorderThickness" Value="1"/>
                         <Setter Property="CornerRadius" Value="4"/>
-                        <Setter Property="Background" Value="{ThemeResource SystemControlAcrylicElementBrush}"/>
                     </Style>
                     <Style x:Key="TracePointerPathStyle" TargetType="Path">
                         <Setter Property="Fill" Value="White"/>
@@ -446,6 +465,29 @@
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
+            <VisualStateGroup x:Name="GrapherThemes">
+                <VisualState x:Name="GrapherDarkTheme">
+                    <VisualState.Setters>
+                        <Setter Target="GraphingControl.AxesColor" Value="{StaticResource DarkThemeAxisColor}"/>
+                        <Setter Target="GraphingControl.GraphBackground" Value="{StaticResource DarkThemeGraphBackgroundColor}"/>
+                        <Setter Target="GraphingControl.GridLinesColor" Value="{StaticResource DarkThemeGridLinesColor}"/>
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="GrapherLightTheme">
+                    <VisualState.Setters>
+                        <Setter Target="GraphingControl.AxesColor" Value="{StaticResource LightThemeAxisColor}"/>
+                        <Setter Target="GraphingControl.GraphBackground" Value="{StaticResource LightThemeGraphBackgroundColor}"/>
+                        <Setter Target="GraphingControl.GridLinesColor" Value="{StaticResource LightThemeGridLinesColor}"/>
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="GrapherHighContrast">
+                    <VisualState.Setters>
+                        <Setter Target="GraphingControl.AxesColor" Value="{ThemeResource SystemColorWindowTextColor}"/>
+                        <Setter Target="GraphingControl.GraphBackground" Value="{ThemeResource SystemColorWindowColor}"/>
+                        <Setter Target="GraphingControl.GridLinesColor" Value="#FFFFFFFF"/>
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
         <!-- Top panel -->
         <ToggleSwitch x:Name="SwitchModeToggleButton"
@@ -484,36 +526,23 @@
                                     <CornerRadius x:Key="BottomButtonCornerRadius">0,0,4,4</CornerRadius>
                                     <CornerRadius x:Key="LeftButtonCornerRadius">4,0,0,4</CornerRadius>
                                     <CornerRadius x:Key="RightButtonCornerRadius">0,4,4,0</CornerRadius>
-                                    <Style x:Key="ThemedGrapherStyle" TargetType="graphControl:Grapher">
-                                        <Setter Property="AxesColor" Value="Black"/>
-                                        <Setter Property="GraphBackground" Value="White"/>
-                                    </Style>
                                 </ResourceDictionary>
                                 <ResourceDictionary x:Key="Dark">
                                     <CornerRadius x:Key="TopButtonCornerRadius">4,4,0,0</CornerRadius>
                                     <CornerRadius x:Key="BottomButtonCornerRadius">0,0,4,4</CornerRadius>
                                     <CornerRadius x:Key="LeftButtonCornerRadius">4,0,0,4</CornerRadius>
                                     <CornerRadius x:Key="RightButtonCornerRadius">0,4,4,0</CornerRadius>
-                                    <Style x:Key="ThemedGrapherStyle" TargetType="graphControl:Grapher">
-                                        <Setter Property="AxesColor" Value="White"/>
-                                        <Setter Property="GraphBackground" Value="Black"/>
-                                    </Style>
                                 </ResourceDictionary>
                                 <ResourceDictionary x:Key="HighContrast">
                                     <CornerRadius x:Key="TopButtonCornerRadius">0</CornerRadius>
                                     <CornerRadius x:Key="BottomButtonCornerRadius">0</CornerRadius>
                                     <CornerRadius x:Key="LeftButtonCornerRadius">0</CornerRadius>
                                     <CornerRadius x:Key="RightButtonCornerRadius">0</CornerRadius>
-                                    <Style x:Key="ThemedGrapherStyle" TargetType="graphControl:Grapher">
-                                        <Setter Property="AxesColor" Value="{ThemeResource SystemColorWindowTextColor}"/>
-                                        <Setter Property="GraphBackground" Value="{ThemeResource SystemColorWindowColor}"/>
-                                    </Style>
                                 </ResourceDictionary>
                             </ResourceDictionary.ThemeDictionaries>
                         </ResourceDictionary>
                     </Grid.Resources>
                     <graphControl:Grapher Name="GraphingControl"
-                                          Style="{ThemeResource ThemedGrapherStyle}"
                                           AutomationProperties.Name="{x:Bind GraphControlAutomationName, Mode=OneWay}"
                                           ForceProportionalAxes="False"
                                           GraphPlottedEvent="GraphingControl_GraphPlottedEvent"
@@ -681,7 +710,7 @@
                                                  Visibility="{x:Bind IsKeyGraphFeaturesVisible, Mode=OneWay}"
                                                  x:Load="{x:Bind IsKeyGraphFeaturesVisible, Mode=OneWay}"/>
 
-                    <!-- This control should be within a grid that limits the hight to keep the sticky footer functionality from breaking -->
+            <!-- This control should be within a grid that limits the height to keep the sticky footer functionality from breaking -->
             <local:EquationInputArea x:Name="EquationInputAreaControl"
                                      Grid.ColumnSpan="2"
                                      Margin="0,4,0,0"
@@ -689,7 +718,8 @@
                                      Equations="{x:Bind ViewModel.Equations}"
                                      KeyGraphFeaturesRequested="OnEquationKeyGraphFeaturesRequested"
                                      Variables="{x:Bind ViewModel.Variables}"
-                                             Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"/>
+                                     Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"
+                                     IsMatchAppTheme="{x:Bind IsMatchAppTheme, Mode=OneWay}"/>
 
                     <local:GraphingNumPad x:Name="GraphingNumPad"
                                           Grid.Row="1"

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp

@@ -34,10 +34,12 @@ using namespace Windows::ApplicationModel::DataTransfer;
 using namespace Windows::ApplicationModel::Resources;
 using namespace Windows::Foundation;
 using namespace Windows::Foundation::Collections;
+using namespace Windows::Storage;
 using namespace Windows::Storage::Streams;
 using namespace Windows::System;
 using namespace Windows::UI::Core;
 using namespace Windows::UI::Input;
+using namespace Windows::UI::ViewManagement;
 using namespace Windows::UI::Xaml;
 using namespace Windows::UI::Xaml::Automation;
 using namespace Windows::UI::Xaml::Automation::Peers;
@@ -51,7 +53,8 @@ using namespace Windows::UI::Popups;
 using namespace Windows::UI::ViewManagement;
 namespace MUXC = Microsoft::UI::Xaml::Controls;
 
-    constexpr auto sc_ViewModelPropertyName = L"ViewModel";
+constexpr auto sc_ViewModelPropertyName = L"ViewModel";
+constexpr auto sc_IsGraphThemeMatchApp = L"IsGraphThemeMatchApp";
 
 DEPENDENCY_PROPERTY_INITIALIZATION(GraphingCalculator, IsSmallState);
 DEPENDENCY_PROPERTY_INITIALIZATION(GraphingCalculator, GraphControlAutomationName);
@@ -88,6 +91,31 @@ GraphingCalculator::GraphingCalculator()
     virtualKey->Key = (VirtualKey)187; // OemAdd key
     virtualKey->Modifiers = VirtualKeyModifiers::Control;
     ZoomInButton->KeyboardAccelerators->Append(virtualKey);
+
+    m_accessibilitySettings->HighContrastChanged +=
+        ref new TypedEventHandler<AccessibilitySettings ^, Object ^>(this, &GraphingCalculator::OnHighContrastChanged);
+
+    m_uiSettings = ref new UISettings();
+    m_uiSettings->ColorValuesChanged += ref new TypedEventHandler<UISettings ^, Object ^>(this, &GraphingCalculator::OnColorValuesChanged);
+
+    ApplicationDataContainer ^ localSettings = ApplicationData::Current->LocalSettings;
+
+    if (localSettings != nullptr && localSettings->Values->HasKey(StringReference(sc_IsGraphThemeMatchApp)))
+    {
+        auto isMatchAppLocalSetting = static_cast<bool>(localSettings->Values->Lookup(StringReference(sc_IsGraphThemeMatchApp)));
+        if (isMatchAppLocalSetting)
+        {
+            IsMatchAppTheme = true;
+            TraceLogger::GetInstance()->LogGraphTheme(L"IsMatchAppTheme");
+        }
+    }
+    else
+    {
+        IsMatchAppTheme = false;
+        TraceLogger::GetInstance()->LogGraphTheme(L"IsAlwaysLightTheme");
+    }
+
+    UpdateGraphTheme();
 }
 
 void GraphingCalculator::OnShowTracePopupChanged(bool newValue)
@@ -97,7 +125,6 @@ void GraphingCalculator::OnShowTracePopupChanged(bool newValue)
         TraceValuePopup->Visibility = newValue ? ::Visibility::Visible : ::Visibility::Collapsed;
     }
 }
-
 void GraphingCalculator::GraphingCalculator_DataContextChanged(FrameworkElement ^ sender, DataContextChangedEventArgs ^ args)
 {
     if (ViewModel != nullptr)
@@ -512,9 +539,6 @@ void CalculatorApp::GraphingCalculator::ActiveTracing_Checked(Platform::Object ^
         // hide the shadow in high contrast mode
         CursorShadow->Visibility = m_accessibilitySettings->HighContrast ? ::Visibility::Collapsed : ::Visibility::Visible;
 
-        m_accessibilitySettings->HighContrastChanged +=
-            ref new TypedEventHandler<AccessibilitySettings ^, Object ^>(this, &GraphingCalculator::OnHighContrastChanged);
-
         Canvas::SetLeft(TracePointer, TraceCanvas->ActualWidth / 2 + 40);
         Canvas::SetTop(TracePointer, TraceCanvas->ActualHeight / 2 - 40);
 
@@ -569,10 +593,16 @@ void GraphingCalculator::GraphSettingsButton_Click(Object ^ sender, RoutedEventA
 
 void GraphingCalculator::DisplayGraphSettings()
 {
-    auto graphSettings = ref new GraphingSettings();
+    if (m_graphSettings == nullptr)
-    graphSettings->SetGrapher(this->GraphingControl);
+    {
+        m_graphSettings = ref new GraphingSettings();
+        m_graphSettings->GraphThemeSettingChanged += ref new EventHandler<bool>(this, &GraphingCalculator::OnGraphThemeSettingChanged);
+    }
+
+    m_graphSettings->IsMatchAppTheme = IsMatchAppTheme;
+    m_graphSettings->SetGrapher(this->GraphingControl);
     auto flyoutGraphSettings = ref new Flyout();
-    flyoutGraphSettings->Content = graphSettings;
+    flyoutGraphSettings->Content = m_graphSettings;
     flyoutGraphSettings->Closing += ref new TypedEventHandler<FlyoutBase ^, FlyoutBaseClosingEventArgs ^>(this, &GraphingCalculator::OnSettingsFlyout_Closing);
 
     auto options = ref new FlyoutShowOptions();
@@ -613,7 +643,12 @@ void GraphingCalculator::Canvas_SizeChanged(Object ^ /*sender*/, SizeChangedEven
 
 void GraphingCalculator::OnHighContrastChanged(AccessibilitySettings ^ sender, Object ^ /*args*/)
 {
+    if (CursorShadow != nullptr)
+    {
         CursorShadow->Visibility = sender->HighContrast ? ::Visibility::Collapsed : ::Visibility::Visible;
+    }
+
+    UpdateGraphTheme();
 }
 
 void GraphingCalculator::OnEquationFormatRequested(Object ^ sender, MathRichEditBoxFormatRequest ^ e)
@@ -692,3 +727,51 @@ void GraphingCalculator::OnVisualStateChanged(Object ^ sender, VisualStateChange
 {
     TraceLogger::GetInstance()->LogVisualStateChanged(ViewMode::Graphing, e->NewState->Name, false);
 }
+
+void GraphingCalculator::OnColorValuesChanged(Windows::UI::ViewManagement::UISettings ^ sender, Platform::Object ^ args)
+{
+    WeakReference weakThis(this);
+    this->Dispatcher->RunAsync(CoreDispatcherPriority::Normal, ref new DispatchedHandler([weakThis]() {
+                                   auto refThis = weakThis.Resolve<GraphingCalculator>();
+                                   if (refThis != nullptr && refThis->IsMatchAppTheme)
+                                   {
+                                       refThis->UpdateGraphTheme();
+                                   }
+                               }));
+}
+
+void GraphingCalculator::UpdateGraphTheme()
+{
+    if (m_accessibilitySettings->HighContrast)
+    {
+        VisualStateManager::GoToState(this, L"GrapherHighContrast", true);
+        return;
+    }
+
+    if (IsMatchAppTheme && Application::Current->RequestedTheme == ApplicationTheme::Dark)
+    {
+        VisualStateManager::GoToState(this, L"GrapherDarkTheme", true);
+    }
+    else
+    {
+        VisualStateManager::GoToState(this, L"GrapherLightTheme", true);
+    }
+}
+
+void GraphingCalculator::OnGraphThemeSettingChanged(Object ^ sender, bool isMatchAppTheme)
+{
+    if (IsMatchAppTheme == isMatchAppTheme)
+    {
+        return;
+    }
+
+    IsMatchAppTheme = isMatchAppTheme;
+    WeakReference weakThis(this);
+    this->Dispatcher->RunAsync(CoreDispatcherPriority::Normal, ref new DispatchedHandler([weakThis]() {
+                                    auto refThis = weakThis.Resolve<GraphingCalculator>();
+                                    if (refThis != nullptr)
+                                    {
+                                        refThis->UpdateGraphTheme();
+                                    }
+                                }));
+}

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h

@@ -31,6 +31,7 @@ public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INo
         OBSERVABLE_PROPERTY_R(bool, IsKeyGraphFeaturesVisible);
         DEPENDENCY_PROPERTY(bool, IsSmallState);
         DEPENDENCY_PROPERTY(Platform::String ^, GraphControlAutomationName);
+        OBSERVABLE_PROPERTY_R(bool, IsMatchAppTheme);
 
         property CalculatorApp::ViewModel::GraphingCalculatorViewModel^ ViewModel
         {
@@ -85,6 +86,9 @@ public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INo
         void AddTracePointerShadow();
 
         void UpdateGraphAutomationName();
+        void OnColorValuesChanged(Windows::UI::ViewManagement::UISettings ^ sender, Platform::Object ^ args);
+        void UpdateGraphTheme();
+        void OnGraphThemeSettingChanged(Platform::Object ^ sender, bool isMatchAppTheme);
 
     private:
         Windows::Foundation::EventRegistrationToken m_dataRequestedToken;
@@ -95,6 +99,8 @@ public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INo
         CalculatorApp::ViewModel::GraphingCalculatorViewModel ^ m_viewModel;
         Windows::UI::ViewManagement::AccessibilitySettings ^ m_accessibilitySettings;
         bool m_cursorShadowInitialized;
+        Windows::UI::ViewManagement::UISettings ^ m_uiSettings;
+        CalculatorApp::GraphingSettings ^ m_graphSettings;
         void OnSettingsFlyout_Closing(Windows::UI::Xaml::Controls::Primitives::FlyoutBase ^ sender, Windows::UI::Xaml::Controls::Primitives::FlyoutBaseClosingEventArgs ^ args);
         void Canvas_SizeChanged(Platform::Object ^ sender, Windows::UI::Xaml::SizeChangedEventArgs ^ e);
         void OnHighContrastChanged(Windows::UI::ViewManagement::AccessibilitySettings ^ sender, Platform::Object ^ args);

src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml

@@ -3,6 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="using:CalculatorApp"
+             xmlns:converters="using:CalculatorApp.Converters"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
              mc:Ignorable="d">
@@ -92,6 +93,8 @@
             <DataTemplate x:Key="XYTextBoxHeaderTemplate" x:DataType="x:String">
                 <TextBlock FontSize="14" Text="{x:Bind}"/>
             </DataTemplate>
+
+            <converters:BooleanNegationConverter x:Key="BooleanNegationConverter"/>
         </ResourceDictionary>
     </UserControl.Resources>
 
@@ -212,6 +215,20 @@
                     </DataTemplate>
                 </ComboBox.ItemTemplate>
             </ComboBox>
+
+            <TextBlock x:Name="GraphThemeHeading"
+                       x:Uid="GraphThemeHeading"
+                       Margin="0,16,0,6"
+                       Style="{StaticResource SubTitleTextBoxStyle}"
+                       AutomationProperties.HeadingLevel="Level2"/>
+
+            <StackPanel Orientation="Vertical">
+                <RadioButton x:Uid="AlwaysLightTheme"
+                             IsChecked="{x:Bind IsMatchAppTheme, Mode=TwoWay, Converter={StaticResource BooleanNegationConverter}}"/>
+                <RadioButton x:Uid="MatchAppTheme"
+                             Margin="1,0"
+                             IsChecked="{x:Bind IsMatchAppTheme, Mode=TwoWay}"/>
+            </StackPanel>
         </StackPanel>
     </Grid>
 </UserControl>

src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml.cpp

@@ -13,6 +13,7 @@ using namespace CalculatorApp::ViewModel;
 using namespace Platform;
 using namespace Windows::Foundation;
 using namespace Windows::Foundation::Collections;
+using namespace Windows::Storage;
 using namespace Windows::System;
 using namespace Windows::UI::Xaml;
 using namespace Windows::UI::Xaml::Controls;
@@ -24,6 +25,7 @@ using namespace Windows::UI::Xaml::Navigation;
 
 GraphingSettings::GraphingSettings()
     : m_ViewModel(ref new GraphingSettingsViewModel())
+    , m_IsMatchAppTheme(false)
 {
     InitializeComponent();
 }
@@ -88,3 +90,12 @@ String ^ GraphingSettings::GetLineWidthAutomationName(double width)
         return resourceLoader->GetResourceString("ExtraLargeLineWidthAutomationName");
     }
 }
+
+void GraphingSettings::SetGraphTheme(bool isMatchAppTheme)
+{
+    String ^ propertyName = isMatchAppTheme ? L"IsMatchAppTheme" : L"IsAlwaysLightTheme";
+    ApplicationDataContainer ^ localSettings = ApplicationData::Current->LocalSettings;
+    localSettings->Values->Insert(L"IsGraphThemeMatchApp", isMatchAppTheme);
+    GraphThemeSettingChanged(this, isMatchAppTheme);
+    TraceLogger::GetInstance()->LogGraphSettingsChanged(GraphSettingsType::Theme, propertyName);
+}

src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml.h

@@ -17,14 +17,40 @@ namespace CalculatorApp
     public:
         GraphingSettings();
 
-        PROPERTY_R(CalculatorApp::ViewModel::GraphingSettingsViewModel ^, ViewModel);
+        PROPERTY_RW(CalculatorApp::ViewModel::GraphingSettingsViewModel ^, ViewModel);
+
+        
+        property bool IsMatchAppTheme
+        {
+            bool get()
+            {
+                return m_IsMatchAppTheme;
+            }
+            void set(bool value)
+            {
+                if (m_IsMatchAppTheme == value)
+                {
+                    return;
+                }
+
+                m_IsMatchAppTheme = value;
+                SetGraphTheme(m_IsMatchAppTheme);
+            }
+        }
+
         Windows::UI::Xaml::Style ^ SelectTextBoxStyle(bool incorrectRange, bool error);
         void SetGrapher(GraphControl::Grapher ^ grapher);
         void RefreshRanges();
 
         static Platform::String ^ GetLineWidthAutomationName(double width);
+
+        // Event sends the if the IsMatchAppTheme is selected
+        event Windows::Foundation::EventHandler<bool> ^ GraphThemeSettingChanged;
     private:
         void GridSettingsTextBox_PreviewKeyDown(Platform::Object ^ sender, Windows::UI::Xaml::Input::KeyRoutedEventArgs ^ e);
         void ResetViewButton_Clicked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
+        void SetGraphTheme(bool isMatchAppTheme);
+
+        bool m_IsMatchAppTheme;
     };
 }

src/GraphControl/Control/Grapher.cpp

@@ -16,6 +16,7 @@ using namespace Concurrency;
 using namespace Windows::Devices::Input;
 using namespace Windows::Foundation;
 using namespace Windows::Foundation::Collections;
+using namespace Windows::Storage;
 using namespace Windows::Storage::Streams;
 using namespace Windows::System;
 using namespace Windows::System::Threading;
@@ -34,6 +35,7 @@ DEPENDENCY_PROPERTY_INITIALIZATION(Grapher, Variables);
 DEPENDENCY_PROPERTY_INITIALIZATION(Grapher, Equations);
 DEPENDENCY_PROPERTY_INITIALIZATION(Grapher, AxesColor);
 DEPENDENCY_PROPERTY_INITIALIZATION(Grapher, GraphBackground);
+DEPENDENCY_PROPERTY_INITIALIZATION(Grapher, GridLinesColor);
 DEPENDENCY_PROPERTY_INITIALIZATION(Grapher, LineWidth);
 
 namespace
@@ -1056,6 +1058,17 @@ void Grapher::OnGraphBackgroundPropertyChanged(Windows::UI::Color /*oldValue*/,
     }
 }
 
+
+void Grapher::OnGridLinesColorPropertyChanged(Windows::UI::Color /*oldValue*/, Windows::UI::Color newValue)
+{
+    if (m_renderMain != nullptr && m_graph != nullptr)
+    {
+        auto gridLinesColor = Graphing::Color(newValue.R, newValue.G, newValue.B, newValue.A);
+        m_graph->GetOptions().SetGridColor(gridLinesColor);
+        m_renderMain->RunRenderPassAsync();
+    }
+}
+
 void Grapher::OnLineWidthPropertyChanged(double oldValue, double newValue)
 {
     if (m_graph)

src/GraphControl/Control/Grapher.h

@@ -50,6 +50,8 @@ public
         DEPENDENCY_PROPERTY_R_WITH_DEFAULT_AND_CALLBACK(GraphControl::EquationCollection ^, Equations, nullptr);
         DEPENDENCY_PROPERTY_WITH_DEFAULT_AND_CALLBACK(Windows::UI::Color, AxesColor, Windows::UI::Colors::Transparent);
         DEPENDENCY_PROPERTY_WITH_DEFAULT_AND_CALLBACK(Windows::UI::Color, GraphBackground, Windows::UI::Colors::Transparent);
+        DEPENDENCY_PROPERTY_WITH_DEFAULT_AND_CALLBACK(Windows::UI::Color, GridLinesColor, Windows::UI::Colors::Transparent);
+
         DEPENDENCY_PROPERTY_WITH_DEFAULT_AND_CALLBACK(double, LineWidth, 2.0);
         // Pass active tracing turned on or off down to the renderer
         property bool ActiveTracing
@@ -276,6 +278,7 @@ public
         void OnEquationsPropertyChanged(EquationCollection ^ oldValue, EquationCollection ^ newValue);
         void OnAxesColorPropertyChanged(Windows::UI::Color oldValue, Windows::UI::Color newValue);
         void OnGraphBackgroundPropertyChanged(Windows::UI::Color oldValue, Windows::UI::Color newValue);
+        void OnGridLinesColorPropertyChanged(Windows::UI::Color /*oldValue*/, Windows::UI::Color newValue);
         void OnLineWidthPropertyChanged(double oldValue, double newValue);
         void OnEquationChanged(Equation ^ equation);
         void OnEquationStyleChanged(Equation ^ equation);

src/GraphingImpl/Mocks/GraphingOptions.h

@@ -29,6 +29,7 @@ namespace MockGraphingImpl
             , m_asymptotesColor()
             , m_axisColor()
             , m_boxColor()
+            , m_gridColor()
             , m_fontColor()
             , m_showAxis(true)
             , m_showGrid(true)
@@ -251,6 +252,19 @@ namespace MockGraphingImpl
             m_boxColor = Graphing::Color();
         }
 
+        virtual Graphing::Color GetGridColor() const
+        {
+            return m_gridColor;
+        }
+        virtual void SetGridColor(const Graphing::Color& value)
+        {
+            m_gridColor = value;
+        }
+        virtual void ResetGridColor()
+        {
+            m_gridColor = Graphing::Color();
+        }
+
         virtual Graphing::Color GetFontColor() const
         {
             return m_fontColor;
@@ -404,6 +418,7 @@ namespace MockGraphingImpl
         Graphing::Color m_asymptotesColor;
         Graphing::Color m_axisColor;
         Graphing::Color m_boxColor;
+        Graphing::Color m_gridColor;
         Graphing::Color m_fontColor;
         bool m_showAxis;
         bool m_showGrid;

src/GraphingInterfaces/IGraphingOptions.h

@@ -80,6 +80,10 @@ namespace Graphing
         virtual void SetBoxColor(const Graphing::Color& value) = 0;
         virtual void ResetBoxColor() = 0;
 
+        virtual Graphing::Color GetGridColor() const = 0;
+        virtual void SetGridColor(const Graphing::Color& value) = 0;
+        virtual void ResetGridColor() = 0;
+
         virtual Graphing::Color GetFontColor() const = 0;
         virtual void SetFontColor(const Graphing::Color& value) = 0;
         virtual void ResetFontColor() = 0;