WindowServer+LibGUI: Implement basic color theming

Color themes are loaded from .ini files in /res/themes/
The theme can be switched from the "Themes" section in the system menu.

The basic mechanism is that WindowServer broadcasts a SharedBuffer with
all of the color values of the current theme. Clients receive this with
the response to their initial WindowServer::Greet handshake.

When the theme is changed, WindowServer tells everyone by sending out
an UpdateSystemTheme message with a new SharedBuffer to use.

This does feel somewhat bloated somehow, but I'm sure we can iterate on
it over time and improve things.

To get one of the theme colors, use the Color(SystemColor) constructor:

    painter.fill_rect(rect, SystemColor::HoverHighlight);

Some things don't work 100% right without a reboot. Specifically, when
constructing a GWidget, it will set its own background and foreground
colors based on the current SystemColor::Window and SystemColor::Text.
The widget is then stuck with these values, and they don't update on
system theme change, only on app restart.

All in all though, this is pretty cool. Merry Christmas! :^)

Servers/WindowServer/WSClientConnection.cpp

@@ -1,5 +1,6 @@
 #include <LibC/SharedBuffer.h>
 #include <LibDraw/GraphicsBitmap.h>
+#include <LibDraw/SystemTheme.h>
 #include <SharedBuffer.h>
 #include <WindowServer/WSClientConnection.h>
 #include <WindowServer/WSClipboard.h>
