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 @@ from src.qt.helpers.gradient import linear_gradient
 # 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 @@ import rawpy
 from PIL import Image, UnidentifiedImageError, ImageFont
 from PIL.Image import DecompressionBombError
 from PySide6.QtCore import QModelIndex, Signal, Qt, QSize
-from PySide6.QtGui import QResizeEvent, QAction, QMovie
+from PySide6.QtGui import QGuiApplication, QResizeEvent, QAction, QMovie
 from PySide6.QtWidgets import (
     QWidget,
     QVBoxLayout,
@@ -84,6 +84,17 @@ class PreviewPanel(QWidget):
         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)
@@ -145,15 +156,16 @@ class PreviewPanel(QWidget):
         # 	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)
@@ -184,9 +196,10 @@ class PreviewPanel(QWidget):
         # 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;"
             "}"
         )
@@ -291,6 +304,7 @@ class PreviewPanel(QWidget):
         clear_layout(layout)
 
         label = QLabel("Recent Libraries")
+        label.setStyleSheet("font-weight:bold;")
         label.setAlignment(Qt.AlignCenter)  # type: ignore
 
         row_layout = QHBoxLayout()
@@ -301,11 +315,9 @@ class PreviewPanel(QWidget):
             btn: QPushButtonWrapper | 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;",
             ]
 
@@ -336,11 +348,11 @@ class PreviewPanel(QWidget):
                 return lambda: self.driver.open_library(Path(path))
 
             button.clicked.connect(open_library_button_clicked(full_val))
-            set_button_style(button)
-            button_remove = QPushButton("➖")
+            set_button_style(button, ["padding-left: 6px;", "text-align: left;"])
+            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 pydub import AudioSegment, exceptions
 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.qt.helpers.text_wrapper import wrap_full_text
 from src.core.constants import (
@@ -75,6 +76,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"
     )
@@ -199,12 +204,24 @@ class ThumbRenderer(QObject):
 
                 # 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, fill=(255, 255, 255))
+                    draw.text((16, 16), text, fill=fg_color)
                     image = bg
                 # Fonts ========================================================
                 elif _filepath.suffix.lower() in FONT_TYPES:
@@ -237,7 +254,6 @@ class ThumbRenderer(QObject):
                             y_offset += (
                                 len(text_wrapped.split("\n")) + lines_of_padding
                             ) * draw.textbbox((0, 0), "A", font=font)[-1]
-
                     image = bg
                 # Audio ========================================================
                 elif ext in AUDIO_TYPES: