Add GUI to change theme color

src/misc/settings.cpp

@@ -154,6 +154,7 @@ void Settings::load()
         useNativeStyle = s.value("nativeStyle", false).toBool();
         useEmoticons = s.value("useEmoticons", true).toBool();
         statusChangeNotificationEnabled = s.value("statusChangeNotificationEnabled", false).toBool();
+        themeColor = s.value("themeColor", 0).toInt();
         style = s.value("style", "").toString();
         if (style == "") // Default to Fusion if available, otherwise no style
         {
@@ -297,6 +298,7 @@ void Settings::save(QString path)
         s.setValue("minimizeToTray", minimizeToTray);
         s.setValue("nativeStyle", useNativeStyle);
         s.setValue("useEmoticons", useEmoticons);
+        s.setValue("themeColor", themeColor);
         s.setValue("style", style);
         s.setValue("statusChangeNotificationEnabled", statusChangeNotificationEnabled);
     s.endGroup();
@@ -909,3 +911,13 @@ void Settings::setFauxOfflineMessaging(bool value)
 {
     fauxOfflineMessaging = value;
 }
+
+int Settings::getThemeColor() const
+{
+    return themeColor;
+}
+
+void Settings::setThemeColor(const int &value)
+{
+    themeColor = value;
+}

src/misc/settings.h

@@ -152,6 +152,9 @@ public:
     QString getSmileyPack() const;
     void setSmileyPack(const QString &value);
 
+    int getThemeColor() const;
+    void setThemeColor(const int& value);
+
     bool isCurstomEmojiFont() const;
     void setCurstomEmojiFont(bool value);
 
@@ -296,6 +299,7 @@ private:
 
     QHash<QString, friendProp> friendLst;
 
+    int themeColor;
 
 signals:
     //void dataChanged();

src/misc/style.cpp

@@ -17,6 +17,10 @@
 #include "style.h"
 #include "settings.h"
 
+#include "src/widget/widget.h"
+#include "ui_mainwindow.h"
+#include "src/widget/genericchatroomwidget.h"
+
 #include <QFile>
 #include <QDebug>
 #include <QMap>
@@ -42,6 +46,33 @@ QString qssifyFont(QFont font)
             .arg(font.family());
 }
 
