Merge pull request #1268 from SaptakS/macos-dark

MacOS dark mode implementations

41 files changed, 96 insertions, 33 deletions

diff --git a/desktop/src/onionshare/__init__.py b/desktop/src/onionshare/__init__.py
index f66c5a28..b1275a90 100644
--- a/desktop/src/onionshare/__init__.py
+++ b/desktop/src/onionshare/__init__.py
@@ -27,7 +27,7 @@ import signal
 import json
 import psutil
 import getpass
-from PySide2 import QtCore, QtWidgets
+from PySide2 import QtCore, QtWidgets, QtGui
 
 from onionshare_cli.common import Common
 
@@ -46,6 +46,9 @@ class Application(QtWidgets.QApplication):
         if common.platform == "Linux" or common.platform == "BSD":
             self.setAttribute(QtCore.Qt.AA_X11InitThreads, True)
         QtWidgets.QApplication.__init__(self, sys.argv)
+
+        # Check color mode on starting the app
+        self.color_mode = self.get_color_mode()
         self.installEventFilter(self)
 
     def eventFilter(self, obj, event):
@@ -57,6 +60,15 @@ class Application(QtWidgets.QApplication):
             self.quit()
         return False
 
+    def is_dark_mode(self):
+        baseColor = QtGui.QPalette().color(QtGui.QPalette.Base)
+        if baseColor.name().lower() == "#ffffff":
+            return False
+        return True
+
+    def get_color_mode(self):
+        return "dark" if self.is_dark_mode() else "light"
+
 
 def main():
     """
diff --git a/desktop/src/onionshare/gui_common.py b/desktop/src/onionshare/gui_common.py
index 4bf68bf8..16e0e6f5 100644
--- a/desktop/src/onionshare/gui_common.py
+++ b/desktop/src/onionshare/gui_common.py
@@ -78,7 +78,19 @@ class GuiCommon:
             os.makedirs(self.events_dir, 0o700, True)
         self.events_filename = os.path.join(self.events_dir, "events")
 
-        self.css = {
+        self.css = self.get_css(qtapp.color_mode)
+        self.color_mode = qtapp.color_mode
+
+    def get_css(self, color_mode):
+        header_color = "#4E064F"  # purple in light
+        title_color = "#333333"  # dark gray color in main window
+        stop_button_color = "#d0011b"  # red button color for stopping server
+        if color_mode == "dark":
+            header_color = "#F2F2F2"
+            title_color = "#F2F2F2"
+            stop_button_color = "#C32F2F"
+
+        return {
             # OnionShareGui styles
             "tab_widget": """
                 QTabBar::tab { width: 170px; height: 30px; }
