From 93a9e41d31dc8cbc838bdb7857f26cc36933e6d8 Mon Sep 17 00:00:00 2001 From: nerix Date: Fri, 17 Mar 2023 20:53:03 +0100 Subject: [PATCH] Cleanup `Theme`-related Code (#4450) --- CHANGELOG.md | 1 + src/messages/layouts/MessageLayout.cpp | 7 +- src/singletons/Theme.cpp | 251 ++++++------------ src/singletons/Theme.hpp | 35 +-- .../dialogs/switcher/QuickSwitcherPopup.cpp | 2 +- src/widgets/helper/NotebookButton.cpp | 4 +- src/widgets/listview/GenericListView.cpp | 2 +- src/widgets/splits/SplitContainer.cpp | 7 +- 8 files changed, 94 insertions(+), 215 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48f204b88..d8a52f28c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unversioned - Dev: Only log debug messages when NDEBUG is not defined. (#4442) +- Dev: Cleaned up theme related code. (#4450) ## 2.4.2 diff --git a/src/messages/layouts/MessageLayout.cpp b/src/messages/layouts/MessageLayout.cpp index d00d092e4..9e39c557a 100644 --- a/src/messages/layouts/MessageLayout.cpp +++ b/src/messages/layouts/MessageLayout.cpp @@ -282,10 +282,9 @@ void MessageLayout::paint(QPainter &painter, int width, int y, int messageIndex, } else { - color = - isWindowFocused - ? app->themes->tabs.selected.backgrounds.regular.color() - : app->themes->tabs.selected.backgrounds.unfocused.color(); + color = isWindowFocused + ? app->themes->tabs.selected.backgrounds.regular + : app->themes->tabs.selected.backgrounds.unfocused; } QBrush brush(color, static_cast( diff --git a/src/singletons/Theme.cpp b/src/singletons/Theme.cpp index e13df1cd2..19f44bf27 100644 --- a/src/singletons/Theme.cpp +++ b/src/singletons/Theme.cpp @@ -8,8 +8,6 @@ #include -#define LOOKUP_COLOR_COUNT 360 - namespace { double getMultiplierByTheme(const QString &themeName) { @@ -17,26 +15,20 @@ double getMultiplierByTheme(const QString &themeName) { return 0.8; } - else if (themeName == "White") + if (themeName == "White") { return 1.0; } - else if (themeName == "Black") + if (themeName == "Black") { return -1.0; } - else if (themeName == "Dark") + if (themeName == "Dark") { return -0.8; } - /* - else if (themeName == "Custom") - { - return getSettings()->customThemeMultiplier.getValue(); - } - */ - return -0.8; + return -0.8; // default: Dark } } // namespace @@ -47,16 +39,6 @@ bool Theme::isLightTheme() const return this->isLight_; } -QColor Theme::blendColors(const QColor &color1, const QColor &color2, - qreal ratio) -{ - int r = int(color1.red() * (1 - ratio) + color2.red() * ratio); - int g = int(color1.green() * (1 - ratio) + color2.green() * ratio); - int b = int(color1.blue() * (1 - ratio) + color2.blue() * ratio); - - return QColor(r, g, b, 255); -} - Theme::Theme() { this->update(); @@ -66,149 +48,84 @@ Theme::Theme() this->update(); }, false); - this->themeHue.connectSimple( - [this](auto) { - this->update(); - }, - false); } void Theme::update() { - this->actuallyUpdate(this->themeHue, - getMultiplierByTheme(this->themeName.getValue())); + this->actuallyUpdate(getMultiplierByTheme(this->themeName.getValue())); this->updated.invoke(); } -// hue: theme color (0 - 1) // multiplier: 1 = white, 0.8 = light, -0.8 dark, -1 black -void Theme::actuallyUpdate(double hue, double multiplier) +void Theme::actuallyUpdate(double multiplier) { this->isLight_ = multiplier > 0; - bool lightWin = isLight_; - // QColor themeColor = QColor::fromHslF(hue, 0.43, 0.5); - QColor themeColor = QColor::fromHslF(hue, 0.8, 0.5); - QColor themeColorNoSat = QColor::fromHslF(hue, 0, 0.5); - - const auto sat = qreal(0); const auto isLight = this->isLightTheme(); - const auto flat = isLight; - auto getColor = [multiplier](double h, double s, double l, double a = 1.0) { - return QColor::fromHslF(h, s, ((l - 0.5) * multiplier) + 0.5, a); + auto getGray = [multiplier](double l, double a = 1.0) { + return QColor::fromHslF(0, 0, ((l - 0.5) * multiplier) + 0.5, a); }; /// WINDOW - { #ifdef Q_OS_LINUX - this->window.background = lightWin ? "#fff" : QColor(61, 60, 56); + this->window.background = isLight ? "#fff" : QColor(61, 60, 56); #else - this->window.background = lightWin ? "#fff" : "#111"; + this->window.background = isLight ? "#fff" : "#111"; #endif + this->window.text = isLight ? "#000" : "#eee"; - QColor fg = this->window.text = lightWin ? "#000" : "#eee"; - this->window.borderFocused = lightWin ? "#ccc" : themeColor; - this->window.borderUnfocused = lightWin ? "#ccc" : themeColorNoSat; - - // Ubuntu style - // TODO: add setting for this - // TabText = QColor(210, 210, 210); - // TabBackground = QColor(61, 60, 56); - // TabHoverText = QColor(210, 210, 210); - // TabHoverBackground = QColor(73, 72, 68); - - // message (referenced later) - this->messages.textColors.caret = // - this->messages.textColors.regular = isLight_ ? "#000" : "#fff"; - - QColor highlighted = lightWin ? QColor("#ff0000") : QColor("#ee6166"); - - /// TABS - if (lightWin) - { - this->tabs.regular = { - QColor("#444"), - {QColor("#fff"), QColor("#eee"), QColor("#fff")}, - {QColor("#fff"), QColor("#fff"), QColor("#fff")}}; - this->tabs.newMessage = { - QColor("#222"), - {QColor("#fff"), QColor("#eee"), QColor("#fff")}, - {QColor("#bbb"), QColor("#bbb"), QColor("#bbb")}}; - this->tabs.highlighted = { - fg, - {QColor("#fff"), QColor("#eee"), QColor("#fff")}, - {highlighted, highlighted, highlighted}}; - this->tabs.selected = { - QColor("#000"), - {QColor("#b4d7ff"), QColor("#b4d7ff"), QColor("#b4d7ff")}, - {this->accent, this->accent, this->accent}}; - } - else - { - this->tabs.regular = { - QColor("#aaa"), - {QColor("#252525"), QColor("#252525"), QColor("#252525")}, - {QColor("#444"), QColor("#444"), QColor("#444")}}; - this->tabs.newMessage = { - fg, - {QColor("#252525"), QColor("#252525"), QColor("#252525")}, - {QColor("#888"), QColor("#888"), QColor("#888")}}; - this->tabs.highlighted = { - fg, - {QColor("#252525"), QColor("#252525"), QColor("#252525")}, - {highlighted, highlighted, highlighted}}; - - this->tabs.selected = { - QColor("#fff"), - {QColor("#555555"), QColor("#555555"), QColor("#555555")}, - {this->accent, this->accent, this->accent}}; - } - - // scrollbar - this->scrollbars.highlights.highlight = QColor("#ee6166"); - this->scrollbars.highlights.subscription = QColor("#C466FF"); - - // this->tabs.newMessage = { - // fg, - // {QBrush(blendColors(themeColor, "#ccc", 0.9), Qt::FDiagPattern), - // QBrush(blendColors(themeColor, "#ccc", 0.9), Qt::FDiagPattern), - // QBrush(blendColors(themeColorNoSat, "#ccc", 0.9), - // Qt::FDiagPattern)}}; - - // this->tabs.newMessage = { - // fg, - // {QBrush(blendColors(themeColor, "#666", 0.7), - // Qt::FDiagPattern), - // QBrush(blendColors(themeColor, "#666", 0.5), - // Qt::FDiagPattern), - // QBrush(blendColors(themeColorNoSat, "#666", 0.7), - // Qt::FDiagPattern)}}; - // this->tabs.highlighted = {fg, {QColor("#777"), - // QColor("#777"), QColor("#666")}}; - - this->tabs.dividerLine = - this->tabs.selected.backgrounds.regular.color(); + /// TABSs + if (isLight) + { + this->tabs.regular = {.text = "#444", + .backgrounds = {"#fff", "#eee", "#fff"}, + .line = {"#fff", "#fff", "#fff"}}; + this->tabs.newMessage = {.text = "#222", + .backgrounds = {"#fff", "#eee", "#fff"}, + .line = {"#bbb", "#bbb", "#bbb"}}; + this->tabs.highlighted = {.text = "#000", + .backgrounds = {"#fff", "#eee", "#fff"}, + .line = {"#f00", "#f00", "#f00"}}; + this->tabs.selected = { + .text = "#000", + .backgrounds = {"#b4d7ff", "#b4d7ff", "#b4d7ff"}, + .line = {this->accent, this->accent, this->accent}}; + } + else + { + this->tabs.regular = {.text = "#aaa", + .backgrounds{"#252525", "#252525", "#252525"}, + .line = {"#444", "#444", "#444"}}; + this->tabs.newMessage = {.text = "#eee", + .backgrounds{"#252525", "#252525", "#252525"}, + .line = {"#888", "#888", "#888"}}; + this->tabs.highlighted = {.text = "#eee", + .backgrounds{"#252525", "#252525", "#252525"}, + .line = {"#ee6166", "#ee6166", "#ee6166"}}; + this->tabs.selected = { + .text = "#fff", + .backgrounds{"#555", "#555", "#555"}, + .line = {this->accent, this->accent, this->accent}}; } + this->tabs.dividerLine = this->tabs.selected.backgrounds.regular; + // Message - this->messages.textColors.link = - isLight_ ? QColor(66, 134, 244) : QColor(66, 134, 244); + this->messages.textColors.caret = isLight ? "#000" : "#fff"; + this->messages.textColors.regular = isLight ? "#000" : "#fff"; + this->messages.textColors.link = QColor(66, 134, 244); this->messages.textColors.system = QColor(140, 127, 127); this->messages.textColors.chatPlaceholder = - isLight_ ? QColor(175, 159, 159) : QColor(93, 85, 85); + isLight ? QColor(175, 159, 159) : QColor(93, 85, 85); - this->messages.backgrounds.regular = getColor(0, sat, 1); - this->messages.backgrounds.alternate = getColor(0, sat, 0.96); + this->messages.backgrounds.regular = getGray(1); + this->messages.backgrounds.alternate = getGray(0.96); - // this->messages.backgrounds.resub - // this->messages.backgrounds.whisper - this->messages.disabled = getColor(0, sat, 1, 0.6); - // this->messages.seperator = - // this->messages.seperatorInner = + this->messages.disabled = getGray(1, 0.6); - int complementaryGray = this->isLightTheme() ? 20 : 230; + int complementaryGray = isLight ? 20 : 230; this->messages.highlightAnimationStart = QColor(complementaryGray, complementaryGray, complementaryGray, 110); this->messages.highlightAnimationEnd = @@ -216,66 +133,52 @@ void Theme::actuallyUpdate(double hue, double multiplier) // Scrollbar this->scrollbars.background = QColor(0, 0, 0, 0); - // this->scrollbars.background = splits.background; - // this->scrollbars.background.setAlphaF(qreal(0.2)); - this->scrollbars.thumb = getColor(0, sat, 0.70); - this->scrollbars.thumbSelected = getColor(0, sat, 0.65); - - // tooltip - this->tooltip.background = QColor(0, 0, 0); - this->tooltip.text = QColor(255, 255, 255); + this->scrollbars.thumb = getGray(0.70); + this->scrollbars.thumbSelected = getGray(0.65); // Selection this->messages.selection = - isLightTheme() ? QColor(0, 0, 0, 64) : QColor(255, 255, 255, 64); + isLight ? QColor(0, 0, 0, 64) : QColor(255, 255, 255, 64); - if (this->isLightTheme()) + // Splits + if (isLight) { - this->splits.dropTargetRect = QColor(255, 255, 255, 0x00); - this->splits.dropTargetRectBorder = QColor(0, 148, 255, 0x00); - - this->splits.resizeHandle = QColor(0, 148, 255, 0xff); - this->splits.resizeHandleBackground = QColor(0, 148, 255, 0x50); + this->splits.dropTargetRect = QColor(255, 255, 255, 0); } else { - this->splits.dropTargetRect = QColor(0, 148, 255, 0x00); - this->splits.dropTargetRectBorder = QColor(0, 148, 255, 0x00); - - this->splits.resizeHandle = QColor(0, 148, 255, 0x70); - this->splits.resizeHandleBackground = QColor(0, 148, 255, 0x20); + this->splits.dropTargetRect = QColor(0, 148, 255, 0); } + this->splits.dropTargetRectBorder = QColor(0, 148, 255, 0); + this->splits.dropPreview = QColor(0, 148, 255, 48); + this->splits.dropPreviewBorder = QColor(0, 148, 255); + this->splits.resizeHandle = QColor(0, 148, 255, isLight ? 255 : 112); + this->splits.resizeHandleBackground = + QColor(0, 148, 255, isLight ? 80 : 32); - this->splits.header.background = getColor(0, sat, flat ? 1 : 0.9); - this->splits.header.border = getColor(0, sat, flat ? 1 : 0.85); + this->splits.header.background = getGray(isLight ? 1 : 0.9); + this->splits.header.border = getGray(isLight ? 1 : 0.85); this->splits.header.text = this->messages.textColors.regular; - this->splits.header.focusedBackground = - getColor(0, sat, isLight ? 0.95 : 0.79); - this->splits.header.focusedBorder = getColor(0, sat, isLight ? 0.90 : 0.78); + this->splits.header.focusedBackground = getGray(isLight ? 0.95 : 0.79); + this->splits.header.focusedBorder = getGray(isLight ? 0.90 : 0.78); this->splits.header.focusedText = QColor::fromHsvF( 0.58388, isLight ? 1.0 : 0.482, isLight ? 0.6375 : 1.0); - this->splits.input.background = getColor(0, sat, flat ? 0.95 : 0.95); - this->splits.input.border = getColor(0, sat, flat ? 1 : 1); + this->splits.input.background = getGray(0.95); this->splits.input.text = this->messages.textColors.regular; this->splits.input.styleSheet = "background:" + this->splits.input.background.name() + ";" + - "border:" + this->tabs.selected.backgrounds.regular.color().name() + - ";" + "color:" + this->messages.textColors.regular.name() + ";" + + "border:" + this->tabs.selected.backgrounds.regular.name() + ";" + + "color:" + this->messages.textColors.regular.name() + ";" + "selection-background-color:" + - (isLight ? "#68B1FF" - : this->tabs.selected.backgrounds.regular.color().name()); - - this->splits.input.focusedLine = this->tabs.highlighted.line.regular; + (isLight ? "#68B1FF" : this->tabs.selected.backgrounds.regular.name()); this->splits.messageSeperator = isLight ? QColor(127, 127, 127) : QColor(60, 60, 60); - this->splits.background = getColor(0, sat, 1); - this->splits.dropPreview = QColor(0, 148, 255, 0x30); - this->splits.dropPreviewBorder = QColor(0, 148, 255, 0xff); + this->splits.background = getGray(1); // Copy button - if (this->isLightTheme()) + if (isLight) { this->buttons.copy = getResources().buttons.copyDark; this->buttons.pin = getResources().buttons.pinDisabledDark; @@ -287,7 +190,7 @@ void Theme::actuallyUpdate(double hue, double multiplier) } } -void Theme::normalizeColor(QColor &color) +void Theme::normalizeColor(QColor &color) const { if (this->isLightTheme()) { diff --git a/src/singletons/Theme.hpp b/src/singletons/Theme.hpp index f99ba169d..fb6690ee6 100644 --- a/src/singletons/Theme.hpp +++ b/src/singletons/Theme.hpp @@ -5,8 +5,8 @@ #include "util/RapidJsonSerializeQString.hpp" #include -#include #include +#include namespace chatterino { @@ -22,9 +22,9 @@ public: struct TabColors { QColor text; struct { - QBrush regular; - QBrush hover; - QBrush unfocused; + QColor regular; + QColor hover; + QColor unfocused; } backgrounds; struct { QColor regular; @@ -39,8 +39,6 @@ public: struct { QColor background; QColor text; - QColor borderUnfocused; - QColor borderFocused; } window; /// TABS @@ -49,7 +47,6 @@ public: TabColors newMessage; TabColors highlighted; TabColors selected; - QColor border; QColor dividerLine; } tabs; @@ -66,12 +63,9 @@ public: struct { QColor regular; QColor alternate; - // QColor whisper; } backgrounds; QColor disabled; - // QColor seperator; - // QColor seperatorInner; QColor selection; QColor highlightAnimationStart; @@ -83,18 +77,8 @@ public: QColor background; QColor thumb; QColor thumbSelected; - struct { - QColor highlight; - QColor subscription; - } highlights; } scrollbars; - /// TOOLTIP - struct { - QColor text; - QColor background; - } tooltip; - /// SPLITS struct { QColor messageSeperator; @@ -113,17 +97,12 @@ public: QColor focusedBackground; QColor text; QColor focusedText; - // int margin; } header; struct { - QColor border; QColor background; - QColor selection; - QColor focusedLine; QColor text; QString styleSheet; - // int margin; } input; } splits; @@ -132,18 +111,16 @@ public: QPixmap pin; } buttons; - void normalizeColor(QColor &color); + void normalizeColor(QColor &color) const; void update(); - QColor blendColors(const QColor &color1, const QColor &color2, qreal ratio); pajlada::Signals::NoArgSignal updated; QStringSetting themeName{"/appearance/theme/name", "Dark"}; - DoubleSetting themeHue{"/appearance/theme/hue", 0.0}; private: bool isLight_ = false; - void actuallyUpdate(double hue, double multiplier); + void actuallyUpdate(double multiplier); pajlada::Signals::NoArgSignal repaintVisibleChatWidgets_; diff --git a/src/widgets/dialogs/switcher/QuickSwitcherPopup.cpp b/src/widgets/dialogs/switcher/QuickSwitcherPopup.cpp index f6e2836d7..44cd48fa8 100644 --- a/src/widgets/dialogs/switcher/QuickSwitcherPopup.cpp +++ b/src/widgets/dialogs/switcher/QuickSwitcherPopup.cpp @@ -149,7 +149,7 @@ void QuickSwitcherPopup::themeChangedEvent() const QString selCol = (this->theme->isLightTheme() ? "#68B1FF" // Copied from Theme::splits.input.styleSheet - : this->theme->tabs.selected.backgrounds.regular.color().name()); + : this->theme->tabs.selected.backgrounds.regular.name()); const QString listStyle = QString( diff --git a/src/widgets/helper/NotebookButton.cpp b/src/widgets/helper/NotebookButton.cpp index 99e655a1f..f6cc67b4d 100644 --- a/src/widgets/helper/NotebookButton.cpp +++ b/src/widgets/helper/NotebookButton.cpp @@ -51,12 +51,12 @@ void NotebookButton::paintEvent(QPaintEvent *event) if (mouseDown_ || mouseOver_) { - background = this->theme->tabs.regular.backgrounds.hover.color(); + background = this->theme->tabs.regular.backgrounds.hover; foreground = this->theme->tabs.regular.text; } else { - background = this->theme->tabs.regular.backgrounds.regular.color(); + background = this->theme->tabs.regular.backgrounds.regular; foreground = this->theme->tabs.regular.text; } diff --git a/src/widgets/listview/GenericListView.cpp b/src/widgets/listview/GenericListView.cpp index d38c7b0ea..d1ff57641 100644 --- a/src/widgets/listview/GenericListView.cpp +++ b/src/widgets/listview/GenericListView.cpp @@ -109,7 +109,7 @@ void GenericListView::refreshTheme(const Theme &theme) const QString selCol = (theme.isLightTheme() ? "#68B1FF" // Copied from Theme::splits.input.styleSheet - : theme.tabs.selected.backgrounds.regular.color().name()); + : theme.tabs.selected.backgrounds.regular.name()); const QString listStyle = QString( diff --git a/src/widgets/splits/SplitContainer.cpp b/src/widgets/splits/SplitContainer.cpp index 2fdc5d0cb..d7de47402 100644 --- a/src/widgets/splits/SplitContainer.cpp +++ b/src/widgets/splits/SplitContainer.cpp @@ -688,10 +688,9 @@ void SplitContainer::paintEvent(QPaintEvent * /*event*/) rect.top() + rect.height() / 2 + (s / 2)); } - QBrush accentColor = - (QApplication::activeWindow() == this->window() - ? this->theme->tabs.selected.backgrounds.regular - : this->theme->tabs.selected.backgrounds.unfocused); + auto accentColor = (QApplication::activeWindow() == this->window() + ? this->theme->tabs.selected.backgrounds.regular + : this->theme->tabs.selected.backgrounds.unfocused); painter.fillRect(0, 0, width(), 1, accentColor); }