SerenityOS · bplaat · Sep 7, 2025 · Sep 7, 2025
diff --git a/Base/res/themes/Basalt.ini b/Base/res/themes/Basalt.ini
@@ -75,6 +75,8 @@ Tooltip=#1f1f1f
 TooltipText=white
 Tray=#171717
 TrayText=white
+OverlayBackground=#1f1f1f
+OverlayText=white
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Chillychilly.ini b/Base/res/themes/Chillychilly.ini
@@ -81,6 +81,8 @@ Tooltip=#ffffe1
 TooltipText=#0c1f16
 Tray=#cfdbd5
 TrayText=#353535
+OverlayBackground=black
+OverlayText=white
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Coffee.ini b/Base/res/themes/Coffee.ini
@@ -71,6 +71,8 @@ Tooltip=#ffffe1
 TooltipText=black
 Tray=#9397a5
 TrayText=white
+OverlayBackground=#e6e6e6
+OverlayText=black
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Contrast.ini b/Base/res/themes/Contrast.ini
@@ -101,3 +101,5 @@ HighlightWindowTitleShadow=#600707ff
 HighlightWindowTitleStripes=#614a87ff
 RubberBandFill=#12ced33c
 RubberBandBorder=#09eaf0ff
+OverlayBackground=black
+OverlayText=white
diff --git a/Base/res/themes/Cupertino.ini b/Base/res/themes/Cupertino.ini
@@ -71,6 +71,8 @@ Tooltip=#363636
 TooltipText=white
 Tray=#212121
 TrayText=#fcfcfc
+OverlayBackground=#292929
+OverlayText=#fcfcfc
 
 [Alignments]
 TitleAlignment=Center

diff --git a/Base/res/themes/Dark.ini b/Base/res/themes/Dark.ini
@@ -67,6 +67,8 @@ Tooltip=#444444
 TooltipText=white
 Tray=#323232
 TrayText=white
+OverlayBackground=#323232
+OverlayText=white
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Default.ini b/Base/res/themes/Default.ini
@@ -81,6 +81,8 @@ Tooltip=#ffffe1
 TooltipText=black
 Tray=#808080
 TrayText=#ffffff
+OverlayBackground=black
+OverlayText=white
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Desert.ini b/Base/res/themes/Desert.ini
@@ -75,6 +75,8 @@ Tooltip=white
 TooltipText=black
 Tray=#a28d68
 TrayText=white
+OverlayBackground=#d5ccbb
+OverlayText=black
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Durrque.ini b/Base/res/themes/Durrque.ini
@@ -105,3 +105,5 @@ Selection=#1f6febff
 RubberBandBorder=#1f6febff
 MovingWindowTitle=#ffffdfff
 HoverHighlight=#1f6febff
+OverlayBackground=black
+OverlayText=white
diff --git a/Base/res/themes/Faux Pas.ini b/Base/res/themes/Faux Pas.ini
@@ -67,6 +67,8 @@ Tooltip=#ffffe1
 TooltipText=black
 Tray=#282828
 TrayText=white
+OverlayBackground=#a0a0a0
+OverlayText=black
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Gruvbox Dark.ini b/Base/res/themes/Gruvbox Dark.ini
@@ -67,6 +67,8 @@ Tooltip=#504945
 TooltipText=#ebdbb2
 Tray=#32302f
 TrayText=#ebdbb2
+OverlayBackground=black
+OverlayText=white
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Light.ini b/Base/res/themes/Light.ini
@@ -75,6 +75,8 @@ Tooltip=#fbeaa0
 TooltipText=#4b4b4b
 Tray=#3b3b3b
 TrayText=white
+OverlayBackground=black
+OverlayText=white
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Nord.ini b/Base/res/themes/Nord.ini
@@ -67,6 +67,8 @@ Tooltip=#4c566a
 TooltipText=white
 Tray=#3b4252
 TrayText=white
+OverlayBackground=#2e3440
+OverlayText=white
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Olive.ini b/Base/res/themes/Olive.ini
@@ -95,3 +95,5 @@ InactiveWindowTitleStripes=#808080ff
 MenuBase=#ffffffff
 FocusOutline=#909090ff
 HighlightWindowTitleStripes=#4d7a0bff
+OverlayBackground=black
+OverlayText=white
diff --git a/Base/res/themes/Plum.ini b/Base/res/themes/Plum.ini
@@ -75,6 +75,8 @@ Tooltip=#ffffe1
 TooltipText=black
 Tray=#808080
 TrayText=#ffffff
