Respect Theme in Input Completion & Quick Switcher (#4671)

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Minor: Add an icon showing when streamer mode is enabled (#4410)
 - Minor: Added `/shoutout <username>` commands to shoutout specified user. (#4638)
 - Minor: Improved editing hotkeys. (#4628)
+- Minor: The input completion and quick switcher are now styled to match your theme. (#4671)
 - Bugfix: Fixed generation of crashdumps by the browser-extension process when the browser was closed. (#4667)
 - Bugfix: Fixed a crash when opening and closing a reply thread and switching the user. (#4675)
 - Dev: Added command to set Qt's logging filter/rules at runtime (`/c2-set-logging-rules`). (#4637)

src/widgets/dialogs/switcher/QuickSwitcherPopup.cpp

@@ -143,21 +143,6 @@ void QuickSwitcherPopup::themeChangedEvent()
 {
     BasePopup::themeChangedEvent();
 
-    const QString textCol = this->theme->window.text.name();
-    const QString bgCol = this->theme->window.background.name();
-
-    const QString selCol =
-        (this->theme->isLightTheme()
-             ? "#68B1FF"  // Copied from Theme::splits.input.styleSheet
-             : this->theme->tabs.selected.backgrounds.regular.name());
-
-    const QString listStyle =
-        QString(
-            "color: %1; background-color: %2; selection-background-color: %3")
-            .arg(textCol)
-            .arg(bgCol)
-            .arg(selCol);
-
     this->ui_.searchEdit->setStyleSheet(this->theme->splits.input.styleSheet);
     this->ui_.list->refreshTheme(*this->theme);
 }

src/widgets/listview/GenericListView.cpp

@@ -103,20 +103,57 @@ bool GenericListView::eventFilter(QObject * /*watched*/, QEvent *event)
 
 void GenericListView::refreshTheme(const Theme &theme)
 {
-    const QString textCol = theme.window.text.name();
+    const auto textCol = theme.window.text.name(QColor::HexArgb);
-    const QString bgCol = theme.window.background.name();
 
-    const QString selCol =
+    auto accentColor = theme.accent;
-        (theme.isLightTheme()
+    accentColor.setAlpha(100);
-             ? "#68B1FF"  // Copied from Theme::splits.input.styleSheet
+    const auto selCol = accentColor.name(QColor::HexArgb);
-             : theme.tabs.selected.backgrounds.regular.name());
 
-    const QString listStyle =
+    const auto listStyle = QStringLiteral(R"(
-        QString(
+        QListView {
-            "color: %1; background-color: %2; selection-background-color: %3")
+            border: none;
-            .arg(textCol)
+            color: %1;
-            .arg(bgCol)
+            background: transparent;
-            .arg(selCol);
+            selection-background-color: %2;
+        }
+
+        QAbstractScrollArea::corner {
+            border: none;
+        }
+
+        QScrollBar {
+            background: transparent;
+        }
+        QScrollBar:vertical {
+            margin-left: 4;
+        }
+        QScrollBar:horizontal {
+            margin-top: 4;
+        }
+
+        QScrollBar::add-line,
+        QScrollBar::sub-line,
+        QScrollBar::left-arrow,
+        QScrollBar::right-arrow,
+        QScrollBar::down-arrow,
+        QScrollBar::up-arrow {
+            width: 0;
+            height: 0;
+        }
+
+        QScrollBar::handle {
+            background: %2;
+            border-radius: 4;
+        }
+        QScrollBar::handle:vertical {
+            min-height: 8;
+            width: 8;
+        }
+        QScrollBar::handle:horizontal {
+            min-width: 8;
+            height: 8;
+        })")
+                               .arg(textCol, selCol);
 
     this->setStyleSheet(listStyle);
 }

src/widgets/splits/InputCompletionPopup.cpp

@@ -10,6 +10,7 @@
 #include "providers/twitch/TwitchChannel.hpp"
 #include "providers/twitch/TwitchIrcServer.hpp"
 #include "singletons/Emotes.hpp"
+#include "singletons/Theme.hpp"
 #include "util/LayoutCreator.hpp"
 #include "widgets/listview/GenericListView.hpp"
 #include "widgets/splits/InputCompletionItem.hpp"
@@ -141,6 +142,7 @@ InputCompletionPopup::InputCompletionPopup(QWidget *parent)
     , model_(this)
 {
     this->initLayout();
+    this->themeChangedEvent();
 
     QObject::connect(&this->redrawTimer_, &QTimer::timeout, this, [this] {
         if (this->isVisible())
@@ -227,6 +229,13 @@ void InputCompletionPopup::hideEvent(QHideEvent * /*event*/)
     this->redrawTimer_.stop();
 }
 
+void InputCompletionPopup::themeChangedEvent()
+{
+    BasePopup::themeChangedEvent();
+
+    this->ui_.listView->refreshTheme(*getTheme());
+}
+
 void InputCompletionPopup::initLayout()
 {
     LayoutCreator creator = {this};

src/widgets/splits/InputCompletionPopup.hpp

@@ -50,6 +50,8 @@ protected:
     void showEvent(QShowEvent *event) override;
     void hideEvent(QHideEvent *event) override;
 
+    void themeChangedEvent() override;
+
 private:
     void initLayout();