[FancyZones] Zone Number Settings (#14910)

2025-12-15 03:07:56 +01:00 · 2021-12-20 17:50:51 +01:00
parent 3805348afd
commit 288e0487a0
17 changed files with 208 additions and 73 deletions
--- a/src/modules/fancyzones/FancyZonesLib/FancyZones.cpp
+++ b/src/modules/fancyzones/FancyZonesLib/FancyZones.cpp
@@ -874,7 +874,7 @@ void FancyZones::AddWorkArea(HMONITOR monitor, const std::wstring& deviceId) noe
            parentId = parentArea->UniqueId();
        }

-        auto workArea = MakeWorkArea(m_hinstance, monitor, uniqueId, parentId, GetZoneColors(), m_settings->GetSettings()->overlappingZonesAlgorithm);
+        auto workArea = MakeWorkArea(m_hinstance, monitor, uniqueId, parentId, GetZoneColors(), m_settings->GetSettings()->overlappingZonesAlgorithm, m_settings->GetSettings()->showZoneNumber);
        if (workArea)
        {
            m_workAreaHandler.AddWorkArea(m_currentDesktopId, monitor, workArea);
@@ -1394,13 +1394,14 @@ ZoneColors FancyZones::GetZoneColors() const noexcept
    if (m_settings->GetSettings()->systemTheme)
    {
        GetSystemTheme();
-        auto textColor = currentBackgroundColor == RGB(0, 0, 0) ? RGB(255, 255, 255) : RGB(0, 0, 0);
+        auto numberColor = currentBackgroundColor == RGB(0, 0, 0) ? RGB(255, 255, 255) : RGB(0, 0, 0);
+

        return ZoneColors{
            .primaryColor = currentBackgroundColor,
            .borderColor = currentAccentColor,
            .highlightColor = currentAccentColor,
-            .textColor = textColor,
+            .numberColor = numberColor,
            .highlightOpacity = m_settings->GetSettings()->zoneHighlightOpacity
        };
    }
@@ -1410,7 +1411,7 @@ ZoneColors FancyZones::GetZoneColors() const noexcept
            .primaryColor = FancyZonesUtils::HexToRGB(m_settings->GetSettings()->zoneColor),
            .borderColor = FancyZonesUtils::HexToRGB(m_settings->GetSettings()->zoneBorderColor),
            .highlightColor = FancyZonesUtils::HexToRGB(m_settings->GetSettings()->zoneHighlightColor),
-            .textColor = RGB(0, 0, 0),
+            .numberColor = FancyZonesUtils::HexToRGB(m_settings->GetSettings()->zoneNumberColor),
            .highlightOpacity = m_settings->GetSettings()->zoneHighlightOpacity
        };
    } 
--- a/src/modules/fancyzones/FancyZonesLib/Resources.resx
+++ b/src/modules/fancyzones/FancyZonesLib/Resources.resx
@@ -266,4 +266,10 @@
  <data name="Setting_Description_System_Theme" xml:space="preserve">
    <value>Use system theme</value>
  </data>
+  <data name="Setting_Description_Zone_Number_Color" xml:space="preserve">
+    <value>Zone number color (Default #000000)</value>
+  </data>
+  <data name="Setting_Description_Show_Zone_Number" xml:space="preserve">
+    <value>Show zone number</value>
+  </data>
 </root>
--- a/src/modules/fancyzones/FancyZonesLib/Settings.cpp
+++ b/src/modules/fancyzones/FancyZonesLib/Settings.cpp
@@ -28,16 +28,18 @@ namespace NonLocalizable
    const wchar_t SpanZonesAcrossMonitorsID[] = L"fancyzones_span_zones_across_monitors";
    const wchar_t MakeDraggedWindowTransparentID[] = L"fancyzones_makeDraggedWindowTransparent";

-    const wchar_t SystemTheme[] = L"fancyzones_systemTheme";
+    const wchar_t SystemThemeID[] = L"fancyzones_systemTheme";
    const wchar_t ZoneColorID[] = L"fancyzones_zoneColor";
    const wchar_t ZoneBorderColorID[] = L"fancyzones_zoneBorderColor";
    const wchar_t ZoneHighlightColorID[] = L"fancyzones_zoneHighlightColor";
+    const wchar_t ZoneNumberColorID[] = L"fancyzones_zoneNumberColor";
    const wchar_t EditorHotkeyID[] = L"fancyzones_editor_hotkey";
    const wchar_t WindowSwitchingToggleID[] = L"fancyzones_windowSwitching";
    const wchar_t NextTabHotkeyID[] = L"fancyzones_nextTab_hotkey";
    const wchar_t PrevTabHotkeyID[] = L"fancyzones_prevTab_hotkey";
    const wchar_t ExcludedAppsID[] = L"fancyzones_excluded_apps";
    const wchar_t ZoneHighlightOpacityID[] = L"fancyzones_highlight_opacity";
+    const wchar_t ShowZoneNumberID[] = L"fancyzones_showZoneNumber";

    const wchar_t ToggleEditorActionID[] = L"ToggledFZEditor";
    const wchar_t IconKeyID[] = L"pt-fancy-zones";
@@ -81,7 +83,7 @@ private:
        PCWSTR name;
        bool* value;
        int resourceId;
-    } m_configBools[18] = {
+    } m_configBools[19] = {
        { NonLocalizable::ShiftDragID, &m_settings.shiftDrag, IDS_SETTING_DESCRIPTION_SHIFTDRAG },
        { NonLocalizable::MouseSwitchID, &m_settings.mouseSwitch, IDS_SETTING_DESCRIPTION_MOUSESWITCH },
        { NonLocalizable::OverrideSnapHotKeysID, &m_settings.overrideSnapHotkeys, IDS_SETTING_DESCRIPTION_OVERRIDE_SNAP_HOTKEYS },
@@ -99,7 +101,8 @@ private:
        { NonLocalizable::SpanZonesAcrossMonitorsID, &m_settings.spanZonesAcrossMonitors, IDS_SETTING_DESCRIPTION_SPAN_ZONES_ACROSS_MONITORS },
        { NonLocalizable::MakeDraggedWindowTransparentID, &m_settings.makeDraggedWindowTransparent, IDS_SETTING_DESCRIPTION_MAKE_DRAGGED_WINDOW_TRANSPARENT },
        { NonLocalizable::WindowSwitchingToggleID, &m_settings.windowSwitching, IDS_SETTING_WINDOW_SWITCHING_TOGGLE_LABEL },
-        { NonLocalizable::SystemTheme, &m_settings.systemTheme, IDS_SETTING_DESCRIPTION_SYSTEM_THEME },
+        { NonLocalizable::SystemThemeID, &m_settings.systemTheme, IDS_SETTING_DESCRIPTION_SYSTEM_THEME },
+        { NonLocalizable::ShowZoneNumberID, &m_settings.showZoneNumber, IDS_SETTING_DESCRIPTION_SHOW_ZONE_NUMBER },
    };
 };

