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! :^)

Libraries/LibDraw/Color.cpp

@@ -1,8 +1,85 @@
 #include <AK/Assertions.h>
 #include <LibDraw/Color.h>
+#include <LibDraw/SystemTheme.h>
 #include <ctype.h>
 #include <stdio.h>
 
+Color::Color(SystemColor system_color)
+{
+    auto& theme = current_system_theme();
+    switch (system_color) {
+    case SystemColor::Window:
+        m_value = theme.window.value();
+        break;
+    case SystemColor::Text:
+        m_value = theme.text.value();
+        break;
+    case SystemColor::Base:
+        m_value = theme.base.value();
+        break;
+    case SystemColor::ThreedShadow1:
+        m_value = theme.threed_shadow1.value();
+        break;
+    case SystemColor::ThreedShadow2:
+        m_value = theme.threed_shadow2.value();
+        break;
+    case SystemColor::ThreedHighlight:
+        m_value = theme.threed_highlight.value();
+        break;
+    case SystemColor::HoverHighlight:
+        m_value = theme.hover_highlight.value();
+        break;
+    case SystemColor::DesktopBackground:
+        m_value = theme.desktop_background.value();
+        break;
+    case SystemColor::ActiveWindowBorder1:
+        m_value = theme.active_window_border1.value();
+        break;
+    case SystemColor::ActiveWindowBorder2:
+        m_value = theme.active_window_border2.value();
+        break;
+    case SystemColor::ActiveWindowTitle:
+        m_value = theme.active_window_title.value();
+        break;
+    case SystemColor::InactiveWindowBorder1:
+        m_value = theme.inactive_window_border1.value();
+        break;
+    case SystemColor::InactiveWindowBorder2:
+        m_value = theme.inactive_window_border2.value();
+        break;
+    case SystemColor::InactiveWindowTitle:
+        m_value = theme.inactive_window_title.value();
+        break;
+    case SystemColor::MovingWindowBorder1:
+        m_value = theme.moving_window_border1.value();
+        break;
+    case SystemColor::MovingWindowBorder2:
+        m_value = theme.moving_window_border2.value();
+        break;
+    case SystemColor::MovingWindowTitle:
+        m_value = theme.moving_window_title.value();
+        break;
+    case SystemColor::HighlightWindowBorder1:
+        m_value = theme.highlight_window_border1.value();
+        break;
+    case SystemColor::HighlightWindowBorder2:
+        m_value = theme.highlight_window_border2.value();
+        break;
+    case SystemColor::HighlightWindowTitle:
+        m_value = theme.highlight_window_title.value();
+        break;
+    case SystemColor::MenuStripe:
+        m_value = theme.menu_stripe.value();
+        break;
+    case SystemColor::MenuBase:
+        m_value = theme.menu_base.value();
+        break;
+    case SystemColor::MenuSelection:
+        m_value = theme.menu_selection.value();
+        break;
+    }
+}
+
 Color::Color(NamedColor named)
 {
     struct {

Libraries/LibDraw/Color.h

@@ -1,7 +1,7 @@
 #pragma once
 
-#include <AK/String.h>
 #include <AK/Optional.h>
+#include <AK/String.h>
 #include <AK/Types.h>
 
 typedef u32 RGBA32;
@@ -11,6 +11,32 @@ inline constexpr u32 make_rgb(u8 r, u8 g, u8 b)
     return ((r << 16) | (g << 8) | b);
 }
 
+enum class SystemColor {
+    DesktopBackground,
+    ActiveWindowBorder1,
+    ActiveWindowBorder2,
+    ActiveWindowTitle,
+    InactiveWindowBorder1,
+    InactiveWindowBorder2,
+    InactiveWindowTitle,
+    MovingWindowBorder1,
+    MovingWindowBorder2,
+    MovingWindowTitle,
+    HighlightWindowBorder1,
+    HighlightWindowBorder2,
+    HighlightWindowTitle,
+    MenuStripe,
+    MenuBase,
+    MenuSelection,
+    Window,
+    Text,
+    Base,
+    ThreedHighlight,
+    ThreedShadow1,
+    ThreedShadow2,
+    HoverHighlight,
+};
+
 class Color {
 public:
     enum NamedColor {
@@ -39,6 +65,7 @@ public:
 
     Color() {}
     Color(NamedColor);
+    Color(SystemColor);
     Color(u8 r, u8 g, u8 b)
         : m_value(0xff000000 | (r << 16) | (g << 8) | b)
     {

Libraries/LibDraw/Makefile

@@ -10,6 +10,7 @@ OBJS = \
     ImageDecoder.o \
     Rect.o \
     StylePainter.o \
+    SystemTheme.o \
     Emoji.o
 
 LIBRARY = libdraw.a

Libraries/LibDraw/StylePainter.cpp

@@ -3,10 +3,10 @@
 
 void StylePainter::paint_tab_button(Painter& painter, const Rect& rect, bool active, bool hovered, bool enabled)
 {
-    Color base_color = Color::WarmGray;
-    Color highlight_color2 = Color::from_rgb(0xe8e7e4);
-    Color shadow_color1 = Color::from_rgb(0x808080);
-    Color shadow_color2 = Color::from_rgb(0x404040);
+    Color base_color = SystemColor::Window;
+    Color highlight_color2 = SystemColor::ThreedHighlight;
+    Color shadow_color1 = SystemColor::ThreedShadow1;
+    Color shadow_color2 = SystemColor::ThreedShadow2;
 
     if (hovered && enabled && !active)
         base_color = StylePainter::hover_highlight_color();
@@ -44,16 +44,16 @@ void StylePainter::paint_tab_button(Painter& painter, const Rect& rect, bool act
 
 static void paint_button_new(Painter& painter, const Rect& rect, bool pressed, bool checked, bool hovered, bool enabled)
 {
-    Color button_color = Color::WarmGray;
-    Color highlight_color2 = Color::from_rgb(0xe8e7e4);
-    Color shadow_color1 = Color::from_rgb(0x808080);
-    Color shadow_color2 = Color::from_rgb(0x404040);
+    Color button_color = SystemColor::Window;
+    Color highlight_color2 = SystemColor::ThreedHighlight;
+    Color shadow_color1 = SystemColor::ThreedShadow1;
+    Color shadow_color2 = SystemColor::ThreedShadow2;
 
     if (checked && enabled) {
         if (hovered)
-            button_color = Color::from_rgb(0xe3dfdb);
+            button_color = SystemColor::HoverHighlight;
         else
-            button_color = Color::from_rgb(0xd6d2ce);
+            button_color = SystemColor::Window;
     } else if (hovered && enabled)
         button_color = StylePainter::hover_highlight_color();
 
@@ -92,7 +92,7 @@ void StylePainter::paint_button(Painter& painter, const Rect& rect, ButtonStyle
     if (button_style == ButtonStyle::Normal)
         return paint_button_new(painter, rect, pressed, checked, hovered, enabled);
 
-    Color button_color = checked ? Color::from_rgb(0xd6d2ce) : Color::WarmGray;
+    Color button_color = SystemColor::Window;
     Color highlight_color = Color::White;
     Color shadow_color = Color(96, 96, 96);
 
@@ -129,12 +129,12 @@ void StylePainter::paint_button(Painter& painter, const Rect& rect, ButtonStyle
 
 void StylePainter::paint_surface(Painter& painter, const Rect& rect, bool paint_vertical_lines, bool paint_top_line)
 {
-    painter.fill_rect({ rect.x(), rect.y() + 1, rect.width(), rect.height() - 2 }, Color::WarmGray);
-    painter.draw_line(rect.top_left(), rect.top_right(), paint_top_line ? Color::White : Color::WarmGray);
-    painter.draw_line(rect.bottom_left(), rect.bottom_right(), Color::MidGray);
+    painter.fill_rect({ rect.x(), rect.y() + 1, rect.width(), rect.height() - 2 }, SystemColor::Window);
+    painter.draw_line(rect.top_left(), rect.top_right(), paint_top_line ? SystemColor::ThreedHighlight : SystemColor::Window);
+    painter.draw_line(rect.bottom_left(), rect.bottom_right(), SystemColor::ThreedShadow1);
     if (paint_vertical_lines) {
-        painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left().translated(0, -1), Color::White);
-        painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), Color::MidGray);
+        painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left().translated(0, -1), SystemColor::ThreedHighlight);
+        painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), SystemColor::ThreedShadow1);
     }
 }
 
@@ -142,12 +142,12 @@ void StylePainter::paint_frame(Painter& painter, const Rect& rect, FrameShape sh
 {
     Color top_left_color;
     Color bottom_right_color;
-    Color dark_shade = Color::from_rgb(0x808080);
-    Color light_shade = Color::from_rgb(0xffffff);
+    Color dark_shade = SystemColor::ThreedShadow1;
+    Color light_shade = SystemColor::ThreedHighlight;
 
     if (shape == FrameShape::Container && thickness >= 2) {
         if (shadow == FrameShadow::Raised) {
-            dark_shade = Color::from_rgb(0x404040);
+            dark_shade = SystemColor::ThreedShadow2;
         }
     }
 
@@ -175,10 +175,10 @@ void StylePainter::paint_frame(Painter& painter, const Rect& rect, FrameShape sh
     if (shape == FrameShape::Container && thickness >= 2) {
         Color top_left_color;
         Color bottom_right_color;
-        Color dark_shade = Color::from_rgb(0x404040);
-        Color light_shade = Color::WarmGray;
+        Color dark_shade = SystemColor::ThreedShadow2;
+        Color light_shade = SystemColor::Window;
         if (shadow == FrameShadow::Raised) {
-            dark_shade = Color::from_rgb(0x808080);
+            dark_shade = SystemColor::ThreedShadow1;
             top_left_color = light_shade;
             bottom_right_color = dark_shade;
         } else if (shadow == FrameShadow::Sunken) {
@@ -207,10 +207,10 @@ void StylePainter::paint_frame(Painter& painter, const Rect& rect, FrameShape sh
 
 void StylePainter::paint_window_frame(Painter& painter, const Rect& rect)
 {
-    Color base_color = Color::WarmGray;
-    Color dark_shade = Color::from_rgb(0x404040);
-    Color mid_shade = Color::from_rgb(0x808080);
-    Color light_shade = Color::from_rgb(0xffffff);
+    Color base_color = SystemColor::Window;
+    Color dark_shade = SystemColor::ThreedShadow2;
+    Color mid_shade = SystemColor::ThreedShadow1;
+    Color light_shade = SystemColor::ThreedHighlight;
 
     painter.draw_line(rect.top_left(), rect.top_right(), base_color);
     painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left(), base_color);

Libraries/LibDraw/StylePainter.h

@@ -32,5 +32,5 @@ public:
     static void paint_window_frame(Painter&, const Rect&);
     static void paint_progress_bar(Painter&, const Rect&, int min, int max, int value, const StringView& text = {});
 
-    static Color hover_highlight_color() { return Color::from_rgb(0xe6e5e2); }
+    static Color hover_highlight_color() { return SystemColor::HoverHighlight; }
 };

Libraries/LibDraw/SystemTheme.cpp

@@ -0,0 +1,73 @@
+#include <LibCore/CConfigFile.h>
+#include <LibDraw/SystemTheme.h>
+
+static SystemTheme dummy_theme;
+static const SystemTheme* theme_page = &dummy_theme;
+static RefPtr<SharedBuffer> theme_buffer;
+
+const SystemTheme& current_system_theme()
+{
+    ASSERT(theme_page);
+    return *theme_page;
+}
+
+int current_system_theme_buffer_id()
+{
+    ASSERT(theme_buffer);
+    return theme_buffer->shared_buffer_id();
+}
+
+void set_system_theme(SharedBuffer& buffer)
+{
+    theme_buffer = buffer;
+    theme_page = (SystemTheme*)theme_buffer->data();
+}
+
+RefPtr<SharedBuffer> load_system_theme(const String& path)
+{
+    auto file = CConfigFile::open(path);
+    auto buffer = SharedBuffer::create_with_size(sizeof(SystemTheme));
+
+    dbg() << "Created shared buffer with id " << buffer->shared_buffer_id();
+
+    auto* data = (SystemTheme*)buffer->data();
+
+    auto get = [&](auto& name) {
+        auto color_string = file->read_entry("Colors", name);
+        auto color = Color::from_string(color_string);
+        if (!color.has_value())
+            return Color(Color::Black);
+        dbg() << "Parsed system color '" << name << "' = " << color.value();
+        return color.value();
+    };
+
+    data->desktop_background = get("DesktopBackground");
+    data->threed_highlight = get("ThreedHighlight");
+    data->threed_shadow1 = get("ThreedShadow1");
+    data->threed_shadow2 = get("ThreedShadow2");
+    data->hover_highlight = get("HoverHighlight");
+    data->window = get("Window");
+    data->text = get("Text");
+    data->base = get("Base");
+    data->desktop_background = get("DesktopBackground");
+    data->active_window_border1 = get("ActiveWindowBorder1");
+    data->active_window_border2 = get("ActiveWindowBorder2");
+    data->active_window_title = get("ActiveWindowTitle");
+    data->inactive_window_border1 = get("InactiveWindowBorder1");
+    data->inactive_window_border2 = get("InactiveWindowBorder2");
+    data->inactive_window_title = get("InactiveWindowTitle");
+    data->moving_window_border1 = get("MovingWindowBorder1");
+    data->moving_window_border2 = get("MovingWindowBorder2");
+    data->moving_window_title = get("MovingWindowTitle");
+    data->highlight_window_border1 = get("HighlightWindowBorder1");
+    data->highlight_window_border2 = get("HighlightWindowBorder2");
+    data->highlight_window_title = get("HighlightWindowTitle");
+    data->menu_stripe = get("MenuStripe");
+    data->menu_base = get("MenuBase");
+    data->menu_selection = get("MenuSelection");
+
+    buffer->seal();
+    buffer->share_globally();
+
+    return buffer;
+}

Libraries/LibDraw/SystemTheme.h

@@ -0,0 +1,44 @@
+#pragma once
+
+#include <AK/Types.h>
+#include <LibC/SharedBuffer.h>
+#include <LibDraw/Color.h>
+
+struct SystemTheme {
+    Color desktop_background;
+
+    Color active_window_border1;
+    Color active_window_border2;
+    Color active_window_title;
+
+    Color inactive_window_border1;
+    Color inactive_window_border2;
+    Color inactive_window_title;
+
+    Color moving_window_border1;
+    Color moving_window_border2;
+    Color moving_window_title;
+
+    Color highlight_window_border1;
+    Color highlight_window_border2;
+    Color highlight_window_title;
+
+    Color menu_stripe;
+    Color menu_base;
+    Color menu_selection;
+
+    Color window;
+    Color text;
+    Color base;
+
+    Color threed_highlight;
+    Color threed_shadow1;
+    Color threed_shadow2;
+
+    Color hover_highlight;
+};
+
+const SystemTheme& current_system_theme();
+int current_system_theme_buffer_id();
+void set_system_theme(SharedBuffer&);
+RefPtr<SharedBuffer> load_system_theme(const String& path);