Add transparent overlay window (#4746)

src/messages/MessageColor.cpp

@@ -1,6 +1,6 @@
 #include "messages/MessageColor.hpp"
 
-#include "singletons/Theme.hpp"
+#include "messages/layouts/MessageLayoutContext.hpp"
 
 namespace chatterino {
 
@@ -15,18 +15,18 @@ MessageColor::MessageColor(Type type)
 {
 }
 
-const QColor &MessageColor::getColor(Theme &themeManager) const
+const QColor &MessageColor::getColor(const MessageColors &colors) const
 {
     switch (this->type_)
     {
         case Type::Custom:
             return this->customColor_;
         case Type::Text:
-            return themeManager.messages.textColors.regular;
+            return colors.regularText;
         case Type::System:
-            return themeManager.messages.textColors.system;
+            return colors.systemText;
         case Type::Link:
-            return themeManager.messages.textColors.link;
+            return colors.linkText;
     }
 
     static QColor _default;

src/messages/MessageColor.hpp

@@ -4,7 +4,8 @@
 #include <QString>
 
 namespace chatterino {
-class Theme;
+
+struct MessageColors;
 
 struct MessageColor {
     enum Type { Custom, Text, Link, System };
@@ -12,7 +13,7 @@ struct MessageColor {
     MessageColor(const QColor &color);
     MessageColor(Type type_ = Text);
 
-    const QColor &getColor(Theme &themeManager) const;
+    const QColor &getColor(const MessageColors &colors) const;
 
     QString toString() const;
 

src/messages/MessageElement.cpp

@@ -7,6 +7,7 @@
 #include "messages/Emote.hpp"
 #include "messages/Image.hpp"
 #include "messages/layouts/MessageLayoutContainer.hpp"
+#include "messages/layouts/MessageLayoutContext.hpp"
 #include "messages/layouts/MessageLayoutElement.hpp"
 #include "providers/emoji/Emojis.hpp"
 #include "singletons/Emotes.hpp"
@@ -119,9 +120,9 @@ ImageElement::ImageElement(ImagePtr image, MessageElementFlags flags)
 }
 
 void ImageElement::addToContainer(MessageLayoutContainer &container,
-                                  MessageElementFlags flags)
+                                  const MessageLayoutContext &ctx)
 {
-    if (flags.hasAny(this->getFlags()))
+    if (ctx.flags.hasAny(this->getFlags()))
     {
         auto size = QSize(this->image_->width() * container.getScale(),
                           this->image_->height() * container.getScale());
@@ -151,9 +152,9 @@ CircularImageElement::CircularImageElement(ImagePtr image, int padding,
 }
 
 void CircularImageElement::addToContainer(MessageLayoutContainer &container,
-                                          MessageElementFlags flags)
+                                          const MessageLayoutContext &ctx)
 {
-    if (flags.hasAny(this->getFlags()))
+    if (ctx.flags.hasAny(this->getFlags()))
     {
         auto imgSize = QSize(this->image_->width(), this->image_->height()) *
                        container.getScale();
@@ -192,11 +193,11 @@ EmotePtr EmoteElement::getEmote() const
 }
 
 void EmoteElement::addToContainer(MessageLayoutContainer &container,
-                                  MessageElementFlags flags)
+                                  const MessageLayoutContext &ctx)
 {
-    if (flags.hasAny(this->getFlags()))
+    if (ctx.flags.hasAny(this->getFlags()))
     {
-        if (flags.has(MessageElementFlag::EmoteImages))
+        if (ctx.flags.has(MessageElementFlag::EmoteImages))
         {
             auto image = this->emote_->images.getImageOrLoaded(
                 container.getImageScale());
@@ -217,8 +218,9 @@ void EmoteElement::addToContainer(MessageLayoutContainer &container,
         {
             if (this->textElement_)
             {
-                this->textElement_->addToContainer(container,
-                                                   MessageElementFlag::Misc);
+                auto textCtx = ctx;
+                textCtx.flags = MessageElementFlag::Misc;
+                this->textElement_->addToContainer(container, textCtx);
             }
         }
     }
@@ -260,11 +262,11 @@ void LayeredEmoteElement::addEmoteLayer(const LayeredEmoteElement::Emote &emote)
 }
 
 void LayeredEmoteElement::addToContainer(MessageLayoutContainer &container,
-                                         MessageElementFlags flags)
+                                         const MessageLayoutContext &ctx)
 {
-    if (flags.hasAny(this->getFlags()))
+    if (ctx.flags.hasAny(this->getFlags()))
     {
-        if (flags.has(MessageElementFlag::EmoteImages))
+        if (ctx.flags.has(MessageElementFlag::EmoteImages))
         {
             auto images = this->getLoadedImages(container.getImageScale());
             if (images.empty())
@@ -291,8 +293,9 @@ void LayeredEmoteElement::addToContainer(MessageLayoutContainer &container,
         {
             if (this->textElement_)
             {
-                this->textElement_->addToContainer(container,
-                                                   MessageElementFlag::Misc);
+                auto textCtx = ctx;
+                textCtx.flags = MessageElementFlag::Misc;
+                this->textElement_->addToContainer(container, textCtx);
             }
         }
     }
@@ -447,9 +450,9 @@ BadgeElement::BadgeElement(const EmotePtr &emote, MessageElementFlags flags)
 }
 
 void BadgeElement::addToContainer(MessageLayoutContainer &container,
-                                  MessageElementFlags flags)
+                                  const MessageLayoutContext &ctx)
 {
-    if (flags.hasAny(this->getFlags()))
+    if (ctx.flags.hasAny(this->getFlags()))
     {
         auto image =
             this->emote_->images.getImageOrLoaded(container.getImageScale());
@@ -574,11 +577,11 @@ TextElement::TextElement(const QString &text, MessageElementFlags flags,
 }
 
 void TextElement::addToContainer(MessageLayoutContainer &container,
-                                 MessageElementFlags flags)
+                                 const MessageLayoutContext &ctx)
 {
     auto *app = getApp();
 
-    if (flags.hasAny(this->getFlags()))
+    if (ctx.flags.hasAny(this->getFlags()))
     {
         QFontMetrics metrics =
             app->getFonts()->getFontMetrics(this->style_, container.getScale());
@@ -589,7 +592,7 @@ void TextElement::addToContainer(MessageLayoutContainer &container,
 
             auto getTextLayoutElement = [&](QString text, int width,
                                             bool hasTrailingSpace) {
-                auto color = this->color_.getColor(*app->getThemes());
+                auto color = this->color_.getColor(ctx.messageColors);
                 app->getThemes()->normalizeColor(color);
 
                 auto *e = new TextLayoutElement(
@@ -697,18 +700,18 @@ SingleLineTextElement::SingleLineTextElement(const QString &text,
 }
 
 void SingleLineTextElement::addToContainer(MessageLayoutContainer &container,
-                                           MessageElementFlags flags)
+                                           const MessageLayoutContext &ctx)
 {
     auto *app = getApp();
 
-    if (flags.hasAny(this->getFlags()))
+    if (ctx.flags.hasAny(this->getFlags()))
     {
         QFontMetrics metrics =
             app->getFonts()->getFontMetrics(this->style_, container.getScale());
 
         auto getTextLayoutElement = [&](QString text, int width,
                                         bool hasTrailingSpace) {
-            auto color = this->color_.getColor(*app->getThemes());
+            auto color = this->color_.getColor(ctx.messageColors);
             app->getThemes()->normalizeColor(color);
 
             auto *e = new TextLayoutElement(
@@ -838,11 +841,11 @@ LinkElement::LinkElement(const Parsed &parsed, const QString &fullUrl,
 }
 
 void LinkElement::addToContainer(MessageLayoutContainer &container,
-                                 MessageElementFlags flags)
+                                 const MessageLayoutContext &ctx)
 {
     this->words_ =
         getSettings()->lowercaseDomains ? this->lowercase_ : this->original_;
-    TextElement::addToContainer(container, flags);
+    TextElement::addToContainer(container, ctx);
 }
 
 Link LinkElement::getLink() const
@@ -873,7 +876,7 @@ MentionElement::MentionElement(const QString &displayName, QString loginName_,
 }
 
 void MentionElement::addToContainer(MessageLayoutContainer &container,
-                                    MessageElementFlags flags)
+                                    const MessageLayoutContext &ctx)
 {
     if (getSettings()->colorUsernames)
     {
@@ -893,7 +896,7 @@ void MentionElement::addToContainer(MessageLayoutContainer &container,
         this->style_ = FontStyle::ChatMedium;
     }
 
-    TextElement::addToContainer(container, flags);
+    TextElement::addToContainer(container, ctx);
 }
 
 MessageElement *MentionElement::setLink(const Link &link)
@@ -943,9 +946,9 @@ TimestampElement::TimestampElement(QTime time)
 }
 
 void TimestampElement::addToContainer(MessageLayoutContainer &container,
-                                      MessageElementFlags flags)
+                                      const MessageLayoutContext &ctx)
 {
-    if (flags.hasAny(this->getFlags()))
+    if (ctx.flags.hasAny(this->getFlags()))
     {
         if (getSettings()->timestampFormat != this->format_)
         {
@@ -953,7 +956,7 @@ void TimestampElement::addToContainer(MessageLayoutContainer &container,
             this->element_.reset(this->formatTime(this->time_));
         }
 
-        this->element_->addToContainer(container, flags);
+        this->element_->addToContainer(container, ctx);
     }
 }
 
@@ -985,9 +988,9 @@ TwitchModerationElement::TwitchModerationElement()
 }
 
 void TwitchModerationElement::addToContainer(MessageLayoutContainer &container,
-                                             MessageElementFlags flags)
+                                             const MessageLayoutContext &ctx)
 {
-    if (flags.has(MessageElementFlag::ModeratorTools))
+    if (ctx.flags.has(MessageElementFlag::ModeratorTools))
     {
         QSize size(int(container.getScale() * 16),
                    int(container.getScale() * 16));
@@ -1026,9 +1029,9 @@ LinebreakElement::LinebreakElement(MessageElementFlags flags)
 }
 
 void LinebreakElement::addToContainer(MessageLayoutContainer &container,
-                                      MessageElementFlags flags)
+                                      const MessageLayoutContext &ctx)
 {
-    if (flags.hasAny(this->getFlags()))
+    if (ctx.flags.hasAny(this->getFlags()))
     {
         container.breakLine();
     }
@@ -1050,9 +1053,9 @@ ScalingImageElement::ScalingImageElement(ImageSet images,
 }
 
 void ScalingImageElement::addToContainer(MessageLayoutContainer &container,
-                                         MessageElementFlags flags)
+                                         const MessageLayoutContext &ctx)
 {
-    if (flags.hasAny(this->getFlags()))
+    if (ctx.flags.hasAny(this->getFlags()))
     {
         const auto &image =
             this->images_.getImageOrLoaded(container.getImageScale());
@@ -1083,14 +1086,14 @@ ReplyCurveElement::ReplyCurveElement()
 }
 
 void ReplyCurveElement::addToContainer(MessageLayoutContainer &container,
-                                       MessageElementFlags flags)
+                                       const MessageLayoutContext &ctx)
 {
     static const int width = 18;         // Overall width
     static const float thickness = 1.5;  // Pen width
     static const int radius = 6;         // Radius of the top left corner
     static const int margin = 2;         // Top/Left/Bottom margin
 
-    if (flags.hasAny(this->getFlags()))
+    if (ctx.flags.hasAny(this->getFlags()))
     {
         float scale = container.getScale();
         container.addElement(

src/messages/MessageElement.hpp

@@ -23,6 +23,7 @@ namespace chatterino {
 class Channel;
 struct MessageLayoutContainer;
 class MessageLayoutElement;
+struct MessageLayoutContext;
 
 class Image;
 using ImagePtr = std::shared_ptr<Image>;
@@ -184,7 +185,7 @@ public:
     void addFlags(MessageElementFlags flags);
 
     virtual void addToContainer(MessageLayoutContainer &container,
-                                MessageElementFlags flags) = 0;
+                                const MessageLayoutContext &ctx) = 0;
 
     virtual QJsonObject toJson() const;
 
@@ -205,7 +206,7 @@ public:
     ImageElement(ImagePtr image, MessageElementFlags flags);
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     QJsonObject toJson() const override;
 
@@ -221,7 +222,7 @@ public:
                          MessageElementFlags flags);
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     QJsonObject toJson() const override;
 
@@ -241,7 +242,7 @@ public:
     ~TextElement() override = default;
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     QJsonObject toJson() const override;
 
@@ -262,7 +263,7 @@ public:
     ~SingleLineTextElement() override = default;
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     QJsonObject toJson() const override;
 
@@ -298,7 +299,7 @@ public:
     LinkElement &operator=(LinkElement &&) = delete;
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     Link getLink() const override;
 
@@ -338,7 +339,7 @@ public:
     MentionElement &operator=(MentionElement &&) = delete;
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     MessageElement *setLink(const Link &link) override;
     Link getLink() const override;
@@ -369,7 +370,7 @@ public:
                  const MessageColor &textElementColor = MessageColor::Text);
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags_) override;
+                        const MessageLayoutContext &ctx) override;
     EmotePtr getEmote() const;
 
     QJsonObject toJson() const override;
@@ -401,7 +402,7 @@ public:
     void addEmoteLayer(const Emote &emote);
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     // Returns a concatenation of each emote layer's cleaned copy string
     QString getCleanCopyString() const;
@@ -433,7 +434,7 @@ public:
     BadgeElement(const EmotePtr &data, MessageElementFlags flags_);
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags_) override;
+                        const MessageLayoutContext &ctx) override;
 
     EmotePtr getEmote() const;
 
@@ -494,7 +495,7 @@ public:
     ~TimestampElement() override = default;
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     TextElement *formatTime(const QTime &time);
 
@@ -514,7 +515,7 @@ public:
     TwitchModerationElement();
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     QJsonObject toJson() const override;
 };
@@ -526,7 +527,7 @@ public:
     LinebreakElement(MessageElementFlags flags);
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     QJsonObject toJson() const override;
 };
@@ -538,7 +539,7 @@ public:
     ScalingImageElement(ImageSet images, MessageElementFlags flags);
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     QJsonObject toJson() const override;
 
@@ -552,7 +553,7 @@ public:
     ReplyCurveElement();
 
     void addToContainer(MessageLayoutContainer &container,
-                        MessageElementFlags flags) override;
+                        const MessageLayoutContext &ctx) override;
 
     QJsonObject toJson() const override;
 };

src/messages/layouts/MessageLayout.cpp

@@ -68,8 +68,7 @@ int MessageLayout::getWidth() const
 
 // Layout
 // return true if redraw is required
-bool MessageLayout::layout(int width, float scale, float imageScale,
-                           MessageElementFlags flags,
+bool MessageLayout::layout(const MessageLayoutContext &ctx,
                            bool shouldInvalidateBuffer)
 {
     //    BenchmarkGuard benchmark("MessageLayout::layout()");
@@ -77,9 +76,9 @@ bool MessageLayout::layout(int width, float scale, float imageScale,
     bool layoutRequired = false;
 
     // check if width changed
-    bool widthChanged = width != this->currentLayoutWidth_;
+    bool widthChanged = ctx.width != this->currentLayoutWidth_;
     layoutRequired |= widthChanged;
-    this->currentLayoutWidth_ = width;
+    this->currentLayoutWidth_ = ctx.width;
 
     // check if layout state changed
     const auto layoutGeneration = getApp()->getWindows()->getGeneration();
@@ -91,18 +90,18 @@ bool MessageLayout::layout(int width, float scale, float imageScale,
     }
 
     // check if work mask changed
-    layoutRequired |= this->currentWordFlags_ != flags;
-    this->currentWordFlags_ = flags;  // getSettings()->getWordTypeMask();
+    layoutRequired |= this->currentWordFlags_ != ctx.flags;
+    this->currentWordFlags_ = ctx.flags;  // getSettings()->getWordTypeMask();
 
     // check if layout was requested manually
     layoutRequired |= this->flags.has(MessageLayoutFlag::RequiresLayout);
     this->flags.unset(MessageLayoutFlag::RequiresLayout);
 
     // check if dpi changed
-    layoutRequired |= this->scale_ != scale;
-    this->scale_ = scale;
-    layoutRequired |= this->imageScale_ != imageScale;
-    this->imageScale_ = imageScale;
+    layoutRequired |= this->scale_ != ctx.scale;
+    this->scale_ = ctx.scale;
+    layoutRequired |= this->imageScale_ != ctx.imageScale;
+    this->imageScale_ = ctx.imageScale;
 
     if (!layoutRequired)
     {
@@ -115,7 +114,7 @@ bool MessageLayout::layout(int width, float scale, float imageScale,
     }
 
     int oldHeight = this->container_.getHeight();
-    this->actuallyLayout(width, flags);
+    this->actuallyLayout(ctx);
     if (widthChanged || this->container_.getHeight() != oldHeight)
     {
         this->deleteBuffer();
@@ -125,7 +124,7 @@ bool MessageLayout::layout(int width, float scale, float imageScale,
     return true;
 }
 
-void MessageLayout::actuallyLayout(int width, MessageElementFlags flags)
+void MessageLayout::actuallyLayout(const MessageLayoutContext &ctx)
 {
 #ifdef FOURTF
     this->layoutCount_++;
@@ -134,7 +133,7 @@ void MessageLayout::actuallyLayout(int width, MessageElementFlags flags)
     auto messageFlags = this->message_->flags;
 
     if (this->flags.has(MessageLayoutFlag::Expanded) ||
-        (flags.has(MessageElementFlag::ModeratorTools) &&
+        (ctx.flags.has(MessageElementFlag::ModeratorTools) &&
          !this->message_->flags.has(MessageFlag::Disabled)))
     {
         messageFlags.unset(MessageFlag::Collapsed);
@@ -143,9 +142,9 @@ void MessageLayout::actuallyLayout(int width, MessageElementFlags flags)
     bool hideModerated = getSettings()->hideModerated;
     bool hideModerationActions = getSettings()->hideModerationActions;
     bool hideSimilar = getSettings()->hideSimilar;
-    bool hideReplies = !flags.has(MessageElementFlag::RepliedMessage);
+    bool hideReplies = !ctx.flags.has(MessageElementFlag::RepliedMessage);
 
-    this->container_.beginLayout(width, this->scale_, this->imageScale_,
+    this->container_.beginLayout(ctx.width, this->scale_, this->imageScale_,
                                  messageFlags);
 
     for (const auto &element : this->message_->elements)
@@ -177,7 +176,7 @@ void MessageLayout::actuallyLayout(int width, MessageElementFlags flags)
             continue;
         }
 
-        element->addToContainer(this->container_, flags);
+        element->addToContainer(this->container_, ctx);
     }
 
     if (this->height_ != this->container_.getHeight())
@@ -201,10 +200,15 @@ MessagePaintResult MessageLayout::paint(const MessagePaintContext &ctx)
 {
     MessagePaintResult result;
 
-    QPixmap *pixmap = this->ensureBuffer(ctx.painter, ctx.canvasWidth);
+    QPixmap *pixmap = this->ensureBuffer(ctx.painter, ctx.canvasWidth,
+                                         ctx.messageColors.hasTransparency);
 
     if (!this->bufferValid_)
     {
+        if (ctx.messageColors.hasTransparency)
+        {
+            pixmap->fill(Qt::transparent);
+        }
         this->updateBuffer(pixmap, ctx);
     }
 
@@ -278,7 +282,7 @@ MessagePaintResult MessageLayout::paint(const MessagePaintContext &ctx)
     return result;
 }
 
-QPixmap *MessageLayout::ensureBuffer(QPainter &painter, int width)
+QPixmap *MessageLayout::ensureBuffer(QPainter &painter, int width, bool clear)
 {
     if (this->buffer_ != nullptr)
     {
@@ -292,6 +296,11 @@ QPixmap *MessageLayout::ensureBuffer(QPainter &painter, int width)
             painter.device()->devicePixelRatioF()));
     this->buffer_->setDevicePixelRatio(painter.device()->devicePixelRatioF());
 
+    if (clear)
+    {
+        this->buffer_->fill(Qt::transparent);
+    }
+
     this->bufferValid_ = false;
     DebugCount::increase("message drawing buffers");
     return this->buffer_.get();
@@ -313,10 +322,10 @@ void MessageLayout::updateBuffer(QPixmap *buffer,
         if (ctx.preferences.alternateMessages &&
             this->flags.has(MessageLayoutFlag::AlternateBackground))
         {
-            return ctx.messageColors.alternate;
+            return ctx.messageColors.alternateBg;
         }
 
-        return ctx.messageColors.regular;
+        return ctx.messageColors.regularBg;
     }();
 
     if (this->message_->flags.has(MessageFlag::ElevatedMessage) &&

src/messages/layouts/MessageLayout.hpp

@@ -18,6 +18,7 @@ struct Selection;
 struct MessageLayoutContainer;
 class MessageLayoutElement;
 struct MessagePaintContext;
+struct MessageLayoutContext;
 
 enum class MessageElementFlag : int64_t;
 using MessageElementFlags = FlagsEnum<MessageElementFlag>;
@@ -56,8 +57,7 @@ public:
 
     MessageLayoutFlags flags;
 
-    bool layout(int width, float scale_, float imageScale,
-                MessageElementFlags flags, bool shouldInvalidateBuffer);
+    bool layout(const MessageLayoutContext &ctx, bool shouldInvalidateBuffer);
 
     // Painting
     MessagePaintResult paint(const MessagePaintContext &ctx);
@@ -112,11 +112,11 @@ public:
 
 private:
     // methods
-    void actuallyLayout(int width, MessageElementFlags flags);
+    void actuallyLayout(const MessageLayoutContext &ctx);
     void updateBuffer(QPixmap *buffer, const MessagePaintContext &ctx);
 
     // Create new buffer if required, returning the buffer
-    QPixmap *ensureBuffer(QPainter &painter, int width);
+    QPixmap *ensureBuffer(QPainter &painter, int width, bool clear);
 
     // variables
     const MessagePtr message_;

src/messages/layouts/MessageLayoutContext.cpp

@@ -3,21 +3,44 @@
 #include "singletons/Settings.hpp"
 #include "singletons/Theme.hpp"
 
+#include <algorithm>
+
 namespace chatterino {
 
-void MessageColors::applyTheme(Theme *theme)
+void MessageColors::applyTheme(Theme *theme, bool isOverlay,
+                               int backgroundOpacity)
 {
-    this->regular = theme->messages.backgrounds.regular;
-    this->alternate = theme->messages.backgrounds.alternate;
+    auto applyColors = [this](const auto &src) {
+        this->regularBg = src.backgrounds.regular;
+        this->alternateBg = src.backgrounds.alternate;
 
-    this->disabled = theme->messages.disabled;
-    this->selection = theme->messages.selection;
-    this->system = theme->messages.textColors.system;
+        this->disabled = src.disabled;
+        this->selection = src.selection;
+
+        this->regularText = src.textColors.regular;
+        this->linkText = src.textColors.link;
+        this->systemText = src.textColors.system;
+    };
+
+    if (isOverlay)
+    {
+        this->channelBackground = theme->overlayMessages.background;
+        this->channelBackground.setAlpha(std::clamp(backgroundOpacity, 0, 255));
+        applyColors(theme->overlayMessages);
+    }
+    else
+    {
+        this->channelBackground = theme->splits.background;
+        applyColors(theme->messages);
+    }
 
     this->messageSeperator = theme->splits.messageSeperator;
 
     this->focusedLastMessageLine = theme->tabs.selected.backgrounds.regular;
     this->unfocusedLastMessageLine = theme->tabs.selected.backgrounds.unfocused;
+
+    this->hasTransparency =
+        this->regularBg.alpha() != 255 || this->alternateBg.alpha() != 255;
 }
 
 void MessagePreferences::connectSettings(Settings *settings,

src/messages/layouts/MessageLayoutContext.hpp

@@ -1,5 +1,7 @@
 #pragma once
 
+#include "messages/MessageElement.hpp"
+
 #include <QColor>
 #include <QPainter>
 
@@ -16,18 +18,27 @@ struct Selection;
 
 // TODO: Figure out if this could be a subset of Theme instead (e.g. Theme::MessageColors)
 struct MessageColors {
-    QColor regular;
-    QColor alternate;
+    QColor channelBackground;
+
+    // true if any of the background colors have transparency
+    bool hasTransparency = false;
+
+    QColor regularBg;
+    QColor alternateBg;
+
     QColor disabled;
     QColor selection;
-    QColor system;
+
+    QColor regularText;
+    QColor linkText;
+    QColor systemText;
 
     QColor messageSeperator;
 
     QColor focusedLastMessageLine;
     QColor unfocusedLastMessageLine;
 
-    void applyTheme(Theme *theme);
+    void applyTheme(Theme *theme, bool isOverlay, int backgroundOpacity);
 };
 
 // TODO: Explore if we can let settings own this
@@ -72,4 +83,13 @@ struct MessagePaintContext {
     bool isLastReadMessage{};
 };
 
+struct MessageLayoutContext {
+    const MessageColors &messageColors;
+    MessageElementFlags flags;
+
+    int width = 1;
+    float scale = 1;
+    float imageScale = 1;
+};
+
 }  // namespace chatterino

src/messages/layouts/MessageLayoutElement.cpp

@@ -555,7 +555,7 @@ void TextIconLayoutElement::paint(QPainter &painter,
 
     QFont font = app->getFonts()->getFont(FontStyle::Tiny, this->scale);
 
-    painter.setPen(messageColors.system);
+    painter.setPen(messageColors.systemText);
     painter.setFont(font);
 
     QTextOption option;