+OverlayBackground=black
+OverlayText=white
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Pumpkin.ini b/Base/res/themes/Pumpkin.ini
@@ -95,3 +95,5 @@ InactiveWindowTitleStripes=#ce7526ff
 MenuBase=#ffffffff
 FocusOutline=#909090ff
 HighlightWindowTitleStripes=#bf600cff
+OverlayBackground=black
+OverlayText=white
diff --git a/Base/res/themes/Redmond 2000.ini b/Base/res/themes/Redmond 2000.ini
@@ -71,6 +71,8 @@ Tooltip=#ffffe1
 TooltipText=black
 Tray=#808080
 TrayText=white
+OverlayBackground=#d4d0c8
+OverlayText=black
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Redmond Glass.ini b/Base/res/themes/Redmond Glass.ini
@@ -85,6 +85,8 @@ Tooltip=#ffffe1
 TooltipText=black
 Tray=#808080
 TrayText=#ffffff
+OverlayBackground=black
+OverlayText=white
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Redmond Plastic.ini b/Base/res/themes/Redmond Plastic.ini
@@ -85,6 +85,8 @@ Tooltip=#ffffe1
 TooltipText=black
 Tray=#808080
 TrayText=#ffffff
+OverlayBackground=black
+OverlayText=white
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Redmond.ini b/Base/res/themes/Redmond.ini
@@ -71,6 +71,8 @@ Tooltip=#ffffe1
 TooltipText=black
 Tray=#808080
 TrayText=white
+OverlayBackground=#bfb8bf
+OverlayText=black
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Base/res/themes/Scarlett.ini b/Base/res/themes/Scarlett.ini
@@ -95,3 +95,5 @@ InactiveWindowTitleStripes=#808080ff
 MenuBase=#ffffffff
 FocusOutline=#909090ff
 HighlightWindowTitleStripes=#7a0606ff
+OverlayBackground=black
+OverlayText=white
diff --git a/Base/res/themes/Silver.ini b/Base/res/themes/Silver.ini
@@ -98,3 +98,5 @@ Tooltip=#ffffe1ff
 TooltipText=#000000ff
 Tray=#3b3b3bff
 TrayText=#ffffffff
+OverlayBackground=#ddddddff
+OverlayText=#2f3436ff
diff --git a/Base/res/themes/Sunshine.ini b/Base/res/themes/Sunshine.ini
@@ -75,6 +75,8 @@ Tooltip=#ffffe1
 TooltipText=black
 Tray=#9397a5
 TrayText=white
+OverlayBackground=#aeb2c3
+OverlayText=black
 
 [Alignments]
 TitleAlignment=Left

