Fix most theme UI legibility issues

tagstudio/src/core/enums.py

@@ -12,7 +12,9 @@ class SettingItems(str, enum.Enum):
 
 
 class Theme(str, enum.Enum):
-    COLOR_BG = "#65000000"
+    COLOR_BG_DARK = "#65000000"
+    COLOR_BG_LIGHT = "#33000000"
+    COLOR_DARK_LABEL = "#DD000000"
     COLOR_HOVER = "#65AAAAAA"
     COLOR_PRESSED = "#65EEEEEE"
     COLOR_DISABLED = "#65F39CAA"

tagstudio/src/qt/helpers/color_overlay.py

@@ -12,6 +12,8 @@
 # here, in enums.py, and in palette.py.
 _THEME_DARK_FG: str = "#FFFFFF55"
 _THEME_LIGHT_FG: str = "#000000DD"
+_THEME_DARK_BG: str = "#000000DD"
+_THEME_LIGHT_BG: str = "#FFFFFF55"
 
 
 def theme_fg_overlay(image: Image.Image) -> Image.Image:
@@ -27,6 +29,7 @@ def theme_fg_overlay(image: Image.Image) -> Image.Image:
         if QGuiApplication.styleHints().colorScheme() is Qt.ColorScheme.Dark
         else _THEME_LIGHT_FG
     )
+
     im = Image.new(mode="RGBA", size=image.size, color=overlay_color)
     return _apply_overlay(image, im)
 

tagstudio/src/qt/widgets/preview_panel.py

@@ -12,7 +12,7 @@
 from PIL import Image, UnidentifiedImageError
 from PIL.Image import DecompressionBombError
 from PySide6.QtCore import Signal, Qt, QSize