+// colors as defined in
+// https://github.com/ItsDuke/Tox-UI/blob/master/UI%20GUIDELINES.md
+static QColor palette[] = {
+    QColor("#6bc260"),
+    QColor("#cebf44"),
+    QColor("#c84e4e"),
+    QColor("#000000"),
+    QColor("#1c1c1c"),
+    QColor("#414141"),
+    QColor("#414141").lighter(120),
+    QColor("#d1d1d1"),
+    QColor("#ffffff"),
+    QColor("#ff7700"),
+
+    // Theme colors
+    QColor("#1c1c1c"),
+    QColor("#2a2a2a"),
+    QColor("#414141"),
+    QColor("#4e4e4e"),
+};
+
+static QMap<QString, QString> dict;
+
+QStringList Style::themeColorNames = {QObject::tr("Default"), QObject::tr("Blue"), QObject::tr("Olive"), QObject::tr("Red"), QObject::tr("Violet")};
+QList<QColor> Style::themeColorColors = {QColor(), QColor("#004aa4"), QColor("#97ba00"), QColor("#c23716"), QColor("#4617b5")};
+
+
 QString Style::getStylesheet(const QString &filename)
 {
     if (!Settings::getInstance().getUseNativeStyle())
@@ -58,27 +89,6 @@ QString Style::getStylesheet(const QString &filename)
 
 QColor Style::getColor(Style::ColorPalette entry)
 {
-    // colors as defined in
-    // https://github.com/ItsDuke/Tox-UI/blob/master/UI%20GUIDELINES.md
-    static QColor palette[] = {
-        QColor("#6bc260"),
-        QColor("#cebf44"),
-        QColor("#c84e4e"),
-        QColor("#000000"),
-        QColor("#1c1c1c"),
-        QColor("#414141"),
-        QColor("#414141").lighter(120),
-        QColor("#d1d1d1"),
-        QColor("#ffffff"),
-        QColor("#ff7700"),
-
-        // Theme colors
-        QColor("#1c1c1c"),
-        QColor("#2a2a2a"),
-        QColor("#414141"),
-        QColor("#4e4e4e"),
-    };
-
     return palette[entry];
 }
 
@@ -104,32 +114,35 @@ QFont Style::getFont(Style::Font font)
 
 QString Style::resolve(QString qss)
 {
-    static QMap<QString, QString> dict = {
+    if (dict.isEmpty())
-        // colors
+    {
-        {"@green", getColor(Green).name()},
+        dict = {
-        {"@yellow", getColor(Yellow).name()},
+            // colors
-        {"@red", getColor(Red).name()},
+            {"@green", Style::getColor(Style::Green).name()},
-        {"@black", getColor(Black).name()},
+            {"@yellow", Style::getColor(Style::Yellow).name()},
-        {"@darkGrey", getColor(DarkGrey).name()},
+            {"@red", Style::getColor(Style::Red).name()},
-        {"@mediumGrey", getColor(MediumGrey).name()},
+            {"@black", Style::getColor(Style::Black).name()},
-        {"@mediumGreyLight", getColor(MediumGreyLight).name()},
+            {"@darkGrey", Style::getColor(Style::DarkGrey).name()},
-        {"@lightGrey", getColor(LightGrey).name()},
+            {"@mediumGrey", Style::getColor(Style::MediumGrey).name()},
-        {"@white", getColor(White).name()},
+            {"@mediumGreyLight", Style::getColor(Style::MediumGreyLight).name()},
-        {"@orange", getColor(Orange).name()},
+            {"@lightGrey", Style::getColor(Style::LightGrey).name()},
-        {"@themeDark", getColor(ThemeDark).name()},
+            {"@white", Style::getColor(Style::White).name()},
-        {"@themeMediumDark", getColor(ThemeMediumDark).name()},
+            {"@orange", Style::getColor(Style::Orange).name()},
-        {"@themeMedium", getColor(ThemeMedium).name()},
+            {"@themeDark", Style::getColor(Style::ThemeDark).name()},
-        {"@themeLight", getColor(ThemeLight).name()},
+            {"@themeMediumDark", Style::getColor(Style::ThemeMediumDark).name()},
+            {"@themeMedium", Style::getColor(Style::ThemeMedium).name()},
+            {"@themeLight", Style::getColor(Style::ThemeLight).name()},
 
-        // fonts
+            // fonts
-        {"@extraBig", qssifyFont(getFont(ExtraBig))},
+            {"@extraBig", qssifyFont(Style::getFont(Style::ExtraBig))},
-        {"@big", qssifyFont(getFont(Big))},
+            {"@big", qssifyFont(Style::getFont(Style::Big))},
-        {"@bigBold", qssifyFont(getFont(BigBold))},
+            {"@bigBold", qssifyFont(Style::getFont(Style::BigBold))},
-        {"@medium", qssifyFont(getFont(Medium))},
+            {"@medium", qssifyFont(Style::getFont(Style::Medium))},
-        {"@mediumBold", qssifyFont(getFont(MediumBold))},
+            {"@mediumBold", qssifyFont(Style::getFont(Style::MediumBold))},
-        {"@small", qssifyFont(getFont(Small))},
+            {"@small", qssifyFont(Style::getFont(Style::Small))},
-        {"@smallLight", qssifyFont(getFont(SmallLight))},
+            {"@smallLight", qssifyFont(Style::getFont(Style::SmallLight))},
-    };
+        };
+    }
 
     for (const QString& key : dict.keys())
     {
@@ -154,3 +167,42 @@ void Style::repolish(QWidget *w)
         }
     }
 }
+
+void Style::setThemeColor(int color)
+{
+    if (color < 0 || color >= themeColorColors.size())
+        setThemeColor(QColor());
+    else
+        setThemeColor(themeColorColors[color]);
+}
+
+void Style::setThemeColor(QColor color)
+{
+    if (!color.isValid())
+    {
+        // Reset to default
+        palette[ThemeDark] = QColor("#1c1c1c");
+        palette[ThemeMediumDark] = QColor("#2a2a2a");
+        palette[ThemeMedium] = QColor("#414141");
+        palette[ThemeLight] = QColor("#4e4e4e");
+    }
+    else
+    {
+        palette[ThemeDark] = color.darker(155);
+        palette[ThemeMediumDark] = color.darker(135);
+        palette[ThemeMedium] = color.darker(120);
+        palette[ThemeLight] = color.lighter(110);
+    }
+
+    dict["@themeDark"] = getColor(ThemeDark).name();
+    dict["@themeMediumDark"] = getColor(ThemeMediumDark).name();
+    dict["@themeMedium"] = getColor(ThemeMedium).name();
+    dict["@themeLight"] = getColor(ThemeLight).name();
+
+    applyTheme();
+}
+
+void Style::applyTheme()
+{
+    Widget::getInstance()->reloadTheme();
+}

src/misc/style.h

@@ -60,6 +60,15 @@ public:
     static QFont getFont(Font font);
     static QString resolve(QString qss);
     static void repolish(QWidget* w);
+    static void setThemeColor(int color);
+    static void setThemeColor(QColor color); ///< Pass an invalid QColor to reset to defaults
+    static void applyTheme(); ///< Reloads some CCS
+
+    static QStringList themeColorNames;
+    static QList<QColor> themeColorColors;
+
+signals:
+    void themeChanged();
 
 private:
     Style();

src/widget/form/settings/generalform.cpp

@@ -21,6 +21,7 @@
 #include "src/misc/settings.h"
 #include "src/misc/smileypack.h"
 #include "src/core.h"
+#include "src/misc/style.h"
 #include <QMessageBox>
 #include <QStyleFactory>
 #include <QTime>
@@ -77,6 +78,10 @@ GeneralForm::GeneralForm(SettingsWidget *myParent) :
     else
         bodyUI->styleBrowser->setCurrentText(tr("None"));
     
+    for (QString color : Style::themeColorNames)
+        bodyUI->themeColorCBox->addItem(color);
+    bodyUI->themeColorCBox->setCurrentIndex(Settings::getInstance().getThemeColor());
+
     bodyUI->emoticonSize->setValue(Settings::getInstance().getEmojiFontPointSize());
     
     QStringList timestamps;
@@ -119,6 +124,7 @@ GeneralForm::GeneralForm(SettingsWidget *myParent) :
     connect(bodyUI->useEmoticons, &QCheckBox::stateChanged, this, &GeneralForm::onUseEmoticonsChange);
     connect(bodyUI->smileyPackBrowser, SIGNAL(currentIndexChanged(int)), this, SLOT(onSmileyBrowserIndexChanged(int)));
     connect(bodyUI->styleBrowser, SIGNAL(currentTextChanged(QString)), this, SLOT(onStyleSelected(QString)));
+    connect(bodyUI->themeColorCBox, SIGNAL(currentIndexChanged(int)), this, SLOT(onThemeColorChanged(int)));
     connect(bodyUI->emoticonSize, SIGNAL(editingFinished()), this, SLOT(onEmoticonSizeChanged()));    
     connect(bodyUI->timestamp, SIGNAL(currentIndexChanged(int)), this, SLOT(onTimestampSelected(int)));
     //connection
@@ -314,3 +320,10 @@ void GeneralForm::onFauxOfflineMessaging()
 {
     Settings::getInstance().setFauxOfflineMessaging(bodyUI->cbFauxOfflineMessaging->isChecked());
 }
+
+void GeneralForm::onThemeColorChanged(int)
+{
+    int index = bodyUI->themeColorCBox->currentIndex();
+    Settings::getInstance().setThemeColor(index);
+    Style::setThemeColor(index);
+}

src/widget/form/settings/generalform.h

@@ -55,6 +55,7 @@ private slots:
     void onCheckUpdateChanged();
     void onSetShowInFront();
     void onFauxOfflineMessaging();
+    void onThemeColorChanged(int);
 
 private:
     Ui::GeneralSettings *bodyUI;

src/widget/form/settings/generalsettings.ui

@@ -39,8 +39,8 @@
        <rect>
         <x>0</x>
         <y>0</y>
-        <width>583</width>
+        <width>524</width>
-        <height>748</height>
+        <height>726</height>
        </rect>
       </property>
       <layout class="QVBoxLayout" name="verticalLayout_4" stretch="0,0,1">
@@ -197,6 +197,9 @@
               <property name="toolTip">
                <string>Set to 0 to disable</string>
               </property>
+              <property name="showGroupSeparator" stdset="0">
+               <bool>true</bool>
+              </property>
               <property name="suffix">
                <string> minutes</string>
               </property>
@@ -206,9 +209,6 @@
               <property name="maximum">
                <number>2147483647</number>
               </property>
-              <property name="showGroupSeparator" stdset="0">
-               <bool>true</bool>
-              </property>
              </widget>
             </item>
            </layout>
@@ -251,8 +251,14 @@
          </layout>
         </widget>
        </item>
-       <item alignment="Qt::AlignTop">
+       <item>
         <widget class="QGroupBox" name="themeGroup">
+         <property name="minimumSize">
+          <size>
+           <width>0</width>
+           <height>232</height>
+          </size>
+         </property>
          <property name="title">
           <string>Theme</string>
          </property>
@@ -363,6 +369,27 @@
             </item>
            </layout>
           </item>
+          <item>
+           <layout class="QHBoxLayout" name="themeColorLayour">
+            <item>
+             <widget class="QLabel" name="themeColorLabel">
+              <property name="text">
+               <string>Theme color</string>
+              </property>
+             </widget>
+            </item>
+            <item>
+             <widget class="QComboBox" name="themeColorCBox">
+              <property name="sizePolicy">
+               <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
+                <horstretch>0</horstretch>
+                <verstretch>0</verstretch>
+               </sizepolicy>
+              </property>
+             </widget>
+            </item>
+           </layout>
+          </item>
           <item>
            <layout class="QHBoxLayout" name="emoiticonHLayout">
             <item>

src/widget/genericchatroomwidget.cpp

@@ -97,3 +97,8 @@ void GenericChatroomWidget::mouseReleaseEvent(QMouseEvent*)
 {
     emit chatroomWidgetClicked(this);
 }
+
+void GenericChatroomWidget::reloadTheme()
+{
+    setStyleSheet(Style::getStylesheet(":/ui/chatroomWidgets/genericChatroomWidget.css"));
+}

src/widget/genericchatroomwidget.h

@@ -51,6 +51,8 @@ public:
     QString getName() const;
     QString getStatusMsg() const;
 
+    void reloadTheme();
+
 signals:
     void chatroomWidgetClicked(GenericChatroomWidget* widget);
 
@@ -63,6 +65,8 @@ protected:
     MaskablePixmapWidget* avatar;
     QLabel statusPic;
     CroppingLabel *nameLabel, *statusMessageLabel;
+
+    friend class Style; ///< To update our stylesheets
 };
 
 #endif // GENERICCHATROOMWIDGET_H

src/widget/widget.cpp

@@ -173,6 +173,9 @@ void Widget::init()
     // Disable some widgets until we're connected to the DHT
     ui->statusButton->setEnabled(false);
 
+    Style::setThemeColor(Settings::getInstance().getThemeColor());
+    Style::applyTheme();
+
     idleTimer = new QTimer();
     idleTimer->setSingleShot(true);
     int mins = Settings::getInstance().getAutoAwayTime();
@@ -1186,3 +1189,17 @@ void Widget::clearAllReceipts()
         f->getChatForm()->clearReciepts();
     }
 }
+
+void Widget::reloadTheme()
+{
+    ui->tooliconsZone->setStyleSheet(Style::resolve("QPushButton{background-color:@themeDark;border:none;}QPushButton:hover{background-color:@themeMediumDark;border:none;}"));
+    ui->statusPanel->setStyleSheet(Style::getStylesheet(":/ui/window/statusPanel.css"));
+    ui->friendList->setStyleSheet(Style::getStylesheet(":ui/friendList/friendList.css"));
+    ui->statusButton->setStyleSheet(Style::getStylesheet(":ui/statusButton/statusButton.css"));
+
+    for (Friend* f : FriendList::getAllFriends())
+        f->getFriendWidget()->reloadTheme();
+
+    for (Group* g : GroupList::groupList)
+        g->widget->reloadTheme();
+}

src/widget/widget.h

@@ -75,6 +75,8 @@ public:
     
     void clearAllReceipts();
 
+    void reloadTheme();
+
 public slots:
     void onSettingsClicked();
 

ui/statusButton/statusButton.css

@@ -1,7 +1,7 @@
 QPushButton
 {
     background: none;
-    background-color: rgb(65,65,65);
+    background-color: @themeMediumDark;
     border: none;
     border-radius: 6px;
     width: 20px;
@@ -30,18 +30,18 @@ QPushButton#offline
 
 QPushButton:default 
 {
-   background-color: rgb(65,65,65);
+   background-color: @themeMediumDark;
 }
 
 /*Bugged in Qt, but it's probably better to leave enabled so that users can tell it's clickable*/
 QPushButton:hover 
 {
-   background-color: rgb(75,75,75);
+   background-color: @themeMedium;
 }
 
 QPushButton:pressed
 {
-   background-color: rgb(55,55,55);
+   background-color: @themeMediumDark;
 }
 
 QPushButton:focus {

ui/window/statusPanel.css

@@ -1,7 +1,7 @@
 QLineEdit
 {
     background: none;
-    background-color: @mediumGrey;
+    background-color: @themeMedium;
     color: white;
     border: 0px;
     border-radius: 6px;
@@ -25,7 +25,7 @@ QLineEdit
 #statusPanel > #statusHead > #statusButton
 {
     background: none;
-    background-color: @mediumGrey;
+    background-color: @themeMedium;
     border: none;
     border-radius: 6px;
     width: 20px;
@@ -55,12 +55,12 @@ QLineEdit
 /*Bugged in Qt, but it's probably better to leave enabled so that users can tell it's clickable*/
 #statusPanel > #statusHead > #statusButton:hover 
 {
-  background-color: @mediumGreyLight;
+  background-color: @themeLight;
 }
 
 #statusPanel > #statusHead > #statusButton:pressed 
 {
-  background-color: @mediumGrey;
+  background-color: @themeMedium;
 }
 
 #statusPanel > #statusHead > #statusButton:focus {