diff --git a/Userland/Applications/ThemeEditor/MainWidget.cpp b/Userland/Applications/ThemeEditor/MainWidget.cpp
@@ -59,8 +59,7 @@ static PropertyTab const window_tab {
                 { Gfx::ColorRole::ActiveWindowTitle },
                 { Gfx::ColorRole::ActiveWindowTitleShadow },
                 { Gfx::ColorRole::ActiveWindowTitleStripes },
-                { Gfx::PathRole::ActiveWindowShadow },
-                { Gfx::PathRole::OverlayRectShadow } } },
+                { Gfx::PathRole::ActiveWindowShadow } } },
 
         { "Inactive Window",
             { { Gfx::ColorRole::InactiveWindowBorder1 },
@@ -88,6 +87,11 @@ static PropertyTab const window_tab {
             { { Gfx::ColorRole::Window },
                 { Gfx::ColorRole::WindowText } } },
 
+        { "Overlays",
+            { { Gfx::ColorRole::OverlayBackground },
+                { Gfx::ColorRole::OverlayText },
+                { Gfx::PathRole::OverlayRectShadow } } },
+
         { "Desktop",
             { { Gfx::ColorRole::DesktopBackground },
                 { Gfx::PathRole::TaskbarShadow } } },

diff --git a/Userland/Libraries/LibGfx/Palette.h b/Userland/Libraries/LibGfx/Palette.h
@@ -125,6 +125,8 @@ class Palette {
     Color focus_outline() const { return color(ColorRole::FocusOutline); }
     Color tray() const { return color(ColorRole::Tray); }
     Color tray_text() const { return color(ColorRole::TrayText); }
+    Color overlay_background() const { return color(ColorRole::OverlayBackground); }
+    Color overlay_text() const { return color(ColorRole::OverlayText); }
 
     Color link() const { return color(ColorRole::Link); }
     Color active_link() const { return color(ColorRole::ActiveLink); }

diff --git a/Userland/Libraries/LibGfx/SystemTheme.h b/Userland/Libraries/LibGfx/SystemTheme.h
@@ -78,6 +78,8 @@ namespace Gfx {
     C(MovingWindowTitle)           \
     C(MovingWindowTitleShadow)     \
     C(MovingWindowTitleStripes)    \
+    C(OverlayText)                 \
+    C(OverlayBackground)           \
     C(PlaceholderText)             \
     C(Red)                         \
     C(RubberBandBorder)            \

diff --git a/Userland/Services/WindowServer/Overlays.cpp b/Userland/Services/WindowServer/Overlays.cpp
@@ -116,9 +116,8 @@ void RectangularOverlay::render(Gfx::Painter& painter, Screen const& screen)
         if (auto* shadow_bitmap = WindowManager::the().overlay_rect_shadow()) {
             Gfx::StylePainter::paint_simple_rect_shadow(bitmap_painter, new_bitmap->rect(), shadow_bitmap->bitmap(scale_factor), true, true);
         } else {
-            // When no overlay rect shadow is defined use default window frame and dark background
-            // This is because all current overlays have white text and assume a dark background color
-            bitmap_painter.fill_rect(new_bitmap->rect(), Color::Black);
+            // When no overlay rect shadow is defined use default window frame and overlay background
+            bitmap_painter.fill_rect(new_bitmap->rect(), WindowManager::the().palette().overlay_background());
             Gfx::StylePainter::current().paint_window_frame(bitmap_painter, new_bitmap->rect(), WindowManager::the().palette());
         }
         render_overlay_bitmap(bitmap_painter);
@@ -215,7 +214,7 @@ Gfx::Font const& ScreenNumberOverlay::font()
 
 void ScreenNumberOverlay::render_overlay_bitmap(Gfx::Painter& painter)
 {
-    painter.draw_text(Gfx::IntRect { {}, rect().size() }, ByteString::formatted("{}", m_screen.index() + 1), font(), Gfx::TextAlignment::Center, Color::White);
+    painter.draw_text(Gfx::IntRect { {}, rect().size() }, ByteString::formatted("{}", m_screen.index() + 1), font(), Gfx::TextAlignment::Center, WindowManager::the().palette().overlay_text());
 }
 
 Gfx::IntRect ScreenNumberOverlay::calculate_content_rect_for_screen(Screen& screen)
@@ -349,7 +348,7 @@ void WindowGeometryOverlay::window_rect_changed()
 
 void WindowGeometryOverlay::render_overlay_bitmap(Gfx::Painter& painter)
 {
-    painter.draw_text(Gfx::IntRect { {}, rect().size() }, m_label, WindowManager::the().font(), Gfx::TextAlignment::Center, Color::White);
+    painter.draw_text(Gfx::IntRect { {}, rect().size() }, m_label, WindowManager::the().font(), Gfx::TextAlignment::Center, WindowManager::the().palette().overlay_text());
 }
 
 DndOverlay::DndOverlay(ByteString const& text, Gfx::Bitmap const* bitmap)
@@ -403,7 +402,9 @@ void WindowStackSwitchOverlay::render_overlay_bitmap(Gfx::Painter& painter)
     // We should come up with a more elegant way to get the content rectangle
     auto content_rect = Gfx::IntRect({}, m_content_size).centered_within({ {}, rect().size() });
     auto active_color = WindowManager::the().palette().selection();
-    auto inactive_color = WindowManager::the().palette().window().darkened(0.9f);
+    auto inactive_color = WindowManager::the().palette().overlay_text().luminosity() > 128
+        ? WindowManager::the().palette().window().darkened(0.9f)
+        : WindowManager::the().palette().disabled_text_front();
     for (int y = 0; y < m_rows; y++) {
         for (int x = 0; x < m_columns; x++) {
             Gfx::IntRect rect {

diff --git a/Userland/Services/WindowServer/Overlays.h b/Userland/Services/WindowServer/Overlays.h
@@ -45,10 +45,7 @@ class Overlay {
     void set_enabled(bool);
     bool is_enabled() const { return m_list_node.is_in_list(); }
 
-    virtual void theme_changed()
-    {
-        rect_changed(m_rect);
-    }
+    virtual void theme_changed() { invalidate(); }
 
     bool invalidate();
 
@@ -108,6 +105,8 @@ class RectangularOverlay : public Overlay {
     void clear_bitmaps();
     virtual void rect_changed(Gfx::IntRect const&) override;
 
+    virtual void theme_changed() override { invalidate_content(); }
+
     void invalidate_content();
 
 private: