noury/mirror-chatterino2
1
0
Fork 0
mirror of https://github.com/Chatterino/chatterino2.git synced 2024-11-13 19:49:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup Theme-related Code (#4450)

Browse source
This commit is contained in:
nerix 2023-03-17 20:53:03 +01:00 committed by GitHub
parent 85b982bb69
commit 93a9e41d31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 94 additions and 215 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -3,6 +3,7 @@
## Unversioned ## Unversioned
- Dev: Only log debug messages when NDEBUG is not defined. (#4442) - Dev: Only log debug messages when NDEBUG is not defined. (#4442)
- Dev: Cleaned up theme related code. (#4450)
## 2.4.2 ## 2.4.2

7
src/messages/layouts/MessageLayout.cpp
View file

@ -282,10 +282,9 @@ void MessageLayout::paint(QPainter &painter, int width, int y, int messageIndex,
} }
else else
{ {
color = color = isWindowFocused
isWindowFocused ? app->themes->tabs.selected.backgrounds.regular
? app->themes->tabs.selected.backgrounds.regular.color() : app->themes->tabs.selected.backgrounds.unfocused;
: app->themes->tabs.selected.backgrounds.unfocused.color();
} }
QBrush brush(color, static_cast<Qt::BrushStyle>( QBrush brush(color, static_cast<Qt::BrushStyle>(

251
src/singletons/Theme.cpp
View file

@ -8,8 +8,6 @@
#include <cmath> #include <cmath>
#define LOOKUP_COLOR_COUNT 360
namespace { namespace {
double getMultiplierByTheme(const QString &themeName) double getMultiplierByTheme(const QString &themeName)
{ {
@ -17,26 +15,20 @@ double getMultiplierByTheme(const QString &themeName)
{ {
return 0.8; return 0.8;
} }
else if (themeName == "White") if (themeName == "White")
{ {
return 1.0; return 1.0;
} }
else if (themeName == "Black") if (themeName == "Black")
{ {
return -1.0; return -1.0;
} }
else if (themeName == "Dark") if (themeName == "Dark")
{ {
return -0.8; return -0.8;
} }
/*
else if (themeName == "Custom")
{
return getSettings()->customThemeMultiplier.getValue();
}
*/
return -0.8; return -0.8; // default: Dark
} }
} // namespace } // namespace
@ -47,16 +39,6 @@ bool Theme::isLightTheme() const
return this->isLight_; 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() Theme::Theme()
{ {
this->update(); this->update();
@ -66,149 +48,84 @@ Theme::Theme()
this->update(); this->update();
}, },
false); false);
this->themeHue.connectSimple(
[this](auto) {
this->update();
},
false);
} }
void Theme::update() void Theme::update()
{ {
this->actuallyUpdate(this->themeHue, this->actuallyUpdate(getMultiplierByTheme(this->themeName.getValue()));
getMultiplierByTheme(this->themeName.getValue()));
this->updated.invoke(); this->updated.invoke();
} }
// hue: theme color (0 - 1)
// multiplier: 1 = white, 0.8 = light, -0.8 dark, -1 black // 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; 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 isLight = this->isLightTheme();
const auto flat = isLight;
auto getColor = [multiplier](double h, double s, double l, double a = 1.0) { auto getGray = [multiplier](double l, double a = 1.0) {
return QColor::fromHslF(h, s, ((l - 0.5) * multiplier) + 0.5, a); return QColor::fromHslF(0, 0, ((l - 0.5) * multiplier) + 0.5, a);
}; };
/// WINDOW /// WINDOW
{
#ifdef Q_OS_LINUX #ifdef Q_OS_LINUX
this->window.background = lightWin ? "#fff" : QColor(61, 60, 56); this->window.background = isLight ? "#fff" : QColor(61, 60, 56);
#else #else
this->window.background = lightWin ? "#fff" : "#111"; this->window.background = isLight ? "#fff" : "#111";
#endif #endif
this->window.text = isLight ? "#000" : "#eee";
QColor fg = this->window.text = lightWin ? "#000" : "#eee"; /// TABSs
this->window.borderFocused = lightWin ? "#ccc" : themeColor; if (isLight)
this->window.borderUnfocused = lightWin ? "#ccc" : themeColorNoSat; {
this->tabs.regular = {.text = "#444",
// Ubuntu style .backgrounds = {"#fff", "#eee", "#fff"},
// TODO: add setting for this .line = {"#fff", "#fff", "#fff"}};
// TabText = QColor(210, 210, 210); this->tabs.newMessage = {.text = "#222",
// TabBackground = QColor(61, 60, 56); .backgrounds = {"#fff", "#eee", "#fff"},
// TabHoverText = QColor(210, 210, 210); .line = {"#bbb", "#bbb", "#bbb"}};
// TabHoverBackground = QColor(73, 72, 68); this->tabs.highlighted = {.text = "#000",
.backgrounds = {"#fff", "#eee", "#fff"},
// message (referenced later) .line = {"#f00", "#f00", "#f00"}};
this->messages.textColors.caret = // this->tabs.selected = {
this->messages.textColors.regular = isLight_ ? "#000" : "#fff"; .text = "#000",
.backgrounds = {"#b4d7ff", "#b4d7ff", "#b4d7ff"},
QColor highlighted = lightWin ? QColor("#ff0000") : QColor("#ee6166"); .line = {this->accent, this->accent, this->accent}};
}
/// TABS else
if (lightWin) {
{ this->tabs.regular = {.text = "#aaa",
this->tabs.regular = { .backgrounds{"#252525", "#252525", "#252525"},
QColor("#444"), .line = {"#444", "#444", "#444"}};
{QColor("#fff"), QColor("#eee"), QColor("#fff")}, this->tabs.newMessage = {.text = "#eee",
{QColor("#fff"), QColor("#fff"), QColor("#fff")}}; .backgrounds{"#252525", "#252525", "#252525"},
this->tabs.newMessage = { .line = {"#888", "#888", "#888"}};
QColor("#222"), this->tabs.highlighted = {.text = "#eee",
{QColor("#fff"), QColor("#eee"), QColor("#fff")}, .backgrounds{"#252525", "#252525", "#252525"},
{QColor("#bbb"), QColor("#bbb"), QColor("#bbb")}}; .line = {"#ee6166", "#ee6166", "#ee6166"}};
this->tabs.highlighted = { this->tabs.selected = {
fg, .text = "#fff",
{QColor("#fff"), QColor("#eee"), QColor("#fff")}, .backgrounds{"#555", "#555", "#555"},
{highlighted, highlighted, highlighted}}; .line = {this->accent, this->accent, this->accent}};
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();
} }
this->tabs.dividerLine = this->tabs.selected.backgrounds.regular;
// Message // Message
this->messages.textColors.link = this->messages.textColors.caret = isLight ? "#000" : "#fff";
isLight_ ? QColor(66, 134, 244) : QColor(66, 134, 244); 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.system = QColor(140, 127, 127);
this->messages.textColors.chatPlaceholder = 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.regular = getGray(1);
this->messages.backgrounds.alternate = getColor(0, sat, 0.96); this->messages.backgrounds.alternate = getGray(0.96);
// this->messages.backgrounds.resub this->messages.disabled = getGray(1, 0.6);
// this->messages.backgrounds.whisper
this->messages.disabled = getColor(0, sat, 1, 0.6);
// this->messages.seperator =
// this->messages.seperatorInner =
int complementaryGray = this->isLightTheme() ? 20 : 230; int complementaryGray = isLight ? 20 : 230;
this->messages.highlightAnimationStart = this->messages.highlightAnimationStart =
QColor(complementaryGray, complementaryGray, complementaryGray, 110); QColor(complementaryGray, complementaryGray, complementaryGray, 110);
this->messages.highlightAnimationEnd = this->messages.highlightAnimationEnd =
@ -216,66 +133,52 @@ void Theme::actuallyUpdate(double hue, double multiplier)
// Scrollbar // Scrollbar
this->scrollbars.background = QColor(0, 0, 0, 0); this->scrollbars.background = QColor(0, 0, 0, 0);
// this->scrollbars.background = splits.background; this->scrollbars.thumb = getGray(0.70);
// this->scrollbars.background.setAlphaF(qreal(0.2)); this->scrollbars.thumbSelected = getGray(0.65);
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);
// Selection // Selection
this->messages.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.dropTargetRect = QColor(255, 255, 255, 0);
this->splits.dropTargetRectBorder = QColor(0, 148, 255, 0x00);
this->splits.resizeHandle = QColor(0, 148, 255, 0xff);
this->splits.resizeHandleBackground = QColor(0, 148, 255, 0x50);
} }
else else
{ {
this->splits.dropTargetRect = QColor(0, 148, 255, 0x00); this->splits.dropTargetRect = QColor(0, 148, 255, 0);
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.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.background = getGray(isLight ? 1 : 0.9);
this->splits.header.border = getColor(0, sat, flat ? 1 : 0.85); this->splits.header.border = getGray(isLight ? 1 : 0.85);
this->splits.header.text = this->messages.textColors.regular; this->splits.header.text = this->messages.textColors.regular;
this->splits.header.focusedBackground = this->splits.header.focusedBackground = getGray(isLight ? 0.95 : 0.79);
getColor(0, sat, isLight ? 0.95 : 0.79); this->splits.header.focusedBorder = getGray(isLight ? 0.90 : 0.78);
this->splits.header.focusedBorder = getColor(0, sat, isLight ? 0.90 : 0.78);
this->splits.header.focusedText = QColor::fromHsvF( this->splits.header.focusedText = QColor::fromHsvF(
0.58388, isLight ? 1.0 : 0.482, isLight ? 0.6375 : 1.0); 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.background = getGray(0.95);
this->splits.input.border = getColor(0, sat, flat ? 1 : 1);
this->splits.input.text = this->messages.textColors.regular; this->splits.input.text = this->messages.textColors.regular;
this->splits.input.styleSheet = this->splits.input.styleSheet =
"background:" + this->splits.input.background.name() + ";" + "background:" + this->splits.input.background.name() + ";" +
"border:" + this->tabs.selected.backgrounds.regular.color().name() + "border:" + this->tabs.selected.backgrounds.regular.name() + ";" +
";" + "color:" + this->messages.textColors.regular.name() + ";" + "color:" + this->messages.textColors.regular.name() + ";" +
"selection-background-color:" + "selection-background-color:" +
(isLight ? "#68B1FF" (isLight ? "#68B1FF" : this->tabs.selected.backgrounds.regular.name());
: this->tabs.selected.backgrounds.regular.color().name());
this->splits.input.focusedLine = this->tabs.highlighted.line.regular;
this->splits.messageSeperator = this->splits.messageSeperator =
isLight ? QColor(127, 127, 127) : QColor(60, 60, 60); isLight ? QColor(127, 127, 127) : QColor(60, 60, 60);
this->splits.background = getColor(0, sat, 1); this->splits.background = getGray(1);
this->splits.dropPreview = QColor(0, 148, 255, 0x30);
this->splits.dropPreviewBorder = QColor(0, 148, 255, 0xff);
// Copy button // Copy button
if (this->isLightTheme()) if (isLight)
{ {
this->buttons.copy = getResources().buttons.copyDark; this->buttons.copy = getResources().buttons.copyDark;
this->buttons.pin = getResources().buttons.pinDisabledDark; 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()) if (this->isLightTheme())
{ {

35
src/singletons/Theme.hpp
View file

@ -5,8 +5,8 @@
#include "util/RapidJsonSerializeQString.hpp" #include "util/RapidJsonSerializeQString.hpp"
#include <pajlada/settings/setting.hpp> #include <pajlada/settings/setting.hpp>
#include <QBrush>
#include <QColor> #include <QColor>
#include <QPixmap>
namespace chatterino { namespace chatterino {
@ -22,9 +22,9 @@ public:
struct TabColors { struct TabColors {
QColor text; QColor text;
struct { struct {
QBrush regular; QColor regular;
QBrush hover; QColor hover;
QBrush unfocused; QColor unfocused;
} backgrounds; } backgrounds;
struct { struct {
QColor regular; QColor regular;
@ -39,8 +39,6 @@ public:
struct { struct {
QColor background; QColor background;
QColor text; QColor text;
QColor borderUnfocused;
QColor borderFocused;
} window; } window;
/// TABS /// TABS
@ -49,7 +47,6 @@ public:
TabColors newMessage; TabColors newMessage;
TabColors highlighted; TabColors highlighted;
TabColors selected; TabColors selected;
QColor border;
QColor dividerLine; QColor dividerLine;
} tabs; } tabs;
@ -66,12 +63,9 @@ public:
struct { struct {
QColor regular; QColor regular;
QColor alternate; QColor alternate;
// QColor whisper;
} backgrounds; } backgrounds;
QColor disabled; QColor disabled;
// QColor seperator;
// QColor seperatorInner;
QColor selection; QColor selection;
QColor highlightAnimationStart; QColor highlightAnimationStart;
@ -83,18 +77,8 @@ public:
QColor background; QColor background;
QColor thumb; QColor thumb;
QColor thumbSelected; QColor thumbSelected;
struct {
QColor highlight;
QColor subscription;
} highlights;
} scrollbars; } scrollbars;
/// TOOLTIP
struct {
QColor text;
QColor background;
} tooltip;
/// SPLITS /// SPLITS
struct { struct {
QColor messageSeperator; QColor messageSeperator;
@ -113,17 +97,12 @@ public:
QColor focusedBackground; QColor focusedBackground;
QColor text; QColor text;
QColor focusedText; QColor focusedText;
// int margin;
} header; } header;
struct { struct {
QColor border;
QColor background; QColor background;
QColor selection;
QColor focusedLine;
QColor text; QColor text;
QString styleSheet; QString styleSheet;
// int margin;
} input; } input;
} splits; } splits;
@ -132,18 +111,16 @@ public:
QPixmap pin; QPixmap pin;
} buttons; } buttons;
void normalizeColor(QColor &color); void normalizeColor(QColor &color) const;
void update(); void update();
QColor blendColors(const QColor &color1, const QColor &color2, qreal ratio);
pajlada::Signals::NoArgSignal updated; pajlada::Signals::NoArgSignal updated;
QStringSetting themeName{"/appearance/theme/name", "Dark"}; QStringSetting themeName{"/appearance/theme/name", "Dark"};
DoubleSetting themeHue{"/appearance/theme/hue", 0.0};
private: private:
bool isLight_ = false; bool isLight_ = false;
void actuallyUpdate(double hue, double multiplier); void actuallyUpdate(double multiplier);
pajlada::Signals::NoArgSignal repaintVisibleChatWidgets_; pajlada::Signals::NoArgSignal repaintVisibleChatWidgets_;

2
src/widgets/dialogs/switcher/QuickSwitcherPopup.cpp
View file

@ -149,7 +149,7 @@ void QuickSwitcherPopup::themeChangedEvent()
const QString selCol = const QString selCol =
(this->theme->isLightTheme() (this->theme->isLightTheme()
? "#68B1FF" // Copied from Theme::splits.input.styleSheet ? "#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 = const QString listStyle =
QString( QString(

4
src/widgets/helper/NotebookButton.cpp
View file

@ -51,12 +51,12 @@ void NotebookButton::paintEvent(QPaintEvent *event)
if (mouseDown_ || mouseOver_) if (mouseDown_ || mouseOver_)
{ {
background = this->theme->tabs.regular.backgrounds.hover.color(); background = this->theme->tabs.regular.backgrounds.hover;
foreground = this->theme->tabs.regular.text; foreground = this->theme->tabs.regular.text;
} }
else else
{ {
background = this->theme->tabs.regular.backgrounds.regular.color(); background = this->theme->tabs.regular.backgrounds.regular;
foreground = this->theme->tabs.regular.text; foreground = this->theme->tabs.regular.text;
} }

2
src/widgets/listview/GenericListView.cpp
View file

@ -109,7 +109,7 @@ void GenericListView::refreshTheme(const Theme &theme)
const QString selCol = const QString selCol =
(theme.isLightTheme() (theme.isLightTheme()
? "#68B1FF" // Copied from Theme::splits.input.styleSheet ? "#68B1FF" // Copied from Theme::splits.input.styleSheet
: theme.tabs.selected.backgrounds.regular.color().name()); : theme.tabs.selected.backgrounds.regular.name());
const QString listStyle = const QString listStyle =
QString( QString(

7
src/widgets/splits/SplitContainer.cpp
View file

@ -688,10 +688,9 @@ void SplitContainer::paintEvent(QPaintEvent * /*event*/)
rect.top() + rect.height() / 2 + (s / 2)); rect.top() + rect.height() / 2 + (s / 2));
} }
QBrush accentColor = auto accentColor = (QApplication::activeWindow() == this->window()
(QApplication::activeWindow() == this->window() ? this->theme->tabs.selected.backgrounds.regular
? this->theme->tabs.selected.backgrounds.regular : this->theme->tabs.selected.backgrounds.unfocused);
: this->theme->tabs.selected.backgrounds.unfocused);
painter.fillRect(0, 0, width(), 1, accentColor); painter.fillRect(0, 0, width(), 1, accentColor);
} }