-from PySide6.QtGui import QResizeEvent, QAction, QMovie
+from PySide6.QtGui import QGuiApplication, QResizeEvent, QAction, QMovie
 from PySide6.QtWidgets import (
     QWidget,
     QVBoxLayout,
@@ -76,6 +76,17 @@ def __init__(self, library: Library, driver: "QtDriver"):
         self.img_button_size: tuple[int, int] = (266, 266)
         self.image_ratio: float = 1.0
 
+        self.label_bg_color = (
+            Theme.COLOR_BG_DARK.value
+            if QGuiApplication.styleHints().colorScheme() is Qt.ColorScheme.Dark
+            else Theme.COLOR_DARK_LABEL.value
+        )
+        self.panel_bg_color = (
+            Theme.COLOR_BG_DARK.value
+            if QGuiApplication.styleHints().colorScheme() is Qt.ColorScheme.Dark
+            else Theme.COLOR_BG_LIGHT.value
+        )
+
         self.image_container = QWidget()
         image_layout = QHBoxLayout(self.image_container)
         image_layout.setContentsMargins(0, 0, 0, 0)
@@ -137,15 +148,16 @@ def __init__(self, library: Library, driver: "QtDriver"):
         # 	Qt.TextInteractionFlag.TextSelectableByMouse)
 
         properties_style = (
-            f"background-color:{Theme.COLOR_BG.value};"
-            f"font-family:Oxanium;"
-            f"font-weight:bold;"
-            f"font-size:12px;"
-            f"border-radius:6px;"
-            f"padding-top: 4px;"
-            f"padding-right: 1px;"
-            f"padding-bottom: 1px;"
-            f"padding-left: 1px;"
+            f"background-color:{self.label_bg_color};"
+            "color:#FFFFFF;"
+            "font-family:Oxanium;"
+            "font-weight:bold;"
+            "font-size:12px;"
+            "border-radius:3px;"
+            "padding-top: 4px;"
+            "padding-right: 1px;"
+            "padding-bottom: 1px;"
+            "padding-left: 1px;"
         )
 
         self.dimensions_label.setStyleSheet(properties_style)
@@ -176,9 +188,10 @@ def __init__(self, library: Library, driver: "QtDriver"):
         # background and NOT the scroll container background, so that the
         # rounded corners are maintained when scrolling. I was unable to
         # find the right trick to only select that particular element.
+
         scroll_area.setStyleSheet(
             "QWidget#entryScrollContainer{"
-            f"background: {Theme.COLOR_BG.value};"
+            f"background:{self.panel_bg_color};"
             "border-radius:6px;"
             "}"
         )
@@ -283,6 +296,7 @@ def clear_layout(layout_item: QVBoxLayout):
         clear_layout(layout)
 
         label = QLabel("Recent Libraries")
+        label.setStyleSheet("font-weight:bold;")
         label.setAlignment(Qt.AlignCenter)  # type: ignore
 
         row_layout = QHBoxLayout()
@@ -291,11 +305,9 @@ def clear_layout(layout_item: QVBoxLayout):
 
         def set_button_style(btn: QPushButton, extras: list[str] | None = None):
             base_style = [
-                f"background-color:{Theme.COLOR_BG.value};",
+                f"background-color:{self.panel_bg_color};",
                 "border-radius:6px;",
-                "text-align: left;",
                 "padding-top: 3px;",
-                "padding-left: 6px;",
                 "padding-bottom: 4px;",
             ]
 
@@ -326,12 +338,12 @@ def open_library_button_clicked(path):
                 return lambda: self.driver.open_library(Path(path))
 
             button.clicked.connect(open_library_button_clicked(full_val))
-            set_button_style(button)
+            set_button_style(button, ["padding-left: 6px;", "text-align: left;"])
 
-            button_remove = QPushButton("➖")
+            button_remove = QPushButton("—")
             button_remove.setCursor(Qt.CursorShape.PointingHandCursor)
-            button_remove.setFixedWidth(30)
-            set_button_style(button_remove)
+            button_remove.setFixedWidth(24)
+            set_button_style(button_remove, ["font-weight:bold;", "text-align:center;"])
 
             def remove_recent_library_clicked(key: str):
                 return lambda: (

tagstudio/src/qt/widgets/thumb_renderer.py

@@ -25,6 +25,7 @@
 from mutagen import id3, flac, mp4
 from PySide6.QtCore import Qt, QObject, Signal, QSize
 from PySide6.QtGui import QGuiApplication, QPixmap
+from src.qt.helpers.color_overlay import theme_fg_overlay
 from src.qt.helpers.gradient import four_corner_gradient_background
 from src.core.constants import (
     AUDIO_TYPES,
@@ -69,6 +70,10 @@ class ThumbRenderer(QObject):
     )
     thumb_loading_512.load()
 
+    # TODO: Allow this to be dynamically updated at runtime
+    if QGuiApplication.styleHints().colorScheme() is not Qt.ColorScheme.Dark:
+        thumb_loading_512 = theme_fg_overlay(thumb_loading_512)
+
     thumb_broken_512: Image.Image = Image.open(
         Path(__file__).parents[3] / "resources/qt/images/thumb_broken_512.png"
     )
@@ -190,12 +195,24 @@ def render(
 
                 # Plain Text ===================================================
                 elif ext in PLAINTEXT_TYPES:
+                    bg_color: str = (
+                        "#1E1E1E"
+                        if QGuiApplication.styleHints().colorScheme()
+                        is Qt.ColorScheme.Dark
+                        else "#FFFFFF"
+                    )
+                    fg_color: str = (
+                        "#FFFFFF"
+                        if QGuiApplication.styleHints().colorScheme()
+                        is Qt.ColorScheme.Dark
+                        else "#111111"
+                    )
                     encoding = detect_char_encoding(_filepath)
                     with open(_filepath, "r", encoding=encoding) as text_file:
                         text = text_file.read(256)
-                    bg = Image.new("RGB", (256, 256), color="#1e1e1e")
+                    bg = Image.new("RGB", (256, 256), color=bg_color)
                     draw = ImageDraw.Draw(bg)
-                    draw.text((16, 16), text, file=(255, 255, 255))
+                    draw.text((16, 16), text, fill=fg_color)
                     image = bg
                 # Audio ========================================================
                 elif ext in AUDIO_TYPES: