mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 00:27:45 +00:00
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! :^)
This commit is contained in:
parent
7c8bbea995
commit
411058b2a3
50 changed files with 525 additions and 178 deletions
|
@ -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 {
|
||||
|
|
|
@ -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)
|
||||
{
|
||||
|
|
|
@ -10,6 +10,7 @@ OBJS = \
|
|||
ImageDecoder.o \
|
||||
Rect.o \
|
||||
StylePainter.o \
|
||||
SystemTheme.o \
|
||||
Emoji.o
|
||||
|
||||
LIBRARY = libdraw.a
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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; }
|
||||
};
|
||||
|
|
73
Libraries/LibDraw/SystemTheme.cpp
Normal file
73
Libraries/LibDraw/SystemTheme.cpp
Normal file
|
@ -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;
|
||||
}
|
44
Libraries/LibDraw/SystemTheme.h
Normal file
44
Libraries/LibDraw/SystemTheme.h
Normal file
|
@ -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);
|
Loading…
Add table
Add a link
Reference in a new issue