Add GUI light/dark theme toggle button

This adds a button next to the logo in the sidebar that switches the
active GUI theme between light and dark mode.

src/Makefile.qt.include

@@ -306,6 +306,8 @@ RES_ICONS = \
   qt/res/icons/connect2.svg \
   qt/res/icons/connect3.svg \
   qt/res/icons/connect4.svg \
+  qt/res/icons/dark_mode.svg \
+  qt/res/icons/dark_mode_active.svg \
   qt/res/icons/debugwindow.png \
   qt/res/icons/edit.png \
   qt/res/icons/editcopy.png \
@@ -316,6 +318,8 @@ RES_ICONS = \
   qt/res/icons/gridcoin.ico \
   qt/res/icons/gridcoin_testnet.ico \
   qt/res/icons/key.png \
+  qt/res/icons/light_mode.svg \
+  qt/res/icons/light_mode_active.svg \
   qt/res/icons/menu.svg \
   qt/res/icons/menu_active.svg \
   qt/res/icons/message.svg \

src/qt/bitcoin.qrc

@@ -171,6 +171,11 @@
         <file alias="message">res/icons/message.svg</file>
         <file alias="menu">res/icons/menu.svg</file>
         <file alias="menu_active">res/icons/menu_active.svg</file>
+        <file alias="dark_mode">res/icons/dark_mode.svg</file>
+        <file alias="dark_mode_active">res/icons/dark_mode_active.svg</file>
+        <file alias="light_mode">res/icons/light_mode.svg</file>
+        <file alias="light_mode_active">res/icons/light_mode_active.svg</file>
+
     </qresource>
     <qresource prefix="/images">
         <file alias="splash">res/images/splash3.png</file>

src/qt/bitcoingui.cpp

@@ -588,22 +588,47 @@ void BitcoinGUI::createToolBars()
 {
     ClickLabel *logoLabel = new ClickLabel();
     logoLabel->setObjectName("toolbarLogoLabel");
+    QSizePolicy logoLabelSizePolicy = logoLabel->sizePolicy();
+    logoLabelSizePolicy.setHorizontalStretch(2);
+    logoLabel->setSizePolicy(logoLabelSizePolicy);
     connect(logoLabel, SIGNAL(clicked()), this, SLOT(websiteClicked()));
 
+    QHBoxLayout *logoWrapperLayout = new QHBoxLayout();
+    logoWrapperLayout->setContentsMargins(2, 0, 2, 0);
+    logoWrapperLayout->setSpacing(0);
+
     QWidget *logoWrapper = new QWidget();
     logoWrapper->setObjectName("toolbarLogoWrapper");
-    logoWrapper->setLayout(new QVBoxLayout());
-    logoWrapper->layout()->addWidget(logoLabel);
+    logoWrapper->setLayout(logoWrapperLayout);
 
 #ifndef Q_OS_MAC
     // Windows and Linux: collapse the main application's menu bar into a menu
     // button. On macOS, we'll continue to use the system's separate menu bar.
-    QPushButton *menuButton = new QPushButton(logoWrapper);
+    QPushButton *menuButton = new QPushButton();
     menuButton->setObjectName("toolbarMenuButton");
-    menuButton->resize(GRC::ScaleSize(this, 24));
+    menuButton->setToolTip(tr("Open menu."));
     menuButton->setMenu(appMenuBar);
+    QSizePolicy menuButtonSizePolicy = menuButton->sizePolicy();
+    menuButtonSizePolicy.setHorizontalStretch(1);
+    menuButton->setSizePolicy(menuButtonSizePolicy);
+    logoWrapperLayout->addWidget(menuButton);
+    logoWrapperLayout->setAlignment(menuButton, Qt::AlignHCenter | Qt::AlignVCenter);
+#else
+    logoWrapperLayout->addStretch(1);
 #endif
 
+    logoWrapperLayout->addWidget(logoLabel);
+
+    QPushButton *themeToggleButton = new QPushButton();
+    themeToggleButton->setObjectName("themeToggleButton");
+    themeToggleButton->setToolTip(tr("Toggle light/dark mode."));
+    QSizePolicy themeToggleButtonSizePolicy = themeToggleButton->sizePolicy();
+    themeToggleButtonSizePolicy.setHorizontalStretch(1);
+    themeToggleButton->setSizePolicy(themeToggleButtonSizePolicy);
+    connect(themeToggleButton, SIGNAL(clicked()), this, SLOT(themeToggled()));
+    logoWrapperLayout->addWidget(themeToggleButton);
+    logoWrapperLayout->setAlignment(themeToggleButton, Qt::AlignHCenter | Qt::AlignVCenter);
+
     QWidget *boincLabelSpacer = new QWidget();
     boincLabelSpacer->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
 
@@ -863,6 +888,11 @@ void BitcoinGUI::optionsClicked()
     dlg.exec();
 }
 
+void BitcoinGUI::themeToggled()
+{
+    clientModel->getOptionsModel()->setCurrentStyle(sSheet == "light" ? "dark" : "light");
+}
+
 void BitcoinGUI::openConfigClicked()
 {
     boost::filesystem::path pathConfig = GetConfigFile();

src/qt/bitcoingui.h

@@ -217,6 +217,8 @@ private slots:
 
     /** Show configuration dialog */
     void optionsClicked();
+    /** Switch the active light/dark theme */
+    void themeToggled();
     /** Show researcher/beacon configuration dialog */
     void researcherClicked();
     /** Show about dialog */

src/qt/optionsmodel.cpp

@@ -354,6 +354,11 @@ QString OptionsModel::getCurrentStyle()
     return walletStylesheet;
 }
 
+void OptionsModel::setCurrentStyle(QString theme)
+{
+    setData(QAbstractItemModel::createIndex(WalletStylesheet, 0), theme, Qt::EditRole);
+}
+
 QString OptionsModel::getDataDir()
 {
     return dataDir;

src/qt/optionsmodel.h

@@ -65,6 +65,9 @@ class OptionsModel : public QAbstractListModel
     QString getCurrentStyle();
     QString getDataDir();
 
+    /* Explicit setters */
+    void setCurrentStyle(QString theme);
+
 private:
     int nDisplayUnit;
     bool fMinimizeToTray;

src/qt/res/stylesheets/dark_stylesheet.qss

@@ -466,25 +466,47 @@ QToolBar#toolbar::separator {
     border-bottom: 0.065em solid rgb(18, 26, 34);
 }
 
-#toolbarMenuButton {
-    image: url(:/icons/menu);
+#toolbarMenuButton,
+#themeToggleButton {
     background: none;
     border: none;
-    border-radius: 0;
-    padding: 0;
+    min-width: 1.1em;
+    max-width: 1.1em;
+    min-height: 1.1em;
+    max-height: 1.1em;
+    padding: 0.1em;
+}
+
+#toolbarMenuButton:hover,
+#toolbarMenuButton:pressed,
+#themeToggleButton:hover,
+#themeToggleButton::pressed {
+    background-color: rgb(26, 145, 235);
+}
+
+#toolbarMenuButton {
+    image: url(:/icons/menu);
 }
 
 #toolbarMenuButton:hover,
 #toolbarMenuButton:pressed {
     image: url(:/icons/menu_active);
-    background-color: rgb(26, 145, 235);
 }
 
 #toolbarMenuButton::menu-indicator {
     width: 0;
     height: 0;
 }
 
+#themeToggleButton {
+    image: url(:/icons/light_mode);
+}
+
+#themeToggleButton:hover,
+#themeToggleButton:pressed {
+    image: url(:/icons/light_mode_active);
+}
+
 #toolbarLogoLabel {
     image: url(:/images/gridcoin);
     min-width: 2.75em;

src/qt/res/stylesheets/light_stylesheet.qss

@@ -477,25 +477,47 @@ QToolBar#toolbar::separator {
     border-bottom: 0.065em solid rgb(74, 26, 117);
 }
 
-#toolbarMenuButton {
-    image: url(:/icons/menu);
+#toolbarMenuButton,
+#themeToggleButton {
     background: none;
     border: none;
-    border-radius: 0;
-    padding: 0;
+    min-width: 1.1em;
+    max-width: 1.1em;
+    min-height: 1.1em;
+    max-height: 1.1em;
+    padding: 0.1em;
+}
+
+#toolbarMenuButton:hover,
+#toolbarMenuButton:pressed,
+#themeToggleButton:hover,
+#themeToggleButton:pressed {
+    background: rgb(109, 25, 186);
+}
+
+#toolbarMenuButton {
+    image: url(:/icons/menu);
 }
 
 #toolbarMenuButton:hover,
 #toolbarMenuButton:pressed {
     image: url(:/icons/menu_active);
-    background: rgb(109, 25, 186);
 }
 
 #toolbarMenuButton::menu-indicator {
     width: 0;
     height: 0;
 }
 
+#themeToggleButton {
+    image: url(:/icons/dark_mode);
+}
+
+#themeToggleButton:hover,
+#themeToggleButton:pressed {
+    image: url(:/icons/dark_mode_active);
+}
+
 #toolbarLogoLabel {
     image: url(:/images/gridcoin);
     min-width: 2.75em;