@@ -96,7 +108,9 @@ class GuiCommon:
                 }""",
             "mode_header_label": """
                 QLabel {
-                    color: #4E064F;
+                    color: """
+            + header_color
+            + """;
                     font-size: 48px;
                     margin-bottom: 16px;
                 }""",
@@ -143,15 +157,8 @@ class GuiCommon:
                 """,
             "server_status_url_buttons": """
                 QPushButton {
-                    border: 1px solid #d3d3d3;
-                    border-radius: 4px;
-                    background-color: #ffffff;
-                    padding: 8px 16px;
+                    padding: 4px 8px;
                     text-align: center;
-                    color: #4e0d4e;
-                }
-                QPushButton:pressed {
-                    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,   stop:0 rgba(255, 255, 255, 255), stop:1 rgba(239, 239, 240, 255))
                 }
                 """,
             "server_status_button_stopped": """
@@ -173,7 +180,9 @@ class GuiCommon:
                 }""",
             "server_status_button_started": """
                 QPushButton {
-                    background-color: #d0011b;
+                    background-color: """
+            + stop_button_color
+            + """;
                     color: #ffffff;
                     padding: 10px 30px 10px 30px;
                     border: 0;
@@ -218,14 +227,18 @@ class GuiCommon:
                 }""",
             "downloads_uploads_progress_bar": """
                 QProgressBar {
-                    border: 1px solid #4e064f;
+                    border: 1px solid """
+            + header_color
+            + """;
                     background-color: #ffffff !important;
                     text-align: center;
                     color: #9b9b9b;
                     font-size: 14px;
                 }
                 QProgressBar::chunk {
-                    background-color: #4e064f;
+                    background-color: """
+            + header_color
+            + """;
                     width: 10px;
                 }""",
             "history_individual_file_timestamp_label": """
@@ -259,7 +272,9 @@ class GuiCommon:
             "new_tab_title_text": """
                 QLabel {
                     text-align: center;
-                    color: #333333;
+                    color: """
+            + title_color
+            + """;
                     font-size: 25px;
                 }
                 """,
@@ -271,26 +286,34 @@ class GuiCommon:
                 """,
             "share_zip_progess_bar": """
                 QProgressBar {
-                    border: 1px solid #4e064f;
+                    border: 1px solid """
+            + header_color
+            + """;
                     background-color: #ffffff !important;
                     text-align: center;
                     color: #9b9b9b;
                 }
                 QProgressBar::chunk {
                     border: 0px;
-                    background-color: #4e064f;
+                    background-color: """
+            + header_color
+            + """;
                     width: 10px;
                 }""",
             "share_filesize_warning": """
                 QLabel {
                     padding: 10px 0;
                     font-weight: bold;
-                    color: #333333;
+                    color: """
+            + title_color
+            + """;
                 }
                 """,
             "share_file_selection_drop_here_header_label": """
                 QLabel {
-                    color: #4E064F;
+                    color: """
+            + header_color
+            + """;
                     font-size: 48px;
                 }""",
             "share_file_selection_drop_here_label": """
diff --git a/desktop/src/onionshare/main_window.py b/desktop/src/onionshare/main_window.py
index a1b44032..f4f333d9 100644
--- a/desktop/src/onionshare/main_window.py
+++ b/desktop/src/onionshare/main_window.py
@@ -113,7 +113,11 @@ class MainWindow(QtWidgets.QMainWindow):
         self.settings_button.setDefault(False)
         self.settings_button.setFixedSize(40, 50)
         self.settings_button.setIcon(
-            QtGui.QIcon(GuiCommon.get_resource_path("images/settings.png"))
+            QtGui.QIcon(
+                GuiCommon.get_resource_path(
+                    "images/{}_settings.png".format(self.common.gui.color_mode)
+                )
+            )
         )
         self.settings_button.clicked.connect(self.open_settings)
         self.settings_button.setStyleSheet(self.common.gui.css["settings_button"])
@@ -285,6 +289,20 @@ class MainWindow(QtWidgets.QMainWindow):
         self.system_tray.hide()
         e.accept()
 
+    def event(self, event):
+        # Check if color mode switched while onionshare was open, if so, ask user to restart
+        if event.type() == QtCore.QEvent.Type.ApplicationPaletteChange:
+            QtCore.QTimer.singleShot(1, self.color_mode_warning)
+            return True
+        return QtWidgets.QMainWindow.event(self, event)
+
+    def color_mode_warning(self):
+        """
+        Open the color mode warning alert.
+        """
+        notice = strings._("gui_color_mode_changed_notice")
+        Alert(self.common, notice, QtWidgets.QMessageBox.Information)
+
     def cleanup(self):
         self.common.log("MainWindow", "cleanup")
         self.tabs.cleanup()
diff --git a/desktop/src/onionshare/resources/images/dark_icon-add.png b/desktop/src/onionshare/resources/images/dark_icon-add.png
new file mode 100644
index 00000000..5b8600c9
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_icon-add.png
diff --git a/desktop/src/onionshare/resources/images/dark_icon-close.png b/desktop/src/onionshare/resources/images/dark_icon-close.png
new file mode 100644
index 00000000..b9efb45d
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_icon-close.png
diff --git a/desktop/src/onionshare/resources/images/dark_logo_text.png b/desktop/src/onionshare/resources/images/dark_logo_text.png
new file mode 100644
index 00000000..6568ee0d
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_logo_text.png
diff --git a/desktop/src/onionshare/resources/images/dark_mode_chat.png b/desktop/src/onionshare/resources/images/dark_mode_chat.png
new file mode 100644
index 00000000..fe58d384
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_mode_chat.png
diff --git a/desktop/src/onionshare/resources/images/dark_mode_new_tab_chat.png b/desktop/src/onionshare/resources/images/dark_mode_new_tab_chat.png
new file mode 100644
index 00000000..e496a63a
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_mode_new_tab_chat.png
diff --git a/desktop/src/onionshare/resources/images/dark_mode_new_tab_receive.png b/desktop/src/onionshare/resources/images/dark_mode_new_tab_receive.png
new file mode 100644
index 00000000..6912ff24
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_mode_new_tab_receive.png
diff --git a/desktop/src/onionshare/resources/images/dark_mode_new_tab_share.png b/desktop/src/onionshare/resources/images/dark_mode_new_tab_share.png
new file mode 100644
index 00000000..3d8ae81f
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_mode_new_tab_share.png
diff --git a/desktop/src/onionshare/resources/images/dark_mode_new_tab_website.png b/desktop/src/onionshare/resources/images/dark_mode_new_tab_website.png
new file mode 100644
index 00000000..5eef2a2e
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_mode_new_tab_website.png
diff --git a/desktop/src/onionshare/resources/images/dark_mode_receive.png b/desktop/src/onionshare/resources/images/dark_mode_receive.png
new file mode 100644
index 00000000..60795631
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_mode_receive.png
diff --git a/desktop/src/onionshare/resources/images/dark_mode_share.png b/desktop/src/onionshare/resources/images/dark_mode_share.png
new file mode 100644
index 00000000..b6ea7202
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_mode_share.png
diff --git a/desktop/src/onionshare/resources/images/dark_mode_website.png b/desktop/src/onionshare/resources/images/dark_mode_website.png
new file mode 100644
index 00000000..52bae58c
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_mode_website.png
diff --git a/desktop/src/onionshare/resources/images/dark_settings.png b/desktop/src/onionshare/resources/images/dark_settings.png
new file mode 100644
index 00000000..8bb96f8a
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/dark_settings.png
diff --git a/desktop/src/onionshare/resources/images/light_logo_text.png b/desktop/src/onionshare/resources/images/light_logo_text.png
new file mode 100644
index 00000000..4b05d0b2
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/light_logo_text.png
diff --git a/desktop/src/onionshare/resources/images/light_mode_chat.png b/desktop/src/onionshare/resources/images/light_mode_chat.png
new file mode 100644
index 00000000..cd3a4432
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/light_mode_chat.png
diff --git a/desktop/src/onionshare/resources/images/light_mode_new_tab_chat.png b/desktop/src/onionshare/resources/images/light_mode_new_tab_chat.png
new file mode 100644
index 00000000..ec1e29cb
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/light_mode_new_tab_chat.png
diff --git a/desktop/src/onionshare/resources/images/light_mode_new_tab_receive.png b/desktop/src/onionshare/resources/images/light_mode_new_tab_receive.png
new file mode 100644
index 00000000..722fe3df
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/light_mode_new_tab_receive.png
diff --git a/desktop/src/onionshare/resources/images/light_mode_new_tab_share.png b/desktop/src/onionshare/resources/images/light_mode_new_tab_share.png
new file mode 100644
index 00000000..17569fc2
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/light_mode_new_tab_share.png
diff --git a/desktop/src/onionshare/resources/images/light_mode_new_tab_website.png b/desktop/src/onionshare/resources/images/light_mode_new_tab_website.png
new file mode 100644
index 00000000..e88f344e
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/light_mode_new_tab_website.png
diff --git a/desktop/src/onionshare/resources/images/light_mode_receive.png b/desktop/src/onionshare/resources/images/light_mode_receive.png
new file mode 100644
index 00000000..277ec487
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/light_mode_receive.png
diff --git a/desktop/src/onionshare/resources/images/light_mode_share.png b/desktop/src/onionshare/resources/images/light_mode_share.png
new file mode 100644
index 00000000..2339f69f
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/light_mode_share.png
diff --git a/desktop/src/onionshare/resources/images/light_mode_website.png b/desktop/src/onionshare/resources/images/light_mode_website.png
new file mode 100644
index 00000000..56e492a3
--- /dev/null
+++ b/desktop/src/onionshare/resources/images/light_mode_website.png
diff --git a/desktop/src/onionshare/resources/images/settings.png b/desktop/src/onionshare/resources/images/light_settings.png
index b6f8fa55..b6f8fa55 100644
--- a/desktop/src/onionshare/resources/images/settings.png
+++ b/desktop/src/onionshare/resources/images/light_settings.png
diff --git a/desktop/src/onionshare/resources/images/logo_text.png b/desktop/src/onionshare/resources/images/logo_text.png
deleted file mode 100644
index 3b584acd..00000000
--- a/desktop/src/onionshare/resources/images/logo_text.png
+++ /dev/null
diff --git a/desktop/src/onionshare/resources/images/mode_chat.png b/desktop/src/onionshare/resources/images/mode_chat.png
deleted file mode 100644
index 33114364..00000000
--- a/desktop/src/onionshare/resources/images/mode_chat.png
+++ /dev/null
diff --git a/desktop/src/onionshare/resources/images/mode_new_tab_chat.png b/desktop/src/onionshare/resources/images/mode_new_tab_chat.png
deleted file mode 100644
index 50759d64..00000000
--- a/desktop/src/onionshare/resources/images/mode_new_tab_chat.png
+++ /dev/null
diff --git a/desktop/src/onionshare/resources/images/mode_new_tab_receive.png b/desktop/src/onionshare/resources/images/mode_new_tab_receive.png
deleted file mode 100644
index 9db809be..00000000
--- a/desktop/src/onionshare/resources/images/mode_new_tab_receive.png
+++ /dev/null
diff --git a/desktop/src/onionshare/resources/images/mode_new_tab_share.png b/desktop/src/onionshare/resources/images/mode_new_tab_share.png
deleted file mode 100644
index 92973175..00000000
--- a/desktop/src/onionshare/resources/images/mode_new_tab_share.png
+++ /dev/null
diff --git a/desktop/src/onionshare/resources/images/mode_new_tab_website.png b/desktop/src/onionshare/resources/images/mode_new_tab_website.png
deleted file mode 100644
index 86b45f66..00000000
--- a/desktop/src/onionshare/resources/images/mode_new_tab_website.png
+++ /dev/null
diff --git a/desktop/src/onionshare/resources/images/mode_receive.png b/desktop/src/onionshare/resources/images/mode_receive.png
deleted file mode 100644
index d57aa409..00000000
--- a/desktop/src/onionshare/resources/images/mode_receive.png
+++ /dev/null
diff --git a/desktop/src/onionshare/resources/images/mode_share.png b/desktop/src/onionshare/resources/images/mode_share.png
deleted file mode 100644
index ec287db4..00000000
--- a/desktop/src/onionshare/resources/images/mode_share.png
+++ /dev/null
diff --git a/desktop/src/onionshare/resources/images/mode_website.png b/desktop/src/onionshare/resources/images/mode_website.png
deleted file mode 100644
index 37a556d9..00000000
--- a/desktop/src/onionshare/resources/images/mode_website.png
+++ /dev/null
diff --git a/desktop/src/onionshare/resources/locale/en.json b/desktop/src/onionshare/resources/locale/en.json
index 502fe13e..f7b8f7bb 100644
--- a/desktop/src/onionshare/resources/locale/en.json
+++ b/desktop/src/onionshare/resources/locale/en.json
@@ -111,6 +111,7 @@
     "gui_open_folder_error": "Failed to open folder with xdg-open. The file is here: {}",
     "gui_settings_language_label": "Preferred language",
     "gui_settings_language_changed_notice": "Restart OnionShare for the new language to be applied.",
+    "gui_color_mode_changed_notice": "Restart OnionShare for the new color mode to be applied.",
     "systray_menu_exit": "Quit",
     "systray_page_loaded_title": "Page Loaded",
     "systray_page_loaded_message": "OnionShare address loaded",
diff --git a/desktop/src/onionshare/tab/mode/chat_mode/__init__.py b/desktop/src/onionshare/tab/mode/chat_mode/__init__.py
index a7c2929b..440a97c5 100644
--- a/desktop/src/onionshare/tab/mode/chat_mode/__init__.py
+++ b/desktop/src/onionshare/tab/mode/chat_mode/__init__.py
@@ -53,7 +53,11 @@ class ChatMode(Mode):
         self.image_label = QtWidgets.QLabel()
         self.image_label.setPixmap(
             QtGui.QPixmap.fromImage(
-                QtGui.QImage(GuiCommon.get_resource_path("images/mode_chat.png"))
+                QtGui.QImage(
+                    GuiCommon.get_resource_path(
+                        "images/{}_mode_chat.png".format(self.common.gui.color_mode)
+                    )
+                )
             )
         )
         self.image_label.setFixedSize(300, 300)
diff --git a/desktop/src/onionshare/tab/mode/receive_mode/__init__.py b/desktop/src/onionshare/tab/mode/receive_mode/__init__.py
index 95a68dcb..b54c1168 100644
--- a/desktop/src/onionshare/tab/mode/receive_mode/__init__.py
+++ b/desktop/src/onionshare/tab/mode/receive_mode/__init__.py
@@ -46,7 +46,11 @@ class ReceiveMode(Mode):
         self.image_label = QtWidgets.QLabel()
         self.image_label.setPixmap(
             QtGui.QPixmap.fromImage(
-                QtGui.QImage(GuiCommon.get_resource_path("images/mode_receive.png"))
+                QtGui.QImage(
+                    GuiCommon.get_resource_path(
+                        "images/{}_mode_receive.png".format(self.common.gui.color_mode)
+                    )
+                )
             )
         )
         self.image_label.setFixedSize(250, 250)
diff --git a/desktop/src/onionshare/tab/mode/share_mode/__init__.py b/desktop/src/onionshare/tab/mode/share_mode/__init__.py
index bf1498d5..b9e01f5d 100644
--- a/desktop/src/onionshare/tab/mode/share_mode/__init__.py
+++ b/desktop/src/onionshare/tab/mode/share_mode/__init__.py
@@ -69,7 +69,7 @@ class ShareMode(Mode):
         # File selection
         self.file_selection = FileSelection(
             self.common,
-            "images/mode_share.png",
+            "images/{}_mode_share.png".format(self.common.gui.color_mode),
             strings._("gui_new_tab_share_button"),
             self,
         )
diff --git a/desktop/src/onionshare/tab/mode/website_mode/__init__.py b/desktop/src/onionshare/tab/mode/website_mode/__init__.py
index 6df6ff02..0c323b1c 100644
--- a/desktop/src/onionshare/tab/mode/website_mode/__init__.py
+++ b/desktop/src/onionshare/tab/mode/website_mode/__init__.py
@@ -69,7 +69,7 @@ class WebsiteMode(Mode):
         # File selection
         self.file_selection = FileSelection(
             self.common,
-            "images/mode_website.png",
+            "images/{}_mode_website.png".format(self.common.gui.color_mode),
             strings._("gui_new_tab_website_button"),
             self,
         )
diff --git a/desktop/src/onionshare/tab/server_status.py b/desktop/src/onionshare/tab/server_status.py
index 2e8dc4f0..42f60cd3 100644
--- a/desktop/src/onionshare/tab/server_status.py
+++ b/desktop/src/onionshare/tab/server_status.py
@@ -93,7 +93,6 @@ class ServerStatus(QtWidgets.QWidget):
         )
 
         self.copy_url_button = QtWidgets.QPushButton(strings._("gui_copy_url"))
-        self.copy_url_button.setFlat(True)
         self.copy_url_button.setStyleSheet(
             self.common.gui.css["server_status_url_buttons"]
         )
@@ -108,12 +107,10 @@ class ServerStatus(QtWidgets.QWidget):
         self.show_url_qr_code_button.clicked.connect(
             self.show_url_qr_code_button_clicked
         )
-        self.show_url_qr_code_button.setFlat(True)
         self.show_url_qr_code_button.setStyleSheet(
             self.common.gui.css["server_status_url_buttons"]
         )
 
-        self.copy_hidservauth_button.setFlat(True)
         self.copy_hidservauth_button.setStyleSheet(
             self.common.gui.css["server_status_url_buttons"]
         )
diff --git a/desktop/src/onionshare/tab/tab.py b/desktop/src/onionshare/tab/tab.py
index 8cbddfed..aea81e82 100644
--- a/desktop/src/onionshare/tab/tab.py
+++ b/desktop/src/onionshare/tab/tab.py
@@ -121,10 +121,14 @@ class Tab(QtWidgets.QWidget):
         self.image_label = QtWidgets.QLabel()
         self.image_label.setPixmap(
             QtGui.QPixmap.fromImage(
-                QtGui.QImage(GuiCommon.get_resource_path("images/logo_text.png"))
+                QtGui.QImage(
+                    GuiCommon.get_resource_path(
+                        "images/{}_logo_text.png".format(self.common.gui.color_mode)
+                    )
+                )
             )
         )
-        self.image_label.setFixedSize(160, 40)
+        self.image_label.setFixedSize(180, 40)
         image_layout = QtWidgets.QVBoxLayout()
         image_layout.addWidget(self.image_label)
         image_layout.addStretch()
@@ -134,7 +138,7 @@ class Tab(QtWidgets.QWidget):
         # New tab buttons
         self.share_button = NewTabButton(
             self.common,
-            "images/mode_new_tab_share.png",
+            "images/{}_mode_new_tab_share.png".format(self.common.gui.color_mode),
             strings._("gui_new_tab_share_button"),
             strings._("gui_main_page_share_button"),
         )
@@ -142,7 +146,7 @@ class Tab(QtWidgets.QWidget):
 
         self.receive_button = NewTabButton(
             self.common,
-            "images/mode_new_tab_receive.png",
+            "images/{}_mode_new_tab_receive.png".format(self.common.gui.color_mode),
             strings._("gui_new_tab_receive_button"),
             strings._("gui_main_page_receive_button"),
         )
@@ -150,7 +154,7 @@ class Tab(QtWidgets.QWidget):
 
         self.website_button = NewTabButton(
             self.common,
-            "images/mode_new_tab_website.png",
+            "images/{}_mode_new_tab_website.png".format(self.common.gui.color_mode),
             strings._("gui_new_tab_website_button"),
             strings._("gui_main_page_website_button"),
         )
@@ -158,7 +162,7 @@ class Tab(QtWidgets.QWidget):
 
         self.chat_button = NewTabButton(
             self.common,
-            "images/mode_new_tab_chat.png",
+            "images/{}_mode_new_tab_chat.png".format(self.common.gui.color_mode),
             strings._("gui_new_tab_chat_button"),
             strings._("gui_main_page_chat_button"),
         )