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
2020-03-27 17:20:35 -07:00
parent 780e53780d
commit cf735bbcf5
23 changed files with 389 additions and 89 deletions
--- a/src/CalcViewModel/Common/TraceLogger.cpp
+++ b/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);
+    }
 }
--- a/src/CalcViewModel/Common/TraceLogger.h
+++ b/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);
--- a/src/CalcViewModel/GraphingCalculator/EquationViewModel.cpp
+++ b/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;
    }

--- a/src/CalcViewModel/GraphingCalculator/EquationViewModel.h
+++ b/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
        {
--- a/src/CalcViewModel/GraphingCalculator/GraphingSettingsViewModel.cpp
+++ b/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()
--- a/src/CalcViewModel/GraphingCalculator/GraphingSettingsViewModel.h
+++ b/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");
                }
            }
        }
--- a/src/Calculator/App.xaml
+++ b/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="EquationBrush2" Color="#FF00B7C3"/>
-                    <SolidColorBrush x:Key="EquationBrush3" Color="#FF6600CC"/>
-                    <SolidColorBrush x:Key="EquationBrush4" Color="#FF107C10"/>
-                    <SolidColorBrush x:Key="EquationBrush5" Color="#FF00CC6A"/>
-                    <SolidColorBrush x:Key="EquationBrush6" Color="#FF008055"/>
-                    <SolidColorBrush x:Key="EquationBrush7" Color="#FF58595B"/>
-                    <SolidColorBrush x:Key="EquationBrush8" Color="#FFE81123"/>
-                    <SolidColorBrush x:Key="EquationBrush9" Color="#FFE3008C"/>
-                    <SolidColorBrush x:Key="EquationBrush10" Color="#FFB31564"/>
-                    <SolidColorBrush x:Key="EquationBrush11" Color="#FFFFB900"/>
-                    <SolidColorBrush x:Key="EquationBrush12" Color="#FFF7630C"/>
-                    <SolidColorBrush x:Key="EquationBrush13" Color="#FF8E562E"/>
-                    <SolidColorBrush x:Key="EquationBrush14" Color="#FF000000"/>
+                    <SolidColorBrush x:Key="EquationBrush1" Color="#4D92C8"/>
+                    <SolidColorBrush x:Key="EquationBrush2" Color="#4DCDD5"/>
+                    <SolidColorBrush x:Key="EquationBrush3" Color="#A366E0"/>
+                    <SolidColorBrush x:Key="EquationBrush4" Color="#58A358"/>
+                    <SolidColorBrush x:Key="EquationBrush5" Color="#4DDB97"/>
+                    <SolidColorBrush x:Key="EquationBrush6" Color="#4DA688"/>
+                    <SolidColorBrush x:Key="EquationBrush7" Color="#8A8B8C"/>
+                    <SolidColorBrush x:Key="EquationBrush8" Color="#EF5865"/>
+                    <SolidColorBrush x:Key="EquationBrush9" Color="#EB4DAF"/>
+                    <SolidColorBrush x:Key="EquationBrush10" Color="#CA5B93"/>
+                    <SolidColorBrush x:Key="EquationBrush11" Color="#FFCE4D"/>
+                    <SolidColorBrush x:Key="EquationBrush12" Color="#F99255"/>
+                    <SolidColorBrush x:Key="EquationBrush13" Color="#B0896D"/>
+                    <SolidColorBrush x:Key="EquationBrush14" Color="#FFFFFF"/>
                    <SolidColorBrush x:Key="DividerBrush" Color="#60FFFFFF"/>
                </ResourceDictionary>
                <ResourceDictionary x:Key="Light">
--- a/src/Calculator/EquationStylePanelControl.xaml.cpp
+++ b/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
--- a/src/Calculator/EquationStylePanelControl.xaml.h
+++ b/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);

--- a/src/Calculator/Resources/en-US/Resources.resw
+++ b/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>
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
+++ b/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>
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp
+++ b/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();
-
-    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 (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")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush6")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush7")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush8")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush9")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush10")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush11")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush12")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush13")));
-        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"EquationBrush14")));
+        Object ^ themeDictionaryName = L"Light";
+        if (IsMatchAppTheme && Application::Current->RequestedTheme == ApplicationTheme::Dark)
+        {
+            themeDictionaryName = L"Default";
+        }
+        auto themeDictionary = static_cast<ResourceDictionary ^>(Application::Current->Resources->ThemeDictionaries->Lookup(themeDictionaryName));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush1")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush2")));
+        m_AvailableColors->Append(safe_cast<SolidColorBrush ^>(themeDictionary->Lookup(L"EquationBrush3")));
+        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
-    m_lastLineColorIndex = -1;
+    if (reassignColors)
+    {
+        m_lastLineColorIndex = -1;
+    }
+
    for (auto equationViewModel : Equations)
    {
-        m_lastLineColorIndex = (m_lastLineColorIndex + 1) % AvailableColors->Size;
-        equationViewModel->LineColor = AvailableColors->GetAt(m_lastLineColorIndex)->Color;
+        if (reassignColors)
+        {
+            m_lastLineColorIndex = (m_lastLineColorIndex + 1) % AvailableColors->Size;
+            equationViewModel->LineColorIndex = m_lastLineColorIndex;
+        }
+        equationViewModel->LineColor = AvailableColors->GetAt(equationViewModel->LineColorIndex)->Color;
    }
 }

--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h
+++ b/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;
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
+++ b/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="BorderBrush" Value="Transparent"/>
+                        <Setter Property="Background" Value="#303030"/>
+                        <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,15 +710,16 @@
                                                 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 -->
-                    <local:EquationInputArea x:Name="EquationInputAreaControl"
-                                             Grid.ColumnSpan="2"
-                                             Margin="0,4,0,0"
-                                             EquationFormatRequested="OnEquationFormatRequested"
-                                             Equations="{x:Bind ViewModel.Equations}"
-                                             KeyGraphFeaturesRequested="OnEquationKeyGraphFeaturesRequested"
-                                             Variables="{x:Bind ViewModel.Variables}"
-                                             Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"/>
+            <!-- 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"
+                                     EquationFormatRequested="OnEquationFormatRequested"
+                                     Equations="{x:Bind ViewModel.Equations}"
+                                     KeyGraphFeaturesRequested="OnEquationKeyGraphFeaturesRequested"
+                                     Variables="{x:Bind ViewModel.Variables}"
+                                     Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"
+                                     IsMatchAppTheme="{x:Bind IsMatchAppTheme, Mode=OneWay}"/>

                    <local:GraphingNumPad x:Name="GraphingNumPad"
                                          Grid.Row="1"
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
+++ b/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();
-    graphSettings->SetGrapher(this->GraphingControl);
+    if (m_graphSettings == nullptr)
+    {
+        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*/)
 {
-    CursorShadow->Visibility = sender->HighContrast ? ::Visibility::Collapsed : ::Visibility::Visible;
+    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();
+                                    }
+                                }));
+}
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h
+++ b/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);
--- a/src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml
+++ b/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>
--- a/src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml.cpp
+++ b/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);
+}
--- a/src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml.h
+++ b/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;
    };
 }
--- a/src/GraphControl/Control/Grapher.cpp
+++ b/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)
--- a/src/GraphControl/Control/Grapher.h
+++ b/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);
--- a/src/GraphingImpl/Mocks/GraphingOptions.h
+++ b/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;
--- a/src/GraphingInterfaces/IGraphingOptions.h
+++ b/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;