@@ -185,6 +188,11 @@ void FancyZonesSettings::LoadSettings(PCWSTR config, bool fromFile) noexcept
            m_settings.zoneHighlightColor = std::move(*val);
        }

+        if (auto val = values.get_string_value(NonLocalizable::ZoneNumberColorID))
+        {
+            m_settings.zoneNumberColor = std::move(*val);
+        }
+
        if (const auto val = values.get_json(NonLocalizable::EditorHotkeyID))
        {
            m_settings.editorHotkey = PowerToysSettings::HotkeyObject::from_json(*val);
@@ -261,6 +269,7 @@ void FancyZonesSettings::SaveSettings() noexcept
        values.add_property(NonLocalizable::ZoneColorID, m_settings.zoneColor);
        values.add_property(NonLocalizable::ZoneBorderColorID, m_settings.zoneBorderColor);
        values.add_property(NonLocalizable::ZoneHighlightColorID, m_settings.zoneHighlightColor);
+        values.add_property(NonLocalizable::ZoneNumberColorID, m_settings.zoneNumberColor);
        values.add_property(NonLocalizable::ZoneHighlightOpacityID, m_settings.zoneHighlightOpacity);
        values.add_property(NonLocalizable::OverlappingZonesAlgorithmID, (int)m_settings.overlappingZonesAlgorithm);
        values.add_property(NonLocalizable::EditorHotkeyID, m_settings.editorHotkey.get_json());
--- a/src/modules/fancyzones/FancyZonesLib/Settings.h
+++ b/src/modules/fancyzones/FancyZonesLib/Settings.h
@@ -33,9 +33,11 @@ struct Settings
    bool spanZonesAcrossMonitors = false;
    bool makeDraggedWindowTransparent = true;
    bool systemTheme = true;
+    bool showZoneNumber = true;
    std::wstring zoneColor = L"#AACDFF";
    std::wstring zoneBorderColor = L"#FFFFFF";
    std::wstring zoneHighlightColor = L"#008CFF";
+    std::wstring zoneNumberColor = L"#000000";
    int zoneHighlightOpacity = 50;
    OverlappingZonesAlgorithm overlappingZonesAlgorithm = OverlappingZonesAlgorithm::Smallest;
    PowerToysSettings::HotkeyObject editorHotkey = PowerToysSettings::HotkeyObject::from_settings(true, false, false, true, VK_OEM_3);
--- a/src/modules/fancyzones/FancyZonesLib/WorkArea.cpp
+++ b/src/modules/fancyzones/FancyZonesLib/WorkArea.cpp
@@ -109,7 +109,7 @@ public:
    WorkArea(HINSTANCE hinstance);
    ~WorkArea();

-    bool Init(HINSTANCE hinstance, HMONITOR monitor, const FancyZonesDataTypes::DeviceIdData& uniqueId, const FancyZonesDataTypes::DeviceIdData& parentUniqueId, const ZoneColors& zoneColors, OverlappingZonesAlgorithm overlappingAlgorithm);
+    bool Init(HINSTANCE hinstance, HMONITOR monitor, const FancyZonesDataTypes::DeviceIdData& uniqueId, const FancyZonesDataTypes::DeviceIdData& parentUniqueId, const ZoneColors& zoneColors, OverlappingZonesAlgorithm overlappingAlgorithm, const bool showZoneText);

    IFACEMETHODIMP MoveSizeEnter(HWND window) noexcept;
    IFACEMETHODIMP MoveSizeUpdate(POINT const& ptScreen, bool dragEnabled, bool selectManyZones) noexcept;
@@ -172,6 +172,7 @@ private:
    std::unique_ptr<ZonesOverlay> m_zonesOverlay;
    ZoneColors m_zoneColors;
    OverlappingZonesAlgorithm m_overlappingAlgorithm;
+    bool m_showZoneText;
 };

 WorkArea::WorkArea(HINSTANCE hinstance)
@@ -190,10 +191,11 @@ WorkArea::~WorkArea()
    windowPool.FreeZonesOverlayWindow(m_window);
 }

