diff --git a/Userland/Libraries/LibGUI/Variant.cpp b/Userland/Libraries/LibGUI/Variant.cpp
index d70e8bf1143..e6483396680 100644
--- a/Userland/Libraries/LibGUI/Variant.cpp
+++ b/Userland/Libraries/LibGUI/Variant.cpp
@@ -46,6 +46,8 @@ const char* to_string(Variant::Type type)
         return "Font";
     case Variant::Type::TextAlignment:
         return "TextAlignment";
+    case Variant::Type::ColorRole:
+        return "ColorRole";
     }
     VERIFY_NOT_REACHED();
 }
@@ -85,6 +87,12 @@ Variant::Variant(Gfx::TextAlignment value)
     m_value.as_text_alignment = value;
 }
 
+Variant::Variant(Gfx::ColorRole value)
+    : m_type(Type::ColorRole)
+{
+    m_value.as_color_role = value;
+}
+
 Variant::Variant(i32 value)
     : m_type(Type::Int32)
 {
@@ -320,6 +328,9 @@ void Variant::copy_from(const Variant& other)
     case Type::TextAlignment:
         m_value.as_text_alignment = other.m_value.as_text_alignment;
         break;
+    case Type::ColorRole:
+        m_value.as_color_role = other.m_value.as_color_role;
+        break;
     case Type::Invalid:
         break;
     }
@@ -360,6 +371,8 @@ bool Variant::operator==(const Variant& other) const
         return &as_font() == &other.as_font();
     case Type::TextAlignment:
         return m_value.as_text_alignment == other.m_value.as_text_alignment;
+    case Type::ColorRole:
+        return m_value.as_color_role == other.m_value.as_color_role;
     case Type::Invalid:
         return true;
     }
@@ -398,6 +411,7 @@ bool Variant::operator<(const Variant& other) const
     case Type::Rect:
     case Type::Font:
     case Type::TextAlignment:
+    case Type::ColorRole:
         // FIXME: Figure out how to compare these.
         VERIFY_NOT_REACHED();
     case Type::Invalid:
@@ -454,6 +468,9 @@ String Variant::to_string() const
         }
         return "";
     }
+    case Type::ColorRole: {
+        return String::formatted("Gfx::ColorRole::{}", Gfx::to_string(m_value.as_color_role));
+    }
     case Type::Invalid:
         return "[null]";
     }
diff --git a/Userland/Libraries/LibGUI/Variant.h b/Userland/Libraries/LibGUI/Variant.h
index 9bb2a6eb313..48fe8826828 100644
--- a/Userland/Libraries/LibGUI/Variant.h
+++ b/Userland/Libraries/LibGUI/Variant.h
@@ -10,6 +10,7 @@
 #include <LibGUI/Icon.h>
 #include <LibGfx/Bitmap.h>
 #include <LibGfx/Font.h>
+#include <LibGfx/SystemTheme.h>
 
 namespace GUI {
 
@@ -33,6 +34,7 @@ public:
     Variant(const Gfx::IntRect&);
     Variant(const Gfx::Font&);
     Variant(const Gfx::TextAlignment);
+    Variant(const Gfx::ColorRole);
     Variant(const JsonValue&);
     Variant(Color);
 
@@ -62,6 +64,7 @@ public:
         Rect,
         Font,
         TextAlignment,
+        ColorRole,
     };
 
     bool is_valid() const { return m_type != Type::Invalid; }
@@ -80,6 +83,7 @@ public:
     bool is_rect() const { return m_type == Type::Rect; }
     bool is_font() const { return m_type == Type::Font; }
     bool is_text_alignment() const { return m_type == Type::TextAlignment; }
+    bool is_color_role() const { return m_type == Type::ColorRole; }
     Type type() const { return m_type; }
 
     bool as_bool() const
@@ -234,6 +238,13 @@ public:
         return m_value.as_text_alignment;
     }
 
+    Gfx::ColorRole to_color_role() const
+    {
+        if (type() != Type::ColorRole)
+            return Gfx::ColorRole::NoRole;
+        return m_value.as_color_role;
+    }
+
     Color to_color(Color default_value = {}) const
     {
         if (type() == Type::Color)
@@ -283,6 +294,7 @@ private:
         float as_float;
         Gfx::RGBA32 as_color;
         Gfx::TextAlignment as_text_alignment;
+        Gfx::ColorRole as_color_role;
         RawPoint as_point;
         RawSize as_size;
         RawRect as_rect;