Add light and dark themes

2026-05-07 09:27:18 +02:00 · 2020-12-06 00:36:31 +01:00
parent 1f3ed0f364
commit 3fdbb0ed19
26 changed files with 446 additions and 25 deletions
--- a/app/SysTray-X/SysTray-X.qrc
+++ b/app/SysTray-X/SysTray-X.qrc
@@ -28,5 +28,6 @@
        <file>languages/SysTray-X.pt-BR.ts</file>
        <file>languages/SysTray-X.zh-CN.qm</file>
        <file>languages/SysTray-X.zh-TW.qm</file>
+        <file>files/icons/blank-icon-dark.png</file>
    </qresource>
 </RCC>
--- a/app/SysTray-X/files/icons/blank-icon-dark.png
+++ b/app/SysTray-X/files/icons/blank-icon-dark.png
--- a/app/SysTray-X/preferences.cpp
+++ b/app/SysTray-X/preferences.cpp
@@ -62,6 +62,8 @@ Preferences::Preferences( QObject *parent ) : QObject( parent )
    m_version_build = QLatin1String( APP_BUILD );
    m_version_hash = QLatin1String( APP_GITHASH );
    m_version_branch = QLatin1String( APP_GITBRANCH );
+
+    m_theme = PREF_THEME_LIGHT;
 }


@@ -499,6 +501,32 @@ void    Preferences::setCloseType( CloseType close_type )
 }


+/*
+ *  Get the theme pref.
+ */
+Preferences::Theme    Preferences::getTheme() const
+{
+    return m_theme;
+}
+
+
+/*
+ *  Set the theme pref.
+ */
+void    Preferences::setTheme( Theme theme )
+{
+    if( m_theme != theme )
+    {
+        m_theme = theme;
+
+        /*
+         *  Tell the world the new preference
+         */
+        emit signalThemeChange();
+    }
+}
+
+
 /*
 *  Get the debug state.
 */
--- a/app/SysTray-X/preferences.h
+++ b/app/SysTray-X/preferences.h
@@ -63,6 +63,11 @@ class Preferences : public QObject
            PREF_COUNT_NEW
        };

+        enum Theme {
+            PREF_THEME_LIGHT = 0,
+            PREF_THEME_DARK
+        };
+
        /*
         *  Window states
         */
@@ -349,6 +354,20 @@ class Preferences : public QObject
         */
        void setCloseType( CloseType close_type );

+        /**
+         * @brief getTheme. Get the theme state.
+         *
+         * @return      The state.
+         */
+        Theme getTheme() const;
+
+        /**
+         * @brief setTheme. Set the theme state.
+         *
+         * @param      The state.
+         */
+        void setTheme( Theme theme );
+
        /**
         * @brief getDebug. Get the debug windows state.
         *
@@ -465,6 +484,11 @@ class Preferences : public QObject
         */
        void signalDebugChange();

+        /**
+         * @brief signalThemeChange. Signal a theme state change.
+         */
+        void signalThemeChange();
+
    private:

        /**
@@ -592,6 +616,10 @@ class Preferences : public QObject
         */
        QString m_version_branch;

+        /**
+         * @brief m_theme. The theme.
+         */
+        Theme m_theme;
 };

 #endif // PREFERENCES_H
--- a/app/SysTray-X/preferences.ui
+++ b/app/SysTray-X/preferences.ui
@@ -7,7 +7,7 @@
    <x>0</x>
    <y>0</y>
    <width>541</width>
-    <height>664</height>
+    <height>648</height>
   </rect>
  </property>
  <property name="windowTitle">
@@ -19,15 +19,15 @@
  </property>
  <layout class="QGridLayout" name="gridLayout">
   <item row="0" column="0">
-    <layout class="QVBoxLayout" name="verticalLayout_15">
+    <layout class="QVBoxLayout" name="verticalLayout_19">
     <item>