@@ -605,7 +606,7 @@ void WSClientConnection::handle(const WindowServer::WM_SetWindowMinimized& messa
 
 OwnPtr<WindowServer::GreetResponse> WSClientConnection::handle(const WindowServer::Greet&)
 {
-    return make<WindowServer::GreetResponse>(client_id(), WSScreen::the().rect());
+    return make<WindowServer::GreetResponse>(client_id(), WSScreen::the().rect(), current_system_theme_buffer_id());
 }
 
 bool WSClientConnection::is_showing_modal_window() const

Servers/WindowServer/WSCompositor.cpp

@@ -113,7 +113,7 @@ void WSCompositor::compose()
         if (wm.any_opaque_window_contains_rect(dirty_rect))
             continue;
         // FIXME: If the wallpaper is opaque, no need to fill with color!
-        m_back_painter->fill_rect(dirty_rect, wm.m_background_color);
+        m_back_painter->fill_rect(dirty_rect, SystemColor::DesktopBackground);
         if (m_wallpaper) {
             if (m_wallpaper_mode == WallpaperMode::Simple) {
                 m_back_painter->blit(dirty_rect.location(), *m_wallpaper, dirty_rect);

Servers/WindowServer/WSMenu.cpp

@@ -126,12 +126,14 @@ WSWindow& WSMenu::ensure_menu_window()
 
 void WSMenu::draw()
 {
+    m_theme_index_at_last_paint = WSWindowManager::the().theme_index();
+
     ASSERT(menu_window());
     ASSERT(menu_window()->backing_store());
     Painter painter(*menu_window()->backing_store());
 
     Rect rect { {}, menu_window()->size() };
-    painter.fill_rect(rect.shrunken(6, 6), Color::White);
+    painter.fill_rect(rect.shrunken(6, 6), SystemColor::MenuBase);
     StylePainter::paint_window_frame(painter, rect);
     int width = this->width();
 
@@ -146,15 +148,15 @@ void WSMenu::draw()
     }
 
     Rect stripe_rect { frame_thickness(), frame_thickness(), s_stripe_width, height() - frame_thickness() * 2 };
-    painter.fill_rect(stripe_rect, Color::WarmGray);
-    painter.draw_line(stripe_rect.top_right(), stripe_rect.bottom_right(), Color::from_rgb(0xbbb7b0));
+    painter.fill_rect(stripe_rect, SystemColor::MenuStripe);
+    painter.draw_line(stripe_rect.top_right(), stripe_rect.bottom_right(), Color(SystemColor::MenuStripe).darkened());
 
     for (auto& item : m_items) {
         if (item.type() == WSMenuItem::Text) {
             Color text_color = Color::Black;
             if (&item == m_hovered_item && item.is_enabled()) {
-                painter.fill_rect(item.rect(), Color::from_rgb(0xad714f));
-                painter.draw_rect(item.rect(), Color::from_rgb(0x793016));
+                painter.fill_rect(item.rect(), SystemColor::MenuSelection);
+                painter.draw_rect(item.rect(), Color(SystemColor::MenuSelection).darkened());
                 text_color = Color::White;
             } else if (!item.is_enabled()) {
                 text_color = Color::MidGray;
@@ -164,10 +166,10 @@ void WSMenu::draw()
                 Rect checkmark_rect { item.rect().x() + 7, 0, s_checked_bitmap_width, s_checked_bitmap_height };
                 checkmark_rect.center_vertically_within(text_rect);
                 Rect checkbox_rect = checkmark_rect.inflated(4, 4);
-                painter.fill_rect(checkbox_rect, Color::White);
+                painter.fill_rect(checkbox_rect, SystemColor::Base);
                 StylePainter::paint_frame(painter, checkbox_rect, FrameShape::Container, FrameShadow::Sunken, 2);
                 if (item.is_checked()) {
-                    painter.draw_bitmap(checkmark_rect.location(), *s_checked_bitmap, Color::Black);
+                    painter.draw_bitmap(checkmark_rect.location(), *s_checked_bitmap, SystemColor::Text);
                 }
             } else if (item.icon()) {
                 Rect icon_rect { item.rect().x() + 3, 0, s_item_icon_width, s_item_icon_width };
@@ -274,11 +276,19 @@ void WSMenu::close()
     WSWindowManager::the().menu_manager().close_menu_and_descendants(*this);
 }
 
+void WSMenu::redraw_if_theme_changed()
+{
+    if (m_theme_index_at_last_paint != WSWindowManager::the().theme_index())
+        redraw();
+}
+
 void WSMenu::popup(const Point& position, bool is_submenu)
 {
     ASSERT(!is_empty());
 
     auto& window = ensure_menu_window();
+    redraw_if_theme_changed();
+
     const int margin = 30;
     Point adjusted_pos = position;
     if (adjusted_pos.x() + window.width() >= WSScreen::the().width() - margin) {

Servers/WindowServer/WSMenu.h

@@ -78,6 +78,8 @@ public:
 
     bool is_menu_ancestor_of(const WSMenu&) const;
 
+    void redraw_if_theme_changed();
+
 private:
     virtual void event(CEvent&) override;
 
@@ -92,4 +94,5 @@ private:
     WSMenuItem* m_hovered_item { nullptr };
     NonnullOwnPtrVector<WSMenuItem> m_items;
     RefPtr<WSWindow> m_menu_window;
+    int m_theme_index_at_last_paint { -1 };
 };

Servers/WindowServer/WSMenuManager.cpp

@@ -83,14 +83,14 @@ void WSMenuManager::draw()
 
     Painter painter(*window().backing_store());
 
-    painter.fill_rect(menubar_rect, Color::WarmGray);
-    painter.draw_line({ 0, menubar_rect.bottom() }, { menubar_rect.right(), menubar_rect.bottom() }, Color::MidGray);
+    painter.fill_rect(menubar_rect, SystemColor::Window);
+    painter.draw_line({ 0, menubar_rect.bottom() }, { menubar_rect.right(), menubar_rect.bottom() }, SystemColor::ThreedShadow1);
     int index = 0;
     wm.for_each_active_menubar_menu([&](WSMenu& menu) {
-        Color text_color = Color::Black;
+        Color text_color = SystemColor::Text;
         if (is_open(menu)) {
-            painter.fill_rect(menu.rect_in_menubar(), Color::from_rgb(0xad714f));
-            painter.draw_rect(menu.rect_in_menubar(), Color::from_rgb(0x793016));
+            painter.fill_rect(menu.rect_in_menubar(), SystemColor::MenuSelection);
+            painter.draw_rect(menu.rect_in_menubar(), Color(SystemColor::MenuSelection).darkened());
             text_color = Color::White;
         }
         painter.draw_text(
@@ -103,7 +103,7 @@ void WSMenuManager::draw()
         return IterationDecision::Continue;
     });
 
-    painter.draw_text(m_username_rect, m_username, Font::default_bold_font(), TextAlignment::CenterRight, Color::Black);
+    painter.draw_text(m_username_rect, m_username, Font::default_bold_font(), TextAlignment::CenterRight, SystemColor::Text);
 
     time_t now = time(nullptr);
     auto* tm = localtime(&now);
@@ -115,7 +115,7 @@ void WSMenuManager::draw()
         tm->tm_min,
         tm->tm_sec);
 
-    painter.draw_text(m_time_rect, time_text, wm.font(), TextAlignment::CenterRight, Color::Black);
+    painter.draw_text(m_time_rect, time_text, wm.font(), TextAlignment::CenterRight, SystemColor::Text);
 
     for (auto& applet : m_applets) {
         if (!applet)
@@ -182,6 +182,7 @@ void WSMenuManager::handle_menu_mouse_event(WSMenu& menu, const WSMouseEvent& ev
             return;
         close_everyone();
         if (!menu.is_empty()) {
+            menu.redraw_if_theme_changed();
             auto& menu_window = menu.ensure_menu_window();
             menu_window.move_to({ menu.rect_in_menubar().x(), menu.rect_in_menubar().bottom() + 2 });
             menu_window.set_visible(true);

Servers/WindowServer/WSWindowFrame.cpp

@@ -170,21 +170,21 @@ void WSWindowFrame::paint(Painter& painter)
     auto& wm = WSWindowManager::the();
 
     if (&window == wm.m_highlight_window) {
-        border_color = wm.m_highlight_window_border_color;
-        border_color2 = wm.m_highlight_window_border_color2;
-        title_color = wm.m_highlight_window_title_color;
+        border_color = SystemColor::HighlightWindowBorder1;
+        border_color2 = SystemColor::HighlightWindowBorder2;
+        title_color = SystemColor::HighlightWindowTitle;
     } else if (&window == wm.m_move_window) {
-        border_color = wm.m_moving_window_border_color;
-        border_color2 = wm.m_moving_window_border_color2;
-        title_color = wm.m_moving_window_title_color;
+        border_color = SystemColor::MovingWindowBorder1;
+        border_color2 = SystemColor::MovingWindowBorder2;
+        title_color = SystemColor::MovingWindowTitle;
     } else if (&window == wm.m_active_window) {
-        border_color = wm.m_active_window_border_color;
-        border_color2 = wm.m_active_window_border_color2;
-        title_color = wm.m_active_window_title_color;
+        border_color = SystemColor::ActiveWindowBorder1;
+        border_color2 = SystemColor::ActiveWindowBorder2;
+        title_color = SystemColor::ActiveWindowTitle;
     } else {
-        border_color = wm.m_inactive_window_border_color;
-        border_color2 = wm.m_inactive_window_border_color2;
-        title_color = wm.m_inactive_window_title_color;
+        border_color = SystemColor::InactiveWindowBorder1;
+        border_color2 = SystemColor::InactiveWindowBorder2;
+        title_color = SystemColor::InactiveWindowTitle;
     }
 
     StylePainter::paint_window_frame(painter, outer_rect);

Servers/WindowServer/WSWindowManager.cpp

@@ -6,6 +6,7 @@
 #include "WSMenuItem.h"
 #include "WSScreen.h"
 #include "WSWindow.h"
+#include <AK/FileSystemPath.h>
 #include <AK/LogStream.h>
 #include <AK/QuickSort.h>
 #include <AK/StdLibExtras.h>
@@ -17,6 +18,7 @@
 #include <LibDraw/PNGLoader.h>
 #include <LibDraw/Painter.h>
 #include <LibDraw/StylePainter.h>
+#include <LibDraw/SystemTheme.h>
 #include <WindowServer/WSButton.h>
 #include <WindowServer/WSClientConnection.h>
 #include <WindowServer/WSCursor.h>
@@ -47,19 +49,21 @@ WSWindowManager::WSWindowManager()
     reload_config(false);
 
     HashTable<String> seen_app_categories;
-    CDirIterator dt("/res/apps", CDirIterator::SkipDots);
-    while (dt.has_next()) {
-        auto af_name = dt.next_path();
-        auto af_path = String::format("/res/apps/%s", af_name.characters());
-        auto af = CConfigFile::open(af_path);
-        if (!af->has_key("App", "Name") || !af->has_key("App", "Executable"))
-            continue;
-        auto app_name = af->read_entry("App", "Name");
-        auto app_executable = af->read_entry("App", "Executable");
-        auto app_category = af->read_entry("App", "Category");
-        auto app_icon_path = af->read_entry("Icons", "16x16");
-        m_apps.append({ app_executable, app_name, app_icon_path, app_category });
-        seen_app_categories.set(app_category);
+    {
+        CDirIterator dt("/res/apps", CDirIterator::SkipDots);
+        while (dt.has_next()) {
+            auto af_name = dt.next_path();
+            auto af_path = String::format("/res/apps/%s", af_name.characters());
+            auto af = CConfigFile::open(af_path);
+            if (!af->has_key("App", "Name") || !af->has_key("App", "Executable"))
+                continue;
+            auto app_name = af->read_entry("App", "Name");
+            auto app_executable = af->read_entry("App", "Executable");
+            auto app_category = af->read_entry("App", "Category");
+            auto app_icon_path = af->read_entry("Icons", "16x16");
+            m_apps.append({ app_executable, app_name, app_icon_path, app_category });
+            seen_app_categories.set(app_category);
+        }
     }
 
     Vector<String> sorted_app_categories;
@@ -98,8 +102,56 @@ WSWindowManager::WSWindowManager()
         parent_menu->add_item(make<WSMenuItem>(*m_system_menu, app_identifier++, app.name, String(), true, false, false, load_png(app.icon_path)));
     }
 
+    m_system_menu->add_item(make<WSMenuItem>(*m_system_menu, WSMenuItem::Separator));
+
+    m_themes_menu = WSMenu::construct(nullptr, 9000, "Themes");
+
+    auto themes_menu_item = make<WSMenuItem>(*m_system_menu, 100, "Themes");
+    themes_menu_item->set_submenu_id(m_themes_menu->menu_id());
+    m_system_menu->add_item(move(themes_menu_item));
+
+    {
+        CDirIterator dt("/res/themes", CDirIterator::SkipDots);
+        while (dt.has_next()) {
+            auto theme_name = dt.next_path();
+            auto theme_path = String::format("/res/themes/%s", theme_name.characters());
+            m_themes.append({ FileSystemPath(theme_name).title(), theme_path });
+        }
+        quick_sort(m_themes.begin(), m_themes.end(), [](auto& a, auto& b) { return a.name < b.name; });
+    }
+
+    {
+        int theme_identifier = 9000;
+        for (auto& theme : m_themes) {
+            m_themes_menu->add_item(make<WSMenuItem>(*m_themes_menu, theme_identifier++, theme.name));
+        }
+    }
+
+    m_themes_menu->on_item_activation = [this](WSMenuItem& item) {
+        auto& theme = m_themes[(int)item.identifier() - 9000];
+        auto new_theme = load_system_theme(theme.path);
+        ASSERT(new_theme);
+        set_system_theme(*new_theme);
+        HashTable<WSClientConnection*> notified_clients;
+        for_each_window([&](WSWindow& window) {
+            if (window.client()) {
+                if (!notified_clients.contains(window.client())) {
+                    window.client()->post_message(WindowClient::UpdateSystemTheme(current_system_theme_buffer_id()));
+                    notified_clients.set(window.client());
+                }
+            }
+            return IterationDecision::Continue;
+        });
+        ++m_theme_index;
+        auto wm_config = CConfigFile::get_for_app("WindowManager");
+        wm_config->write_entry("Theme", "Name", theme.name);
+        wm_config->sync();
+        invalidate();
+    };
+
     m_system_menu->add_item(make<WSMenuItem>(*m_system_menu, WSMenuItem::Separator));
     m_system_menu->add_item(make<WSMenuItem>(*m_system_menu, 100, "Reload WM Config File"));
+
     m_system_menu->add_item(make<WSMenuItem>(*m_system_menu, WSMenuItem::Separator));
     m_system_menu->add_item(make<WSMenuItem>(*m_system_menu, 200, "About...", String(), true, false, false, load_png("/res/icons/16x16/ladybug.png")));
     m_system_menu->add_item(make<WSMenuItem>(*m_system_menu, WSMenuItem::Separator));
@@ -186,26 +238,6 @@ void WSWindowManager::reload_config(bool set_screen)
     m_disallowed_cursor = get_cursor("Disallowed");
     m_move_cursor = get_cursor("Move");
     m_drag_cursor = get_cursor("Drag");
-
-    m_background_color = m_wm_config->read_color_entry("Colors", "Background", Color::Red);
-
-    m_active_window_border_color = m_wm_config->read_color_entry("Colors", "ActiveWindowBorder", Color::Red);
-    m_active_window_border_color2 = m_wm_config->read_color_entry("Colors", "ActiveWindowBorder2", Color::Red);
-    m_active_window_title_color = m_wm_config->read_color_entry("Colors", "ActiveWindowTitle", Color::Red);
-
-    m_inactive_window_border_color = m_wm_config->read_color_entry("Colors", "InactiveWindowBorder", Color::Red);
-    m_inactive_window_border_color2 = m_wm_config->read_color_entry("Colors", "InactiveWindowBorder2", Color::Red);
-    m_inactive_window_title_color = m_wm_config->read_color_entry("Colors", "InactiveWindowTitle", Color::Red);
-
-    m_moving_window_border_color = m_wm_config->read_color_entry("Colors", "MovingWindowBorder", Color::Red);
-    m_moving_window_border_color2 = m_wm_config->read_color_entry("Colors", "MovingWindowBorder2", Color::Red);
-    m_moving_window_title_color = m_wm_config->read_color_entry("Colors", "MovingWindowTitle", Color::Red);
-
-    m_highlight_window_border_color = m_wm_config->read_color_entry("Colors", "HighlightWindowBorder", Color::Red);
-    m_highlight_window_border_color2 = m_wm_config->read_color_entry("Colors", "HighlightWindowBorder2", Color::Red);
-    m_highlight_window_title_color = m_wm_config->read_color_entry("Colors", "HighlightWindowTitle", Color::Red);
-
-    m_menu_selection_color = m_wm_config->read_color_entry("Colors", "MenuSelectionColor", Color::Red);
 }
 
 const Font& WSWindowManager::font() const
@@ -1183,6 +1215,8 @@ Rect WSWindowManager::maximized_window_rect(const WSWindow& window) const
 
 WSMenu* WSWindowManager::find_internal_menu_by_id(int menu_id)
 {
+    if (m_themes_menu->menu_id() == menu_id)
+        return m_themes_menu.ptr();
     for (auto& it : m_app_category_menus) {
         if (menu_id == it.value->menu_id())
             return it.value;

Servers/WindowServer/WSWindowManager.h

@@ -159,6 +159,8 @@ public:
 
     WSMenu* find_internal_menu_by_id(int);
 
+    int theme_index() const { return m_theme_index; }
+
 private:
     NonnullRefPtr<WSCursor> get_cursor(const String& name);
     NonnullRefPtr<WSCursor> get_cursor(const String& name, const Point& hotspot);
@@ -266,6 +268,8 @@ private:
     Color m_menu_selection_color;
     WeakPtr<WSMenuBar> m_current_menubar;
 
+    int m_theme_index { 0 };
+
     WSWindowSwitcher m_switcher;
     WSMenuManager m_menu_manager;
 
@@ -283,6 +287,13 @@ private:
     Vector<AppMetadata> m_apps;
     HashMap<String, NonnullRefPtr<WSMenu>> m_app_category_menus;
 
+    struct ThemeMetadata {
+        String name;
+        String path;
+    };
+    Vector<ThemeMetadata> m_themes;
+    RefPtr<WSMenu> m_themes_menu;
+
     WeakPtr<WSClientConnection> m_dnd_client;
     String m_dnd_text;
     String m_dnd_data_type;

Servers/WindowServer/WindowClient.ipc

@@ -32,4 +32,6 @@ endpoint WindowClient = 4
     DragCancelled() =|
 
     DragDropped(i32 window_id, Point mouse_position, String text, String data_type, String data) =|
+
+    UpdateSystemTheme(i32 system_theme_buffer_id) =|
 }

Servers/WindowServer/WindowServer.ipc

@@ -1,6 +1,6 @@
 endpoint WindowServer = 2
 {
-    Greet() => (i32 client_id, Rect screen_rect)
+    Greet() => (i32 client_id, Rect screen_rect, i32 system_theme_buffer_id)
 
     CreateMenubar() => (i32 menubar_id)
     DestroyMenubar(i32 menubar_id) => ()

Servers/WindowServer/main.cpp

@@ -1,4 +1,5 @@
 #include <LibCore/CConfigFile.h>
+#include <LibDraw/SystemTheme.h>
 #include <WindowServer/WSCompositor.h>
 #include <WindowServer/WSEventLoop.h>
 #include <WindowServer/WSScreen.h>
@@ -18,9 +19,15 @@ int main(int, char**)
         return 1;
     }
 
+    auto wm_config = CConfigFile::get_for_app("WindowManager");
+    auto theme_name = wm_config->read_entry("Theme", "Name", "Default");
+
+    auto theme = load_system_theme(String::format("/res/themes/%s.ini", theme_name.characters()));
+    ASSERT(theme);
+    set_system_theme(*theme);
+
     WSEventLoop loop;
 
-    auto wm_config = CConfigFile::get_for_app("WindowManager");
     WSScreen screen(wm_config->read_num_entry("Screen", "Width", 1024),
         wm_config->read_num_entry("Screen", "Height", 768));
     WSCompositor::the();