-bool WorkArea::Init(HINSTANCE hinstance, HMONITOR monitor, const FancyZonesDataTypes::DeviceIdData& uniqueId, const FancyZonesDataTypes::DeviceIdData& parentUniqueId, const ZoneColors& zoneColors, OverlappingZonesAlgorithm overlappingAlgorithm)
+bool WorkArea::Init(HINSTANCE hinstance, HMONITOR monitor, const FancyZonesDataTypes::DeviceIdData& uniqueId, const FancyZonesDataTypes::DeviceIdData& parentUniqueId, const ZoneColors& zoneColors, OverlappingZonesAlgorithm overlappingAlgorithm, const bool showZoneText)
 {
    m_zoneColors = zoneColors;
    m_overlappingAlgorithm = overlappingAlgorithm;
+    m_showZoneText = showZoneText;

    Rect workAreaRect;
    m_monitor = monitor;
@@ -275,7 +277,7 @@ IFACEMETHODIMP WorkArea::MoveSizeUpdate(POINT const& ptScreen, bool dragEnabled,

    if (redraw)
    {
-        m_zonesOverlay->DrawActiveZoneSet(m_zoneSet->GetZones(), m_highlightZone, m_zoneColors);
+        m_zonesOverlay->DrawActiveZoneSet(m_zoneSet->GetZones(), m_highlightZone, m_zoneColors, m_showZoneText);
    }

    return S_OK;
@@ -405,7 +407,7 @@ WorkArea::ShowZonesOverlay() noexcept
    if (m_window)
    {
        SetAsTopmostWindow();
-        m_zonesOverlay->DrawActiveZoneSet(m_zoneSet->GetZones(), m_highlightZone, m_zoneColors);
+        m_zonesOverlay->DrawActiveZoneSet(m_zoneSet->GetZones(), m_highlightZone, m_zoneColors, m_showZoneText);
        m_zonesOverlay->Show();
    }
 }
@@ -429,7 +431,7 @@ WorkArea::UpdateActiveZoneSet() noexcept
    if (m_window)
    {
        m_highlightZone.clear();
-        m_zonesOverlay->DrawActiveZoneSet(m_zoneSet->GetZones(), m_highlightZone, m_zoneColors);
+        m_zonesOverlay->DrawActiveZoneSet(m_zoneSet->GetZones(), m_highlightZone, m_zoneColors, m_showZoneText);
    }
 }

@@ -448,7 +450,7 @@ WorkArea::ClearSelectedZones() noexcept
    if (m_highlightZone.size())
    {
        m_highlightZone.clear();
-        m_zonesOverlay->DrawActiveZoneSet(m_zoneSet->GetZones(), m_highlightZone, m_zoneColors);
+        m_zonesOverlay->DrawActiveZoneSet(m_zoneSet->GetZones(), m_highlightZone, m_zoneColors, m_showZoneText);
    }
 }

@@ -458,7 +460,7 @@ WorkArea::FlashZones() noexcept
    if (m_window)
    {
        SetAsTopmostWindow();
-        m_zonesOverlay->DrawActiveZoneSet(m_zoneSet->GetZones(), {}, m_zoneColors);
+        m_zonesOverlay->DrawActiveZoneSet(m_zoneSet->GetZones(), {}, m_zoneColors, m_showZoneText);
        m_zonesOverlay->Flash();
    }
 }
@@ -635,10 +637,10 @@ LRESULT CALLBACK WorkArea::s_WndProc(HWND window, UINT message, WPARAM wparam, L
                                  DefWindowProc(window, message, wparam, lparam);
 }

-winrt::com_ptr<IWorkArea> MakeWorkArea(HINSTANCE hinstance, HMONITOR monitor, const FancyZonesDataTypes::DeviceIdData& uniqueId, const FancyZonesDataTypes::DeviceIdData& parentUniqueId, const ZoneColors& zoneColors, OverlappingZonesAlgorithm overlappingAlgorithm) noexcept
+winrt::com_ptr<IWorkArea> MakeWorkArea(HINSTANCE hinstance, HMONITOR monitor, const FancyZonesDataTypes::DeviceIdData& uniqueId, const FancyZonesDataTypes::DeviceIdData& parentUniqueId, const ZoneColors& zoneColors, OverlappingZonesAlgorithm overlappingAlgorithm, const bool showZoneText) noexcept
 {
    auto self = winrt::make_self<WorkArea>(hinstance);
-    if (self->Init(hinstance, monitor, uniqueId, parentUniqueId, zoneColors, overlappingAlgorithm))
+    if (self->Init(hinstance, monitor, uniqueId, parentUniqueId, zoneColors, overlappingAlgorithm, showZoneText))
    {
        return self;
    }
--- a/src/modules/fancyzones/FancyZonesLib/WorkArea.h
+++ b/src/modules/fancyzones/FancyZonesLib/WorkArea.h
@@ -145,4 +145,4 @@ interface __declspec(uuid("{7F017528-8110-4FB3-BE41-F472969C2560}")) IWorkArea :
    IFACEMETHOD_(void, SetOverlappingZonesAlgorithm)(OverlappingZonesAlgorithm overlappingAlgorithm) = 0;
 };

-winrt::com_ptr<IWorkArea> MakeWorkArea(HINSTANCE hinstance, HMONITOR monitor, const FancyZonesDataTypes::DeviceIdData& uniqueId, const FancyZonesDataTypes::DeviceIdData& parentUniqueId, const ZoneColors& zoneColors, OverlappingZonesAlgorithm overlappingAlgorithm) noexcept;
+winrt::com_ptr<IWorkArea> MakeWorkArea(HINSTANCE hinstance, HMONITOR monitor, const FancyZonesDataTypes::DeviceIdData& uniqueId, const FancyZonesDataTypes::DeviceIdData& parentUniqueId, const ZoneColors& zoneColors, OverlappingZonesAlgorithm overlappingAlgorithm, const bool showZoneText) noexcept;
--- a/src/modules/fancyzones/FancyZonesLib/ZoneColors.h
+++ b/src/modules/fancyzones/FancyZonesLib/ZoneColors.h
@@ -6,6 +6,6 @@ struct ZoneColors
    COLORREF primaryColor;
    COLORREF borderColor;
    COLORREF highlightColor;
-    COLORREF textColor;
+    COLORREF numberColor;
    int highlightOpacity;
 };
--- a/src/modules/fancyzones/FancyZonesLib/ZonesOverlay.cpp
+++ b/src/modules/fancyzones/FancyZonesLib/ZonesOverlay.cpp
@@ -149,7 +149,6 @@ ZonesOverlay::RenderResult ZonesOverlay::Render()
        drawableRect.borderColor.a *= animationAlpha;
        drawableRect.fillColor.a *= animationAlpha;