-      <widget class="QGroupBox" name="groupBox_2">
+      <widget class="QGroupBox" name="defaultIconGroupBox">
       <property name="title">
        <string>Default icon</string>
       </property>
       <layout class="QVBoxLayout" name="verticalLayout_13">
        <item>
-         <widget class="QGroupBox" name="groupBox_5">
+         <widget class="QGroupBox" name="iconGroupBox">
          <property name="title">
           <string>Icon</string>
          </property>
@@ -112,19 +112,6 @@
        <string>Mail notification icon</string>
       </property>
       <layout class="QVBoxLayout" name="verticalLayout_2">
-        <item>
-         <spacer name="verticalSpacer_3">
-          <property name="orientation">
-           <enum>Qt::Vertical</enum>
-          </property>
-          <property name="sizeHint" stdset="0">
-           <size>
-            <width>20</width>
-            <height>40</height>
-           </size>
-          </property>
-         </spacer>
-        </item>
        <item>
         <layout class="QVBoxLayout" name="verticalLayout">
          <item>
@@ -256,6 +243,45 @@
       </layout>
      </widget>
     </item>
+     <item>
+      <widget class="QGroupBox" name="themeGroupBox">
+       <property name="title">
+        <string>Theme</string>
+       </property>
+       <layout class="QVBoxLayout" name="verticalLayout_18">
+        <item>
+         <layout class="QVBoxLayout" name="verticalLayout_15">
+          <item>
+           <widget class="QRadioButton" name="lightRadioButton">
+            <property name="text">
+             <string>Light</string>
+            </property>
+            <property name="checked">
+             <bool>true</bool>
+            </property>
+            <attribute name="buttonGroup">
+             <string notr="true">themeGroup</string>
+            </attribute>
+           </widget>
+          </item>
+          <item>
+           <widget class="QRadioButton" name="darkRadioButton">
+            <property name="text">
+             <string>Dark</string>
+            </property>
+            <property name="checked">
+             <bool>false</bool>
+            </property>
+            <attribute name="buttonGroup">
+             <string notr="true">themeGroup</string>
+            </attribute>
+           </widget>
+          </item>
+         </layout>
+        </item>
+       </layout>
+      </widget>
+     </item>
     <item>
      <spacer name="verticalSpacer">
       <property name="orientation">
@@ -264,7 +290,7 @@
       <property name="sizeHint" stdset="0">
        <size>
         <width>20</width>
-         <height>113</height>
+         <height>78</height>
        </size>
       </property>
      </spacer>
@@ -559,10 +585,11 @@
 </resources>
 <connections/>
 <buttongroups>
-  <buttongroup name="defaultIconTypeGroup"/>
+  <buttongroup name="minimizeTypeGroup"/>
  <buttongroup name="closeTypeGroup"/>
  <buttongroup name="countTypeGroup"/>
-  <buttongroup name="minimizeTypeGroup"/>
+  <buttongroup name="themeGroup"/>
+  <buttongroup name="defaultIconTypeGroup"/>
  <buttongroup name="iconTypeGroup"/>
 </buttongroups>
 </ui>
--- a/app/SysTray-X/preferencesdialog.cpp
+++ b/app/SysTray-X/preferencesdialog.cpp
@@ -131,6 +131,12 @@ PreferencesDialog::PreferencesDialog( SysTrayXLink *link, Preferences *pref, QWi
     *  Set number size
     */
    setNumberSize( m_pref->getNumberSize() );
+
+    /*
+     *  Set theme button Ids
+     */
+    m_ui->themeGroup->setId( m_ui->lightRadioButton, Preferences::PREF_THEME_LIGHT);
+    m_ui->themeGroup->setId( m_ui->darkRadioButton, Preferences::PREF_THEME_DARK );
 }


@@ -324,6 +330,15 @@ void    PreferencesDialog::setCountType( Preferences::CountType count_type )
 }


+/*
+ *  Set the theme
+ */
+void    PreferencesDialog::setTheme( Preferences::Theme theme )
+{
+   ( m_ui->themeGroup->button( theme ) )->setChecked( true );
+}
+
+
 /*
 *  Handle the accept signal
 */
@@ -351,10 +366,26 @@ void    PreferencesDialog::slotAccept()
    m_pref->setCloseType( static_cast< Preferences::CloseType >( m_ui->closeTypeGroup->checkedId() ) );

    m_pref->setShowNumber( m_ui->showNumberCheckBox->isChecked() );
-    m_pref->setNumberColor( m_number_color );
    m_pref->setNumberSize( m_ui->numberSizeSpinBox->value() );
    m_pref->setCountType( static_cast< Preferences::CountType >( m_ui->countTypeGroup->checkedId() ) );

+    Preferences::Theme theme = static_cast< Preferences::Theme >( m_ui->themeGroup->checkedId() );
+    m_pref->setTheme( theme );
+
+    /*
+     *  Force different color?
+     */
+    if( theme == Preferences::PREF_THEME_LIGHT && m_number_color == "#ffffff" )
+    {
+        setNumberColor( "#000000" );
+    }
+    else
+    if( theme == Preferences::PREF_THEME_DARK && m_number_color == "#000000" )
+    {
+        setNumberColor( "#ffffff" );
+    }
+    m_pref->setNumberColor( m_number_color );
+
    m_pref->setDebug( m_ui->debugWindowCheckBox->isChecked() );

    /*
@@ -400,6 +431,8 @@ void    PreferencesDialog::slotReject()
    setNumberSize( m_pref->getNumberSize());
    setCountType( m_pref->getCountType() );

+    setTheme( m_pref->getTheme() );
+
    setDebug( m_pref->getDebug());
 }

@@ -595,3 +628,12 @@ void    PreferencesDialog::slotCountTypeChange()
 {
    setCountType( m_pref->getCountType() );
 }
+
+
+/*
+ *  Handle the theme change signal
+ */
+void    PreferencesDialog::slotThemeChange()
+{
+    setTheme( m_pref->getTheme() );
+}
--- a/app/SysTray-X/preferencesdialog.h
+++ b/app/SysTray-X/preferencesdialog.h
@@ -151,6 +151,13 @@ class PreferencesDialog : public QDialog
         */
        void    setCountType( Preferences::CountType count_type );

+        /**
+         * @brief setTheme. Set the theme.
+         *
+         * @param theme     The theme.
+         */
+        void    setTheme( Preferences::Theme theme );
+
    signals:

        /**
@@ -232,6 +239,11 @@ class PreferencesDialog : public QDialog
         */
        void    slotCountTypeChange();

