[FancyZones] Zone Number Settings (#14910)

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
         };
     } 

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>

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());

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);

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;
     }

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;

src/modules/fancyzones/FancyZonesLib/ZoneColors.h

@@ -6,6 +6,6 @@ struct ZoneColors
     COLORREF primaryColor;
     COLORREF borderColor;
     COLORREF highlightColor;
-    COLORREF textColor;
+    COLORREF numberColor;
     int highlightOpacity;
 };

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);
+            m_renderTarget->CreateSolidColorBrush(drawableRect.textColor, &textBrush);
-            textFormat->SetParagraphAlignment(DWRITE_PARAGRAPH_ALIGNMENT_CENTER);
-            m_renderTarget->DrawTextW(idStr.c_str(), (UINT32)idStr.size(), textFormat, drawableRect.rect, textBrush);
-        }
 
-        if (textBrush)
+            if (textFormat && textBrush)
-        {
+            {
-            textBrush->Release();
+                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,
+                .textColor = numberColor,
-                .id = zone->Id()
+                .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,
+                .textColor = numberColor,
-                .id = zone->Id()
+                .id = zone->Id(),
+                .showText = showZoneText
             };
 
             m_sceneRects.push_back(drawableRect);

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);
 };

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);

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;

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()
         {

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

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="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"/>
+            <TextBlock x:Name="Zone1Number" Text="1" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="{x:Bind ShowZoneNumber, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
-        <Border x:Name="Zone3" Margin="2,2,4,4" CornerRadius="2" Grid.Row="1" Grid.Column="1" BorderThickness="1"/>
+        </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>

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;
         }
     }
 }

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>

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>