-        m_renderTarget->CreateSolidColorBrush(drawableRect.textColor, &textBrush);
        m_renderTarget->CreateSolidColorBrush(drawableRect.borderColor, &borderBrush);
        m_renderTarget->CreateSolidColorBrush(drawableRect.fillColor, &fillBrush);

@@ -167,16 +166,21 @@ ZonesOverlay::RenderResult ZonesOverlay::Render()

        std::wstring idStr = std::to_wstring(drawableRect.id + 1);

-        if (textFormat && textBrush)
+        if (drawableRect.showText)
        {
-            textFormat->SetTextAlignment(DWRITE_TEXT_ALIGNMENT_CENTER);
-            textFormat->SetParagraphAlignment(DWRITE_PARAGRAPH_ALIGNMENT_CENTER);
-            m_renderTarget->DrawTextW(idStr.c_str(), (UINT32)idStr.size(), textFormat, drawableRect.rect, textBrush);
-        }
+            m_renderTarget->CreateSolidColorBrush(drawableRect.textColor, &textBrush);

-        if (textBrush)
-        {
-            textBrush->Release();
+            if (textFormat && textBrush)
+            {
+                textFormat->SetTextAlignment(DWRITE_TEXT_ALIGNMENT_CENTER);
+                textFormat->SetParagraphAlignment(DWRITE_PARAGRAPH_ALIGNMENT_CENTER);
+                m_renderTarget->DrawTextW(idStr.c_str(), (UINT32)idStr.size(), textFormat, drawableRect.rect, textBrush);
+            }
+
+            if (textBrush)
+            {
+                textBrush->Release();
+            }
        }
    }

@@ -278,7 +282,8 @@ void ZonesOverlay::Flash()

 void ZonesOverlay::DrawActiveZoneSet(const IZoneSet::ZonesMap& zones,
                                     const ZoneIndexSet& highlightZones,
-                                     const ZoneColors& colors)
+                                     const ZoneColors& colors,
+                                     const bool showZoneText)
 {
    _TRACER_;
    std::unique_lock lock(m_mutex);
@@ -288,7 +293,7 @@ void ZonesOverlay::DrawActiveZoneSet(const IZoneSet::ZonesMap& zones,
    auto borderColor = ConvertColor(colors.borderColor);
    auto inactiveColor = ConvertColor(colors.primaryColor);
    auto highlightColor = ConvertColor(colors.highlightColor);
-    auto textColor = ConvertColor(colors.textColor);
+    auto numberColor = ConvertColor(colors.numberColor);

    inactiveColor.a = colors.highlightOpacity / 100.f;
    highlightColor.a = colors.highlightOpacity / 100.f;
@@ -313,8 +318,9 @@ void ZonesOverlay::DrawActiveZoneSet(const IZoneSet::ZonesMap& zones,
                .rect = ConvertRect(zone->GetZoneRect()),
                .borderColor = borderColor,
                .fillColor = inactiveColor,
-                .textColor = textColor,
-                .id = zone->Id()
+                .textColor = numberColor,
+                .id = zone->Id(),
+                .showText = showZoneText
            };

            m_sceneRects.push_back(drawableRect);
@@ -335,8 +341,9 @@ void ZonesOverlay::DrawActiveZoneSet(const IZoneSet::ZonesMap& zones,
                .rect = ConvertRect(zone->GetZoneRect()),
                .borderColor = borderColor,
                .fillColor = highlightColor,
-                .textColor = textColor,
-                .id = zone->Id()
+                .textColor = numberColor,
+                .id = zone->Id(),
+                .showText = showZoneText
            };

            m_sceneRects.push_back(drawableRect);
--- a/src/modules/fancyzones/FancyZonesLib/ZonesOverlay.h
+++ b/src/modules/fancyzones/FancyZonesLib/ZonesOverlay.h
@@ -22,6 +22,7 @@ class ZonesOverlay
        D2D1_COLOR_F fillColor;
        D2D1_COLOR_F textColor;
        ZoneIndex id;
+        bool showText;
    };

    struct AnimationInfo
@@ -67,5 +68,6 @@ public:
    void Flash();
    void DrawActiveZoneSet(const IZoneSet::ZonesMap& zones,
                           const ZoneIndexSet& highlightZones,
-                           const ZoneColors& colors);
+                           const ZoneColors& colors,
+                           const bool showZoneText);
 };
--- a/src/modules/fancyzones/FancyZonesTests/UnitTests/WorkArea.Spec.cpp
+++ b/src/modules/fancyzones/FancyZonesTests/UnitTests/WorkArea.Spec.cpp
@@ -32,6 +32,7 @@ namespace FancyZonesUnitTests
        GUID m_virtualDesktopGuid{};
        ZoneColors m_zoneColors{};
        OverlappingZonesAlgorithm m_overlappingAlgorithm = OverlappingZonesAlgorithm::Positional;
+        bool m_showZoneText = true;

        FancyZonesData& m_fancyZonesData = FancyZonesDataInstance();

@@ -78,7 +79,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (CreateWorkArea)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                testWorkArea(workArea);

                auto* zoneSet{ workArea->ZoneSet() };