+        /**
+         * @brief slotThemeChange. Slot for handling theme change.
+         */
+        void    slotThemeChange();
+
    private slots:

        /**
--- a/app/SysTray-X/systrayx.cpp
+++ b/app/SysTray-X/systrayx.cpp
@@ -122,6 +122,7 @@ SysTrayX::SysTrayX( QObject *parent ) : QObject( parent )
    connect( m_preferences, &Preferences::signalMinimizeTypeChange, m_pref_dialog, &PreferencesDialog::slotMinimizeTypeChange );
    connect( m_preferences, &Preferences::signalStartMinimizedChange, m_pref_dialog, &PreferencesDialog::slotStartMinimizedChange );
    connect( m_preferences, &Preferences::signalCloseTypeChange, m_pref_dialog, &PreferencesDialog::slotCloseTypeChange );
+    connect( m_preferences, &Preferences::signalThemeChange, m_pref_dialog, &PreferencesDialog::slotThemeChange );
    connect( m_preferences, &Preferences::signalDebugChange, m_pref_dialog, &PreferencesDialog::slotDebugChange );

    connect( m_preferences, &Preferences::signalDefaultIconTypeChange, m_link, &SysTrayXLink::slotDefaultIconTypeChange );
@@ -136,6 +137,7 @@ SysTrayX::SysTrayX( QObject *parent ) : QObject( parent )
    connect( m_preferences, &Preferences::signalMinimizeTypeChange, m_link, &SysTrayXLink::slotMinimizeTypeChange );
    connect( m_preferences, &Preferences::signalStartMinimizedChange, m_link, &SysTrayXLink::slotStartMinimizedChange );
    connect( m_preferences, &Preferences::signalCloseTypeChange, m_link, &SysTrayXLink::slotCloseTypeChange );
+    connect( m_preferences, &Preferences::signalThemeChange, m_link, &SysTrayXLink::slotThemeChange );
    connect( m_preferences, &Preferences::signalDebugChange, m_link, &SysTrayXLink::slotDebugChange );
    connect( m_preferences, &Preferences::signalHideDefaultIconChange, this,  &SysTrayX::slotSelectIconObjectPref );

@@ -278,6 +280,7 @@ void    SysTrayX::showTrayIcon()
        connect( m_preferences, &Preferences::signalShowNumberChange, m_tray_icon, &SysTrayXIcon::slotShowNumberChange );
        connect( m_preferences, &Preferences::signalNumberColorChange, m_tray_icon, &SysTrayXIcon::slotNumberColorChange );
        connect( m_preferences, &Preferences::signalNumberSizeChange, m_tray_icon, &SysTrayXIcon::slotNumberSizeChange );
+        connect( m_preferences, &Preferences::signalThemeChange, m_tray_icon, &SysTrayXIcon::slotThemeChange );

        connect( m_link, &SysTrayXLink::signalUnreadMail, m_tray_icon, &SysTrayXIcon::slotSetUnreadMail );

@@ -312,6 +315,7 @@ void    SysTrayX::hideTrayIcon()
        disconnect( m_preferences, &Preferences::signalShowNumberChange, m_tray_icon, &SysTrayXIcon::slotShowNumberChange );
        disconnect( m_preferences, &Preferences::signalNumberColorChange, m_tray_icon, &SysTrayXIcon::slotNumberColorChange );
        disconnect( m_preferences, &Preferences::signalNumberSizeChange, m_tray_icon, &SysTrayXIcon::slotNumberSizeChange );
+        disconnect( m_preferences, &Preferences::signalThemeChange, m_tray_icon, &SysTrayXIcon::slotThemeChange );

        disconnect( m_link, &SysTrayXLink::signalUnreadMail, m_tray_icon, &SysTrayXIcon::slotSetUnreadMail );

@@ -384,6 +388,7 @@ void    SysTrayX::showKdeTrayIcon()
        connect( m_preferences, &Preferences::signalShowNumberChange, m_kde_tray_icon, &SysTrayXStatusNotifier::slotShowNumberChange );
        connect( m_preferences, &Preferences::signalNumberColorChange, m_kde_tray_icon, &SysTrayXStatusNotifier::slotNumberColorChange );
        connect( m_preferences, &Preferences::signalNumberSizeChange, m_kde_tray_icon, &SysTrayXStatusNotifier::slotNumberSizeChange );
+        connect( m_preferences, &Preferences::signalThemeChange, m_kde_tray_icon, &SysTrayXStatusNotifier::slotThemeChange );

        connect( m_link, &SysTrayXLink::signalUnreadMail, m_kde_tray_icon, &SysTrayXStatusNotifier::slotSetUnreadMail );

@@ -417,6 +422,7 @@ void    SysTrayX::hideKdeTrayIcon()
        disconnect( m_preferences, &Preferences::signalShowNumberChange, m_kde_tray_icon, &SysTrayXStatusNotifier::slotShowNumberChange );
        disconnect( m_preferences, &Preferences::signalNumberColorChange, m_kde_tray_icon, &SysTrayXStatusNotifier::slotNumberColorChange );
        disconnect( m_preferences, &Preferences::signalNumberSizeChange, m_kde_tray_icon, &SysTrayXStatusNotifier::slotNumberSizeChange );
+        disconnect( m_preferences, &Preferences::signalThemeChange, m_kde_tray_icon, &SysTrayXStatusNotifier::slotThemeChange );

        disconnect( m_link, &SysTrayXLink::signalUnreadMail, m_kde_tray_icon, &SysTrayXStatusNotifier::slotSetUnreadMail );

--- a/app/SysTray-X/systrayxicon.cpp
+++ b/app/SysTray-X/systrayxicon.cpp
@@ -240,7 +240,17 @@ void    SysTrayXIcon::renderIcon()
        {
            case Preferences::PREF_BLANK_ICON:
            {
-                pixmap = QPixmap( ":/files/icons/blank-icon.png" );
+                Preferences::Theme theme = m_pref->getTheme();
+
+                if( theme == Preferences::PREF_THEME_LIGHT )
+                {
+                    pixmap = QPixmap( ":/files/icons/blank-icon.png" );
+                }
+                else
+                {
+                    pixmap = QPixmap( ":/files/icons/blank-icon-dark.png" );
+                }
+
                break;
            }

@@ -395,6 +405,15 @@ void    SysTrayXIcon::slotNumberSizeChange()
 }


+/*
+ *  Handle the theme change signal
+ */
+void    SysTrayXIcon::slotThemeChange()
+{
+    renderIcon();
+}
+
+
 /*
 *  Handle activation of the tray icon
 */
--- a/app/SysTray-X/systrayxicon.h
+++ b/app/SysTray-X/systrayxicon.h
@@ -161,6 +161,11 @@ class SysTrayXIcon : public QSystemTrayIcon
         */
        void    slotNumberSizeChange();

+        /**
+         * @brief slotThemeChange. Slot for handling theme change signals.
+         */
+        void    slotThemeChange();
+
    private slots:

        /**
--- a/app/SysTray-X/systrayxlink.cpp
+++ b/app/SysTray-X/systrayxlink.cpp
@@ -630,6 +630,16 @@ void    SysTrayXLink::DecodePreferences( const QJsonObject& pref )
        m_pref->setCloseType( close_type );
    }

+    if( pref.contains( "theme" ) && pref[ "theme" ].isString() )
+    {
+        Preferences::Theme theme = static_cast< Preferences::Theme >( pref[ "theme" ].toString().toInt() );
+
+        /*
+         *  Store the new theme
+         */
+        m_pref->setTheme( theme );
+    }
+
    if( pref.contains( "debug" ) && pref[ "debug" ].isString() )
    {
        bool debug = pref[ "debug" ].toString() == "true";
@@ -666,6 +676,7 @@ void    SysTrayXLink::EncodePreferences( const Preferences& pref )
    prefObject.insert("numberColor", QJsonValue::fromVariant( QString( pref.getNumberColor() ) ) );
    prefObject.insert("numberSize", QJsonValue::fromVariant( QString::number( pref.getNumberSize() ) ) );
    prefObject.insert("countType", QJsonValue::fromVariant( QString::number( pref.getCountType() ) ) );
+    prefObject.insert("theme", QJsonValue::fromVariant( QString::number( pref.getTheme() ) ) );

    QJsonObject preferencesObject;
    preferencesObject.insert("preferences", prefObject );
@@ -852,3 +863,15 @@ void    SysTrayXLink::slotCountTypeChange()
        sendPreferences();
    }
 }
+
+
+/*
+ *  Handle a theme change signal
+ */
+void    SysTrayXLink::slotThemeChange()
+{
+    if( m_pref->getAppPrefChanged() )
+    {
+        sendPreferences();
+    }
+}
--- a/app/SysTray-X/systrayxlink.h
+++ b/app/SysTray-X/systrayxlink.h
@@ -277,6 +277,11 @@ class SysTrayXLink : public QObject
         */
        void    slotCountTypeChange();