@@ -89,7 +90,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (CreateWorkAreaNoHinst)
            {
-                auto workArea = MakeWorkArea({}, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea({}, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                testWorkArea(workArea);

                auto* zoneSet{ workArea->ZoneSet() };
@@ -100,7 +101,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (CreateWorkAreaNoHinstFlashZones)
            {
-                auto workArea = MakeWorkArea({}, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea({}, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                testWorkArea(workArea);

                auto* zoneSet{ workArea->ZoneSet() };
@@ -111,7 +112,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (CreateWorkAreaNoMonitor)
            {
-                auto workArea = MakeWorkArea(m_hInst, {}, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, {}, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                testWorkArea(workArea);
            }

@@ -130,7 +131,7 @@ namespace FancyZonesUnitTests
                    uniqueIdData.height = monitorRect.height();
                }

-                auto workArea = MakeWorkArea(m_hInst, m_monitor, uniqueIdData, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, uniqueIdData, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const std::wstring expectedWorkArea = std::to_wstring(m_monitorInfo.rcMonitor.right) + L"_" + std::to_wstring(m_monitorInfo.rcMonitor.bottom);
                const FancyZonesDataTypes::DeviceIdData expectedUniqueId{ L"FallbackDevice", m_monitorInfo.rcMonitor.right - m_monitorInfo.rcMonitor.left, m_monitorInfo.rcMonitor.bottom - m_monitorInfo.rcMonitor.top, m_virtualDesktopGuid };
@@ -159,7 +160,7 @@ namespace FancyZonesUnitTests
                    uniqueId.height = monitorRect.height();
                }

-                auto workArea = MakeWorkArea(m_hInst, m_monitor, uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const std::wstring expectedWorkArea = std::to_wstring(m_monitorInfo.rcMonitor.right) + L"_" + std::to_wstring(m_monitorInfo.rcMonitor.bottom);
                Assert::IsNotNull(workArea.get());
@@ -182,10 +183,10 @@ namespace FancyZonesUnitTests
                const auto parentDeviceInfo = DeviceInfoData{ parentZoneSet, true, spacing, zoneCount };
                m_fancyZonesData.SetDeviceInfo(m_parentUniqueId, parentDeviceInfo);

-                auto parentWorkArea = MakeWorkArea(m_hInst, m_monitor, m_parentUniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto parentWorkArea = MakeWorkArea(m_hInst, m_monitor, m_parentUniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                
                // newWorkArea = false - workArea won't be cloned from parent
-                auto actualWorkArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto actualWorkArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                Assert::IsNotNull(actualWorkArea->ZoneSet());

@@ -208,6 +209,7 @@ namespace FancyZonesUnitTests
        MONITORINFO m_monitorInfo{};
        ZoneColors m_zoneColors{};
        OverlappingZonesAlgorithm m_overlappingAlgorithm = OverlappingZonesAlgorithm::Positional;
+        bool m_showZoneText = true;

        FancyZonesData& m_fancyZonesData = FancyZonesDataInstance();

@@ -238,7 +240,7 @@ namespace FancyZonesUnitTests
        public:
            TEST_METHOD (MoveSizeEnter)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const auto expected = S_OK;
                const auto actual = workArea->MoveSizeEnter(Mocks::Window());
@@ -248,7 +250,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveSizeEnterTwice)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const auto expected = S_OK;

@@ -260,7 +262,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveSizeUpdate)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const auto expected = S_OK;
                const auto actual = workArea->MoveSizeUpdate(POINT{ 0, 0 }, true, false);
@@ -270,7 +272,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveSizeUpdatePointNegativeCoordinates)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const auto expected = S_OK;
                const auto actual = workArea->MoveSizeUpdate(POINT{ -10, -10 }, true, false);
@@ -280,7 +282,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveSizeUpdatePointBigCoordinates)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const auto expected = S_OK;
                const auto actual = workArea->MoveSizeUpdate(POINT{ m_monitorInfo.rcMonitor.right + 1, m_monitorInfo.rcMonitor.bottom + 1 }, true, false);
@@ -290,7 +292,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveSizeEnd)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const auto window = Mocks::Window();
                workArea->MoveSizeEnter(window);
@@ -307,7 +309,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveSizeEndWindowNotAdded)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const auto window = Mocks::Window();
                workArea->MoveSizeEnter(window);
@@ -323,7 +325,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveSizeEndDifferentWindows)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const auto window = Mocks::Window();
                workArea->MoveSizeEnter(window);
@@ -336,7 +338,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveSizeEndWindowNotSet)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const auto expected = E_INVALIDARG;
                const auto actual = workArea->MoveSizeEnd(Mocks::Window(), POINT{ 0, 0 });
@@ -346,7 +348,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveSizeEndInvalidPoint)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);

                const auto window = Mocks::Window();
                workArea->MoveSizeEnter(window);
@@ -363,7 +365,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveWindowIntoZoneByIndex)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                Assert::IsNotNull(workArea->ZoneSet());

                workArea->MoveWindowIntoZoneByIndex(Mocks::Window(), 0);
@@ -373,7 +375,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveWindowIntoZoneByDirectionAndIndex)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                Assert::IsNotNull(workArea->ZoneSet());

                const auto window = Mocks::WindowCreate(m_hInst);
@@ -388,7 +390,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (MoveWindowIntoZoneByDirectionManyTimes)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                Assert::IsNotNull(workArea->ZoneSet());

                const auto window = Mocks::WindowCreate(m_hInst);
@@ -405,7 +407,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (SaveWindowProcessToZoneIndexNullptrWindow)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                Assert::IsNotNull(workArea->ZoneSet());

                workArea->SaveWindowProcessToZoneIndex(nullptr);
@@ -416,7 +418,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (SaveWindowProcessToZoneIndexNoWindowAdded)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                Assert::IsNotNull(workArea->ZoneSet());

                auto window = Mocks::WindowCreate(m_hInst);
@@ -431,7 +433,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (SaveWindowProcessToZoneIndexNoWindowAddedWithFilledAppZoneHistory)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                Assert::IsNotNull(workArea->ZoneSet());

                const auto window = Mocks::WindowCreate(m_hInst);
@@ -459,7 +461,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (SaveWindowProcessToZoneIndexWindowAdded)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                Assert::IsNotNull(workArea->ZoneSet());

                auto window = Mocks::WindowCreate(m_hInst);
@@ -489,7 +491,7 @@ namespace FancyZonesUnitTests

            TEST_METHOD (WhenWindowIsNotResizablePlacingItIntoTheZoneShouldNotResizeIt)
            {
-                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm);
+                auto workArea = MakeWorkArea(m_hInst, m_monitor, m_uniqueId, {}, m_zoneColors, m_overlappingAlgorithm, m_showZoneText);
                Assert::IsNotNull(workArea->ZoneSet());

                auto window = Mocks::WindowCreate(m_hInst);
--- a/src/settings-ui/Settings.UI.Library/ConfigDefaults.cs
+++ b/src/settings-ui/Settings.UI.Library/ConfigDefaults.cs
@@ -10,6 +10,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library
        public static readonly string DefaultFancyZonesZoneHighlightColor = "#0078D7";
        public static readonly string DefaultFancyZonesInActiveColor = "#F5FCFF";
        public static readonly string DefaultFancyzonesBorderColor = "#FFFFFF";
+        public static readonly string DefaultFancyzonesNumberColor = "#000000";

        // Fancy Zones Default Flags.
        public static readonly bool DefaultFancyzonesShiftDrag = true;
--- a/src/settings-ui/Settings.UI.Library/FZConfigProperties.cs
+++ b/src/settings-ui/Settings.UI.Library/FZConfigProperties.cs
@@ -1,4 +1,4 @@
-// Copyright (c) Microsoft Corporation
+// Copyright (c) Microsoft Corporation
 // The Microsoft Corporation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.

@@ -46,7 +46,9 @@ namespace Microsoft.PowerToys.Settings.UI.Library
            FancyzonesExcludedApps = new StringProperty();
            FancyzonesInActiveColor = new StringProperty(ConfigDefaults.DefaultFancyZonesInActiveColor);
            FancyzonesBorderColor = new StringProperty(ConfigDefaults.DefaultFancyzonesBorderColor);
+            FancyzonesNumberColor = new StringProperty(ConfigDefaults.DefaultFancyzonesNumberColor);
            FancyzonesSystemTheme = new BoolProperty(true);
+            FancyzonesShowZoneNumber = new BoolProperty(true);
        }

        [JsonPropertyName("fancyzones_shiftDrag")]
@@ -127,9 +129,15 @@ namespace Microsoft.PowerToys.Settings.UI.Library
        [JsonPropertyName("fancyzones_zoneColor")]
        public StringProperty FancyzonesInActiveColor { get; set; }

+        [JsonPropertyName("fancyzones_zoneNumberColor")]
+        public StringProperty FancyzonesNumberColor { get; set; }
+
        [JsonPropertyName("fancyzones_systemTheme")]
        public BoolProperty FancyzonesSystemTheme { get; set; }

+        [JsonPropertyName("fancyzones_showZoneNumber")]
+        public BoolProperty FancyzonesShowZoneNumber { get; set; }
+
        // converts the current to a json string.
        public string ToJsonString()
        {
--- a/src/settings-ui/Settings.UI.Library/ViewModels/FancyZonesViewModel.cs
+++ b/src/settings-ui/Settings.UI.Library/ViewModels/FancyZonesViewModel.cs
@@ -3,8 +3,6 @@
 // See the LICENSE file in the project root for more information.

 using System;
-using System.Drawing;
-using System.Globalization;
 using System.Runtime.CompilerServices;
 using Microsoft.PowerToys.Settings.UI.Library.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
@@ -89,6 +87,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
            _highlightOpacity = Settings.Properties.FancyzonesHighlightOpacity.Value;
            _excludedApps = Settings.Properties.FancyzonesExcludedApps.Value;
            _systemTheme = Settings.Properties.FancyzonesSystemTheme.Value;
+            _showZoneNumber = Settings.Properties.FancyzonesShowZoneNumber.Value;
            EditorHotkey = Settings.Properties.FancyzonesEditorHotkey.Value;
            _windowSwitching = Settings.Properties.FancyzonesWindowSwitching.Value;
            NextTabHotkey = Settings.Properties.FancyzonesNextTabHotkey.Value;
@@ -98,13 +97,16 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
            SendConfigMSG = ipcMSGCallBackFunc;

            string inactiveColor = Settings.Properties.FancyzonesInActiveColor.Value;
-            _zoneInActiveColor = !string.IsNullOrEmpty(inactiveColor) ? inactiveColor : "#F5FCFF";
+            _zoneInActiveColor = !string.IsNullOrEmpty(inactiveColor) ? inactiveColor : ConfigDefaults.DefaultFancyZonesInActiveColor;

            string borderColor = Settings.Properties.FancyzonesBorderColor.Value;
-            _zoneBorderColor = !string.IsNullOrEmpty(borderColor) ? borderColor : "#FFFFFF";
+            _zoneBorderColor = !string.IsNullOrEmpty(borderColor) ? borderColor : ConfigDefaults.DefaultFancyzonesBorderColor;

            string highlightColor = Settings.Properties.FancyzonesZoneHighlightColor.Value;
-            _zoneHighlightColor = !string.IsNullOrEmpty(highlightColor) ? highlightColor : "#0078D7";
+            _zoneHighlightColor = !string.IsNullOrEmpty(highlightColor) ? highlightColor : ConfigDefaults.DefaultFancyZonesZoneHighlightColor;
+
+            string numberColor = Settings.Properties.FancyzonesNumberColor.Value;
+            _zoneNumberColor = !string.IsNullOrEmpty(numberColor) ? numberColor : ConfigDefaults.DefaultFancyzonesNumberColor;

            _isEnabled = GeneralSettingsConfig.Enabled.FancyZones;
        }
@@ -128,6 +130,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
        private bool _showOnAllMonitors;
        private bool _makeDraggedWindowTransparent;
        private bool _systemTheme;
+        private bool _showZoneNumber;

        private int _highlightOpacity;
        private string _excludedApps;
@@ -138,6 +141,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
        private string _zoneInActiveColor;
        private string _zoneBorderColor;
        private string _zoneHighlightColor;
+        private string _zoneNumberColor;

        public bool IsEnabled
        {
@@ -540,6 +544,24 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
            }
        }

+        public bool ShowZoneNumber
+        {
+            get
+            {
+                return _showZoneNumber;
+            }
+
+            set
+            {
+                if (value != _showZoneNumber)
+                {
+                    _showZoneNumber = value;
+                    Settings.Properties.FancyzonesShowZoneNumber.Value = value;
+                    NotifyPropertyChanged();
+                }
+            }
+        }
+
        // For the following setters we use OrdinalIgnoreCase string comparison since
        // we expect value to be a hex code.
        public string ZoneHighlightColor
@@ -608,6 +630,28 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
            }
        }

+        public string ZoneNumberColor
+        {
+            get
+            {
+                return _zoneNumberColor;
+            }
+
+            set
+            {
+                // The fallback value is based on ToRGBHex's behavior, which returns
+                // #FFFFFF if any exceptions are encountered, e.g. from passing in a null value.
+                // This extra handling is added here to deal with FxCop warnings.
+                value = (value != null) ? SettingsUtilities.ToRGBHex(value) : "#FFFFFF";
+                if (!value.Equals(_zoneNumberColor, StringComparison.OrdinalIgnoreCase))
+                {
+                    _zoneNumberColor = value;
+                    Settings.Properties.FancyzonesNumberColor.Value = value;
+                    NotifyPropertyChanged();
+                }
+            }
+        }
+
        public int HighlightOpacity
        {
            get
--- a/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml
+++ b/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml
@@ -15,16 +15,20 @@
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="SolidBackgroundBrush" Color="Black" />
+                    <SolidColorBrush x:Key="SolidZoneNumberBrush" Color="White" />
                </ResourceDictionary>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="SolidBackgroundBrush" Color="White" />
+                    <SolidColorBrush x:Key="SolidZoneNumberBrush" Color="Black" />
                </ResourceDictionary>
                <ResourceDictionary x:Key="HighContrast">
                    <SolidColorBrush x:Key="SolidBackgroundBrush" Color="Black" />
+                    <SolidColorBrush x:Key="SolidZoneNumberBrush" Color="White" />
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
            <SolidColorBrush x:Key="DefaultAccentBrush" Color="{ThemeResource SystemAccentColor}"/>
            <SolidColorBrush x:Key="DefaultBorderBrush" Color="{ThemeResource SystemAccentColor}"/>
+            <converters:BoolToObjectConverter x:Key="BoolToVisibilityConverter" TrueValue="Visible" FalseValue="Collapsed"/>
        </ResourceDictionary>
      
    </UserControl.Resources>
@@ -43,8 +47,14 @@
        </Border>
     
        <Grid Background="{ThemeResource SystemControlAcrylicElementBrush}" Grid.Row="2"  Grid.ColumnSpan="2"/>
-        <Border x:Name="Zone1" Margin="4,4,2,4" CornerRadius="2" Grid.RowSpan="2" BorderThickness="1"/>
-        <Border x:Name="Zone2" Margin="2,4,4,2" CornerRadius="2" Grid.Column="1" BorderThickness="1"/>
-        <Border x:Name="Zone3" Margin="2,2,4,4" CornerRadius="2" Grid.Row="1" Grid.Column="1" BorderThickness="1"/>
+        <Border x:Name="Zone1" Margin="4,4,2,4" CornerRadius="2" Grid.RowSpan="2" BorderThickness="1">
+            <TextBlock x:Name="Zone1Number" Text="1" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="{x:Bind ShowZoneNumber, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
+        </Border>
+        <Border x:Name="Zone2" Margin="2,4,4,2" CornerRadius="2" Grid.Column="1" BorderThickness="1">
+            <TextBlock x:Name="Zone2Number" Text="2" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="{x:Bind ShowZoneNumber, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
+        </Border>
+        <Border x:Name="Zone3" Margin="2,2,4,4" CornerRadius="2" Grid.Row="1" Grid.Column="1" BorderThickness="1">
+            <TextBlock x:Name="Zone3Number" Text="3" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="{x:Bind ShowZoneNumber, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
+        </Border>
    </Grid>
 </UserControl>
--- a/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml.cs
+++ b/src/settings-ui/Settings.UI/Controls/FancyZonesPreviewControl.xaml.cs
@@ -40,14 +40,14 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
            set { SetValue(IsSystemThemeProperty, value); }
        }

+        public static readonly DependencyProperty IsSystemThemeProperty = DependencyProperty.Register("IsSystemTheme", typeof(bool), typeof(FancyZonesPreviewControl), new PropertyMetadata(default(bool), OnPropertyChanged));
+
        public string WallpaperPath
        {
            get { return (string)GetValue(WallpaperPathProperty); }
            set { SetValue(WallpaperPathProperty, value); }
        }

-        public static readonly DependencyProperty IsSystemThemeProperty = DependencyProperty.Register("IsSystemTheme", typeof(bool), typeof(FancyZonesPreviewControl), new PropertyMetadata(default(bool), OnPropertyChanged));
-
        public static readonly DependencyProperty WallpaperPathProperty = DependencyProperty.Register("WallpaperPath", typeof(string), typeof(FancyZonesPreviewControl), new PropertyMetadata("ms-appx:///Assets/wallpaper_placeholder.png"));

        public Color CustomBorderColor
@@ -74,6 +74,22 @@ namespace Microsoft.PowerToys.Settings.UI.Controls

        public static readonly DependencyProperty CustomHighlightColorProperty = DependencyProperty.Register("CustomHighlightColor", typeof(Color), typeof(FancyZonesPreviewControl), new PropertyMetadata(null, OnPropertyChanged));