+        /**
+         * @brief slotThemeChange. Slot for handling theme change signals.
+         */
+        void    slotThemeChange();
+
     private slots:

        /**
--- a/app/SysTray-X/systrayxstatusnotifier.cpp
+++ b/app/SysTray-X/systrayxstatusnotifier.cpp
@@ -275,7 +275,16 @@ void    SysTrayXStatusNotifier::renderIcon()
        {
            case Preferences::PREF_BLANK_ICON:
            {
-                pixmap = QPixmap( ":/files/icons/blank-icon.png" );
+                Preferences::Theme theme = m_pref->getTheme();
+
+                if( theme == Preferences::PREF_THEME_LIGHT )
+                {
+                    pixmap = QPixmap( ":/files/icons/blank-icon.png" );
+                }
+                else
+                {
+                    pixmap = QPixmap( ":/files/icons/blank-icon-dark.png" );
+                }
                break;
            }

@@ -460,6 +469,15 @@ void    SysTrayXStatusNotifier::slotNumberSizeChange()
 }


+/*
+ *  Handle the theme change signal
+ */
+void    SysTrayXStatusNotifier::slotThemeChange()
+{
+    renderIcon();
+}
+
+
 /*
 *  Handle activate request of the notification icon
 */
--- a/app/SysTray-X/systrayxstatusnotifier.h
+++ b/app/SysTray-X/systrayxstatusnotifier.h
@@ -182,6 +182,11 @@ class SysTrayXStatusNotifier : public KStatusNotifierItem
         */
        void    slotNumberSizeChange();