+        public Color CustomNumberColor
+        {
+            get { return (Color)GetValue(CustomNumberColorProperty); }
+            set { SetValue(CustomNumberColorProperty, value); }
+        }
+
+        public static readonly DependencyProperty CustomNumberColorProperty = DependencyProperty.Register("CustomNumberColor", typeof(Color), typeof(FancyZonesPreviewControl), new PropertyMetadata(null, OnPropertyChanged));
+
+        public bool ShowZoneNumber
+        {
+            get { return (bool)GetValue(ShowZoneNumberProperty); }
+            set { SetValue(ShowZoneNumberProperty, value); }
+        }
+
+        public static readonly DependencyProperty ShowZoneNumberProperty = DependencyProperty.Register("ShowZoneNumber", typeof(bool), typeof(FancyZonesPreviewControl), new PropertyMetadata(default(bool), OnPropertyChanged));
+
        public double HighlightOpacity
        {
            get { return (double)GetValue(HighlightOpacityProperty); }
@@ -90,6 +106,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
        private SolidColorBrush highlightBrush;
        private SolidColorBrush inActiveBrush;
        private SolidColorBrush borderBrush;
+        private SolidColorBrush numberBrush;

        private void Update()
        {
@@ -98,12 +115,14 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                highlightBrush = new SolidColorBrush(CustomHighlightColor);
                inActiveBrush = new SolidColorBrush(CustomInActiveColor);
                borderBrush = new SolidColorBrush(CustomBorderColor);
+                numberBrush = new SolidColorBrush(CustomNumberColor);
            }
            else
            {
                highlightBrush = (SolidColorBrush)this.Resources["DefaultAccentBrush"];
                inActiveBrush = (SolidColorBrush)this.Resources["SolidBackgroundBrush"];
                borderBrush = (SolidColorBrush)this.Resources["DefaultBorderBrush"];
+                numberBrush = (SolidColorBrush)this.Resources["SolidZoneNumberBrush"];
            }

            highlightBrush.Opacity = HighlightOpacity / 100;
@@ -115,6 +134,10 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
            Zone1.BorderBrush = borderBrush;
            Zone2.BorderBrush = borderBrush;
            Zone3.BorderBrush = borderBrush;
+
+            Zone1Number.Foreground = numberBrush;
+            Zone2Number.Foreground = numberBrush;
+            Zone3Number.Foreground = numberBrush;
        }
    }
 }
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -1550,7 +1550,7 @@ From there, simply click on a Markdown file, PDF file or SVG icon in the File Ex
  <data name="EditButton.AutomationProperties.Name" xml:space="preserve">
    <value>Edit</value>
  </data>
-  <data name="ImageResizer_EditSize.AutomationProperties.Name" xml:space="preserve">
+    <data name="ImageResizer_EditSize.AutomationProperties.Name" xml:space="preserve">
    <value>Edit size</value>
  </data>
  <data name="No" xml:space="preserve">
@@ -1848,6 +1848,12 @@ From there, simply click on a Markdown file, PDF file or SVG icon in the File Ex
    <value>Enable G-code (.gcode) preview</value>
    <comment>Do you want this feature on / off</comment>
  </data>
+  <data name="FancyZones_NumberColor.Header" xml:space="preserve">
+    <value>Number color</value>
+  </data>
+  <data name="FancyZones_ShowZoneNumberCheckBoxControl.Content" xml:space="preserve">
+    <value>Show zone number</value>
+  </data>
  <data name="ToggleSwitch.OffContent" xml:space="preserve">
    <value>Off</value>
    <comment>The state of a ToggleSwitch when it's off</comment>
--- a/src/settings-ui/Settings.UI/Views/FancyZonesPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/FancyZonesPage.xaml
@@ -113,11 +113,17 @@
                                                                   CustomHighlightColor="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=OneWay}"
                                                                   CustomBorderColor="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=OneWay}"
                                                                   CustomInActiveColor="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=OneWay}"
+                                                                   CustomNumberColor="{x:Bind Path=ViewModel.ZoneNumberColor, Mode=OneWay}"
+                                                                   ShowZoneNumber="{x:Bind Path=ViewModel.ShowZoneNumber, Mode=OneWay}"
                                                                   Margin="{StaticResource ExpanderSettingMargin}" 
                                                                   HorizontalAlignment="Left"
                                                                   Width="170"
                                                                   Grid.Column="1"
                                                                   Height="86"/>
+                                
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
+                                <CheckBox x:Uid="FancyZones_ShowZoneNumberCheckBoxControl" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShowZoneNumber}" Margin="{StaticResource ExpanderSettingMargin}"/>
+                                
                                <controls:Setting x:Uid="FancyZones_HighlightOpacity" Style="{StaticResource ExpanderContentSettingStyle}">
                                    <controls:Setting.ActionContent>
                                        <Slider Minimum="0"
@@ -127,7 +133,7 @@
                                            HorizontalAlignment="Right"/>
                                    </controls:Setting.ActionContent>
                                </controls:Setting>
-
+                                      
                                <StackPanel Visibility="{x:Bind Mode=OneWay, Path=ViewModel.SystemTheme, Converter={StaticResource FalseToVisibleConverter}}" >
                                    <controls:Setting x:Uid="FancyZones_ZoneHighlightColor" Style="{StaticResource ExpanderContentSettingStyle}">
                                        <controls:Setting.ActionContent>
@@ -146,6 +152,12 @@
                                            <controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}" />
                                        </controls:Setting.ActionContent>
                                    </controls:Setting>
+                                    
+                                    <controls:Setting x:Uid="FancyZones_NumberColor" Style="{StaticResource ExpanderContentSettingStyle}">
+                                        <controls:Setting.ActionContent>
+                                            <controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.ZoneNumberColor, Mode=TwoWay}" />
+                                        </controls:Setting.ActionContent>
+                                    </controls:Setting>
                                </StackPanel>
                            </StackPanel>
                        </controls:SettingExpander.Content>