+        /**
+         * @brief slotThemeChange. Slot for handling theme change signals.
+         */
+        void    slotThemeChange();
+
    private slots:

        /**
--- a/webext/_locales/de/messages.json
+++ b/webext/_locales/de/messages.json
@@ -199,6 +199,21 @@
    "description": "Count new mails"
  },

+  "icons_theme": {
+    "message": "Thema",
+    "description": "The theme"
+  },
+
+  "icons_theme_light": {
+    "message": "Licht",
+    "description": "The light theme"
+  },
+
+  "icons_theme_dark": {
+    "message": "Dunkel",
+    "description": "The dark theme"
+  },
+
  "accounts": {
    "message": "Konten",
    "description": "Title for Accounts options"
--- a/webext/_locales/el/messages.json
+++ b/webext/_locales/el/messages.json
@@ -199,6 +199,21 @@
    "description": "Count new mails"
  },

+  "icons_theme": {
+    "message": "θέμα",
+    "description": "The theme"
+  },
+
+  "icons_theme_light": {
+    "message": "φως",
+    "description": "The light theme"
+  },
+
+  "icons_theme_dark": {
+    "message": "σκοτάδι",
+    "description": "The dark theme"
+  },
+
  "accounts": {
    "message": "Λογαριασμοί",
    "description": "Title for Accounts options"
--- a/webext/_locales/en-US/messages.json
+++ b/webext/_locales/en-US/messages.json
@@ -199,6 +199,21 @@
    "description": "Count new mails"
  },

+  "icons_theme": {
+    "message": "Theme",
+    "description": "The theme"
+  },
+
+  "icons_theme_light": {
+    "message": "Light",
+    "description": "The light theme"
+  },
+
+  "icons_theme_dark": {
+    "message": "Dark",
+    "description": "The dark theme"
+  },
+
  "accounts": {
    "message": "Accounts",
    "description": "Title for Accounts options"
--- a/webext/_locales/it/messages.json
+++ b/webext/_locales/it/messages.json
@@ -199,6 +199,21 @@
    "description": "Count new mails"
  },

+  "icons_theme": {
+    "message": "Tema",
+    "description": "The theme"
+  },
+
+  "icons_theme_light": {
+    "message": "Leggero",
+    "description": "The light theme"
+  },
+
+  "icons_theme_dark": {
+    "message": "Scuro",
+    "description": "The dark theme"
+  },
+
  "accounts": {
    "message": "Account",
    "description": "Title for Accounts options"
--- a/webext/_locales/nl/messages.json
+++ b/webext/_locales/nl/messages.json
@@ -198,6 +198,21 @@
    "message": "Nieuw",
    "description": "Count new mails"
  },
+  
+  "icons_theme": {
+    "message": "Thema",
+    "description": "The theme"
+  },
+
+  "icons_theme_light": {
+    "message": "Licht",
+    "description": "The light theme"
+  },
+
+  "icons_theme_dark": {
+    "message": "Donker",
+    "description": "The dark theme"
+  },

  "accounts": {
    "message": "Accounts",
--- a/webext/_locales/pt-BR/messages.json
+++ b/webext/_locales/pt-BR/messages.json
@@ -199,6 +199,21 @@
    "description": "Count new mails"
  },

+  "icons_theme": {
+    "message": "Tema",
+    "description": "The theme"
+  },
+
+  "icons_theme_light": {
+    "message": "Claro",
+    "description": "The light theme"
+  },
+
+  "icons_theme_dark": {
+    "message": "Escuro",
+    "description": "The dark theme"
+  },
+
  "accounts": {
    "message": "Contas",
    "description": "Title for Accounts options"
--- a/webext/_locales/ru/messages.json
+++ b/webext/_locales/ru/messages.json
@@ -199,6 +199,21 @@
    "description": "Count new mails"
  },

+  "icons_theme": {
+    "message": "Tема",
+    "description": "The theme"
+  },
+
+  "icons_theme_light": {
+    "message": "светлая",
+    "description": "The light theme"
+  },
+
+  "icons_theme_dark": {
+    "message": "темная",
+    "description": "The dark theme"
+  },
+
  "accounts": {
    "message": "Аккаунты",
    "description": "Title for Accounts options"
--- a/webext/background.js
+++ b/webext/background.js
@@ -293,6 +293,7 @@ SysTrayX.Messaging = {
      "numberColor",
      "numberSize",
      "countType",
+      "theme",
    ]);
    getter.then(this.sendPreferencesStorage, this.onSendPreferecesStorageError);
  },
@@ -310,9 +311,16 @@ SysTrayX.Messaging = {
    const iconMime = result.iconMime || "image/png";
    const icon = result.icon || [];
    const showNumber = result.showNumber || "true";
-    const numberColor = result.numberColor || "#000000";
+    let numberColor = result.numberColor || "#000000";
    const numberSize = result.numberSize || "10";
    const countType = result.countType || "0";
+    const theme = result.theme || "0";
+
+    if (theme == "0" && numberColor == "#ffffff") {
+      numberColor = "#000000";
+    } else if (theme == "1" && numberColor == "#000000") {
+      numberColor = "#ffffff";
+    }

    //  Send it to the app
    SysTrayX.Link.postSysTrayXMessage({
@@ -332,6 +340,7 @@ SysTrayX.Messaging = {
        numberColor: numberColor,
        numberSize: numberSize,
        countType: countType,
+        theme: theme,
      },
    });

@@ -493,6 +502,13 @@ SysTrayX.Link = {
        });
      }

+      const theme = response["preferences"].theme;
+      if (theme) {
+        browser.storage.sync.set({
+          theme: theme,
+        });
+      }
+
      const debug = response["preferences"].debug;
      if (debug) {
        browser.storage.sync.set({
--- a/webext/css/options.css
+++ b/webext/css/options.css
@@ -114,6 +114,14 @@ body {
  padding: 10px 10px 10px 10px;
 }

+#themeselect {
+  width: 25em;
+  border-style: solid;
+  border-width: 1px;
+  margin: 10px 10px 10px 10px;
+  padding: 10px 10px 10px 10px;
+}
+
 ul,
 #accountsTree {
  list-style-type: none;
--- a/webext/icons/blank-icon-dark.png
+++ b/webext/icons/blank-icon-dark.png
--- a/webext/options.html
+++ b/webext/options.html
@@ -333,6 +333,28 @@
            </td>
          </tr>
        </table>
+
+        <table id="themeselect">
+          <caption>
+            __MSG_icons_theme__
+          </caption>
+          <tr id="themeLight">
+            <td>
+              <input type="radio" name="theme" id="themeLight" value="0" />
+              <label for="themeLight" id="themeLightlabel"
+                >__MSG_icons_theme_light__</label
+              >
+            </td>
+          </tr>
+          <tr id="themeDark">
+            <td>
+              <input type="radio" name="theme" id="themeDark" value="1" />
+              <label for="themeDark" id="themeDarklabel"
+                >__MSG_icons_theme_dark__</label
+              >
+            </td>
+          </tr>
+        </table>
      </form>

      <div
--- a/webext/options.js
+++ b/webext/options.js
@@ -150,11 +150,29 @@ SysTrayX.SaveOptions = {
      showNumber: `${showNumber}`,
    });

+    //
+    // Save theme preferences
+    //
+    const theme = document.querySelector('input[name="theme"]:checked').value;
+
+    //  Store minimize preferences
+    browser.storage.sync.set({
+      theme: theme,
+    });
+
    //
    //  Save number color
    //
-    const numberColor = document.querySelector('input[name="numberColor"]')
+    let numberColor = document.querySelector('input[name="numberColor"]')
      .value;
+
+    //  Force different color?
+    if (theme == "0" && numberColor == "#ffffff") {
+      numberColor = "#000000";
+    } else if (theme == "1" && numberColor == "#000000") {
+      numberColor = "#ffffff";
+    }
+
    browser.storage.sync.set({
      numberColor: `${numberColor}`,
    });
@@ -176,6 +194,7 @@ SysTrayX.SaveOptions = {
      countType: countType,
    });

+
    //  Mark add-on preferences changed
    browser.storage.sync.set({
      addonprefchanged: true,
@@ -319,6 +338,15 @@ SysTrayX.RestoreOptions = {
      SysTrayX.RestoreOptions.setCountType,
      SysTrayX.RestoreOptions.onCountTypeError
    );
+
+    //
+    //  Restore theme
+    //
+    const getTheme = browser.storage.sync.get("theme");
+    getTheme.then(
+      SysTrayX.RestoreOptions.setTheme,
+      SysTrayX.RestoreOptions.onThemeError
+    );
  },

  //
@@ -604,6 +632,22 @@ SysTrayX.RestoreOptions = {
    console.log(`countType Error: ${error}`);
  },

+  //
+  //  Restore theme callbacks
+  //
+  setTheme: function (result) {
+    const theme = result.theme || "0";
+
+    const radioButton = document.querySelector(
+      `input[name="theme"][value="${theme}"]`
+    );
+    radioButton.checked = true;
+  },
+
+  onThemeError: function (error) {
+    console.log(`Theme Error: ${error}`);
+  },
+
  //
  //  Restore filters callbacks
  //
@@ -762,6 +806,12 @@ SysTrayX.StorageChanged = {
          startMinimized: changes[item].newValue,
        });
      }
+      if (item === "theme") {
+        SysTrayX.RestoreOptions.setTheme({
+          theme: changes[item].newValue,
+        });
+      }
+
      if (item === "debug") {
        SysTrayX.RestoreOptions.setDebug({
          debug: changes[item].newValue,
@@ -785,6 +835,7 @@ SysTrayX.StorageChanged = {
    document.getElementById("iconselect").className = "active";
    document.getElementById("minimizeselect").className = "active";
    document.getElementById("closeselect").className = "active";
+    document.getElementById("themeselect").className = "active";
  },
 };