Keep theme surfaces coherent

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Author: baremetalgo

interface/charts.py

@@ -8,6 +8,24 @@
 from PySide6.QtGui import QCursor
 from PySide6.QtWidgets import QSizePolicy, QToolTip, QVBoxLayout, QWidget
 
+from interface.theme import DARK_THEME, current_theme
+
+
+def _apply_plot_theme(plot: pg.PlotWidget, title: str, x_label: str, y_label: str, theme: str) -> None:
+    """Apply colors to a pyqtgraph plot, which does not inherit Qt QSS."""
+    if theme == DARK_THEME:
+        background, foreground, axis = "#141414", "#eeeeee", "#6a6a6a"
+    else:
+        background, foreground, axis = "#ffffff", "#202020", "#8a8a8a"
+    plot.setBackground(background)
+    plot.setTitle(title, color=foreground, size="10pt")
+    plot.setLabel("bottom", x_label, color=foreground)
+    plot.setLabel("left", y_label, color=foreground)
+    plot.getAxis("bottom").setPen(pg.mkPen(axis))
+    plot.getAxis("left").setPen(pg.mkPen(axis))
+    plot.getAxis("bottom").setTextPen(pg.mkPen(foreground))
+    plot.getAxis("left").setTextPen(pg.mkPen(foreground))
+
 
 class DatasetBarChartWidget(QWidget):
     """Compact bar chart for dataset composition and token statistics."""
@@ -33,22 +51,18 @@ def __init__(
         self.labels: list[str] = []
         self.values: list[float] = []
         self.value_suffix = ""
+        self.title = title
+        self.y_label = y_label
 
         layout = QVBoxLayout(self)
         layout.setContentsMargins(0, 0, 0, 0)
         layout.setSpacing(0)
         pg.setConfigOptions(antialias=True)
         self.plot = pg.PlotWidget()
-        self.plot.setBackground("#141414")
-        self.plot.setTitle(title, color="#eeeeee", size="10pt")
-        self.plot.setLabel("left", y_label, color="#d7d7d7")
+        self.apply_theme(current_theme())
         self.plot.showGrid(x=False, y=True, alpha=0.24)
         self.plot.setMenuEnabled(False)
         self.plot.setMouseEnabled(x=False, y=False)
-        self.plot.getAxis("bottom").setPen(pg.mkPen("#6a6a6a"))
-        self.plot.getAxis("left").setPen(pg.mkPen("#6a6a6a"))
-        self.plot.getAxis("bottom").setTextPen(pg.mkPen("#cfcfcf"))
-        self.plot.getAxis("left").setTextPen(pg.mkPen("#cfcfcf"))
         self.plot.getPlotItem().setContentsMargins(8, 8, 8, 8)
         self.bar_item = pg.BarGraphItem(x=[], height=[], width=0.58, brush=pg.mkBrush("#f5b041"))
         self.plot.addItem(self.bar_item)
@@ -58,6 +72,10 @@ def __init__(
         layout.addWidget(self.plot)
         self.clear()
 
+    def apply_theme(self, theme: str) -> None:
+        """Refresh this custom plot for the selected application theme."""
+        _apply_plot_theme(self.plot, self.title, "", self.y_label, theme)
+
     def clear(self) -> None:
         """Clear chart values."""
 
@@ -163,17 +181,10 @@ def __init__(
         layout.setSpacing(0)
         pg.setConfigOptions(antialias=True)
         self.plot = pg.PlotWidget()
-        self.plot.setBackground("#141414")
-        self.plot.setTitle(title, color="#eeeeee", size="11pt")
-        self.plot.setLabel("bottom", "Optimizer step", color="#d7d7d7")
-        self.plot.setLabel("left", y_label, color="#d7d7d7")
+        self.apply_theme(current_theme())
         self.plot.showGrid(x=True, y=True, alpha=0.28)
         self.plot.setMenuEnabled(False)
         self.plot.setMouseEnabled(x=True, y=True)
-        self.plot.getAxis("bottom").setPen(pg.mkPen("#6a6a6a"))
-        self.plot.getAxis("left").setPen(pg.mkPen("#6a6a6a"))
-        self.plot.getAxis("bottom").setTextPen(pg.mkPen("#cfcfcf"))
-        self.plot.getAxis("left").setTextPen(pg.mkPen("#cfcfcf"))
         self.plot.getPlotItem().setContentsMargins(10, 8, 10, 8)
         self.legend = self.plot.addLegend(offset=(12, 8), brush=pg.mkBrush(20, 20, 20, 180), pen=pg.mkPen("#444444"))
         self.primary_curve = self.plot.plot([], [], pen=pg.mkPen("#f5b041", width=2), name=primary_label)
@@ -188,6 +199,10 @@ def __init__(
         layout.addWidget(self.plot)
         self._refresh_plot()
 
+    def apply_theme(self, theme: str) -> None:
+        """Refresh this custom plot for the selected application theme."""
+        _apply_plot_theme(self.plot, self.title, "Optimizer step", self.y_label, theme)
+
     def clear(self) -> None:
         """Remove all plotted loss values."""
 
@@ -397,4 +412,3 @@ def _nearest_point(self, x_value: float, y_value: float) -> Optional[tuple[str,
         )
         distance = ((nearest[1] - x_value) / x_span) ** 2 + ((nearest[2] - y_value) / y_span) ** 2
         return nearest if distance < 0.01 else None
-

interface/core/project_state.py

@@ -24,6 +24,7 @@ def _default_project_state(self) -> dict[str, Any]:
             "schema": "drunkenbot_ide_project",
             "version": 1,
             "theme": "dark",
+            "theme_preference_version": 1,
             "project_name": "",
             "project_dir": "",
             "paths": {
@@ -256,6 +257,7 @@ def _project_state_dict(self, project_name: str, project_dir: Path) -> dict[str,
             "schema": "drunkenbot_ide_project",
             "version": 1,
             "theme": self.theme_name,
+            "theme_preference_version": 1,
             "project_name": project_name,
             "project_dir": str(project_dir),
             "created_at": created_at,

interface/core/project_state_apply.py

@@ -3,6 +3,7 @@
 # ProjectStateApplyMixin mixin. Shared runtime names are provided by interface.app.
 from typing import Any, Optional, Union  # noqa: F401
 from interface import app as _app
+from interface.theme import project_theme
 
 globals().update({name: value for name, value in vars(_app).items() if not name.startswith("__")})
 
@@ -15,7 +16,7 @@ def _apply_project_state(self, data: dict[str, Any]) -> None:
             data: Project state loaded from JSON.
         """
 
-        self.set_theme(data.get("theme", "dark"), persist=False)
+        self.set_theme(project_theme(data), persist=False)
         self.search_box.setText(str(data.get("project_name", "")))
         paths = data.get("paths", {})
         dataset = data.get("dataset", {})

interface/core/window_core.py

@@ -2,7 +2,7 @@
 
 # WindowCoreMixin mixin. Shared runtime names are provided by interface.app.
 from typing import Any, Optional, Union  # noqa: F401
-from interface.widgets.app_shell import build_main_shell
+from interface.widgets.app_shell import build_main_shell, update_navigation_icons
 from interface.theme import apply_theme, current_theme, normalize_theme
 from interface import app as _app
 
@@ -80,6 +80,7 @@ def __init__(self) -> None:
 
         shell = self._build_shell()
         self.setCentralWidget(shell)
+        update_navigation_icons(self)
         self._install_ui_event_logging(shell)
         self._install_wheel_guard(shell)
         self._refresh_notification_manager()
@@ -227,6 +228,8 @@ def set_theme(self, theme: object, persist: bool = True) -> None:
         """
         self.theme_name = normalize_theme(theme)
         self._apply_theme()
+        if hasattr(self, "side_rail"):
+            update_navigation_icons(self)
         self.update_theme_actions()
         if persist and self.current_project_file is not None:
             self.save_project()

interface/live_widgets.py

@@ -6,9 +6,27 @@
 import numpy as np
 import pyqtgraph as pg
 from PySide6.QtCore import QPointF, QRectF, Qt
-from PySide6.QtGui import QBrush, QColor, QPainter, QPen, QPolygonF
+from PySide6.QtGui import QBrush, QColor, QPainter, QPalette, QPen, QPolygonF
 from PySide6.QtWidgets import QVBoxLayout, QSizePolicy, QWidget
 
+from interface.theme import DARK_THEME, current_theme
+
+
+def _apply_plot_theme(plot: pg.PlotWidget, title: str, x_label: str, y_label: str, theme: str) -> None:
+    """Apply the application theme to a pyqtgraph plot."""
+    if theme == DARK_THEME:
+        background, foreground, axis = "#141414", "#eeeeee", "#6a6a6a"
+    else:
+        background, foreground, axis = "#ffffff", "#202020", "#8a8a8a"
+    plot.setBackground(background)
+    plot.setTitle(title, color=foreground, size="10pt")
+    plot.setLabel("bottom", x_label, color=foreground)
+    plot.setLabel("left", y_label, color=foreground)
+    plot.getAxis("bottom").setPen(pg.mkPen(axis))
+    plot.getAxis("left").setPen(pg.mkPen(axis))
+    plot.getAxis("bottom").setTextPen(pg.mkPen(foreground))
+    plot.getAxis("left").setTextPen(pg.mkPen(foreground))
+
 
 class ModelFlowWidget(QWidget):
     """Transformer flow preview for live training telemetry."""
@@ -25,6 +43,16 @@ def __init__(self) -> None:
         self.step = 0
         self.loss_value: Optional[float] = None
 
+    def apply_theme(self, _theme: str) -> None:
+        """Repaint the custom canvas after an application theme change."""
+        self.update()
+
+    def _foreground_color(self) -> QColor:
+        """Return a readable text color for the selected application theme."""
+        if current_theme() == DARK_THEME:
+            return QColor("#e6e6e6")
+        return self.palette().color(QPalette.WindowText)
+
     def set_state(self, layer_count: int, head_count: int, step: int, loss_value: Optional[float]) -> None:
         """Update flow state from UI-thread training metrics.
 
@@ -53,7 +81,8 @@ def paintEvent(self, event: Any) -> None:
         painter.setRenderHint(QPainter.Antialiasing)
         try:
             rect = self.rect().adjusted(18, 18, -18, -18)
-            painter.fillRect(self.rect(), QColor("#111111"))
+            background = QColor("#111111") if current_theme() == DARK_THEME else self.palette().color(QPalette.Window)
+            painter.fillRect(self.rect(), background)
             self._draw_grid(painter, rect)
             layer_total = min(max(self.layer_count, 4), 10)
             node_total = min(max(self.head_count, 5), 10)
@@ -92,7 +121,7 @@ def _draw_layer_box(self, painter: QPainter, x_value: float, top: float, bottom:
         painter.setPen(QPen(QColor("#4a90e2"), 1))
         painter.setBrush(QBrush(QColor(35, 80, 120, 55)))
         painter.drawRoundedRect(box, 6, 6)
-        painter.setPen(QPen(QColor("#e6e6e6")))
+        painter.setPen(QPen(self._foreground_color()))
         painter.drawText(QRectF(x_value - 42, top - 54, 84, 22), Qt.AlignCenter, label)
 
     def _draw_node(self, painter: QPainter, point: QPointF, column: int, active: bool) -> None:
@@ -179,7 +208,7 @@ def _draw_flow_arrows(self, painter: QPainter, rect: Any) -> None:
         painter.drawLine(rect.right() - 34, backward_y, rect.left() + 34, backward_y)
         painter.drawLine(rect.left() + 42, backward_y - 8, rect.left() + 34, backward_y)
         painter.drawLine(rect.left() + 42, backward_y + 8, rect.left() + 34, backward_y)
-        painter.setPen(QPen(QColor("#e6e6e6")))
+        painter.setPen(QPen(self._foreground_color()))
         painter.drawText(rect.left() + 44, rect.top() + 20, "MODEL FLOW (LIVE)")
         painter.setPen(QPen(QColor("#3ed7ff")))
         painter.drawText(rect.left() + 220, rect.top() + 20, "Forward pass")
@@ -193,12 +222,12 @@ def _draw_output_panel(self, painter: QPainter, rect: Any, points: list[QPointF]
         painter.setPen(QPen(QColor("#4f7b48"), 1))
         painter.setBrush(QBrush(QColor(25, 55, 30, 160)))
         painter.drawRoundedRect(panel, 5, 5)
-        painter.setPen(QPen(QColor("#d7d7d7")))
+        painter.setPen(QPen(self._foreground_color()))
         painter.drawText(QRectF(panel.left(), panel.top() - 44, panel.width(), 32), Qt.AlignCenter, "OUTPUT\n(NEXT TOKEN)")
         samples = [("token", 0.64), ("code", 0.14), ("text", 0.09), ("data", 0.06), ("...", 0.03)]
         for index, (token, score) in enumerate(samples):
             y_value = panel.top() + 18 + index * 19
-            painter.setPen(QPen(QColor("#b6d77a") if index == 0 else QColor("#d7d7d7")))
+            painter.setPen(QPen(QColor("#b6d77a") if index == 0 else self._foreground_color()))
             painter.drawText(QRectF(panel.left() + 12, y_value - 9, 54, 18), Qt.AlignLeft | Qt.AlignVCenter, token)
             painter.drawText(QRectF(panel.right() - 42, y_value - 9, 34, 18), Qt.AlignRight | Qt.AlignVCenter, f"{score:.2f}")
         painter.setPen(QPen(QColor("#ffb13b"), 1))
@@ -218,10 +247,7 @@ def __init__(self) -> None:
         layout = QVBoxLayout(self)
         layout.setContentsMargins(0, 0, 0, 0)
         self.plot = pg.PlotWidget()
-        self.plot.setBackground("#141414")
-        self.plot.setTitle("Prediction distribution", color="#eeeeee", size="10pt")
-        self.plot.setLabel("bottom", "Vocabulary index", color="#d7d7d7")
-        self.plot.setLabel("left", "Probability", color="#d7d7d7")
+        self.apply_theme(current_theme())
         self.plot.showGrid(x=True, y=True, alpha=0.22)
         self.plot.setMenuEnabled(False)
         self.plot.setMouseEnabled(x=False, y=False)
@@ -230,6 +256,10 @@ def __init__(self) -> None:
         self.plot.setYRange(0, 1.0)
         layout.addWidget(self.plot)
 
+    def apply_theme(self, theme: str) -> None:
+        """Refresh this custom plot for the selected application theme."""
+        _apply_plot_theme(self.plot, "Prediction distribution", "Vocabulary index", "Probability", theme)
+
     def update_distribution(self, step: int, loss_value: Optional[float]) -> None:
         """Update synthetic distribution from live training state.
 
@@ -259,10 +289,7 @@ def __init__(self) -> None:
         layout = QVBoxLayout(self)
         layout.setContentsMargins(0, 0, 0, 0)
         self.plot = pg.PlotWidget()
-        self.plot.setBackground("#141414")
-        self.plot.setTitle("Attention", color="#eeeeee", size="10pt")
-        self.plot.setLabel("bottom", "Key token", color="#d7d7d7")
-        self.plot.setLabel("left", "Query token", color="#d7d7d7")
+        self.apply_theme(current_theme())
         self.plot.setMenuEnabled(False)
         self.plot.setMouseEnabled(x=False, y=False)
         self.image = pg.ImageItem()
@@ -272,6 +299,10 @@ def __init__(self) -> None:
         layout.addWidget(self.plot)
         self.update_heatmap(0, None)
 
+    def apply_theme(self, theme: str) -> None:
+        """Refresh this custom plot for the selected application theme."""
+        _apply_plot_theme(self.plot, "Attention", "Key token", "Query token", theme)
+
     def update_heatmap(self, step: int, grad_norm: Optional[float]) -> None:
         """Update attention proxy heatmap.
 
@@ -301,10 +332,7 @@ def __init__(self) -> None:
         layout = QVBoxLayout(self)
         layout.setContentsMargins(0, 0, 0, 0)
         self.plot = pg.PlotWidget()
-        self.plot.setBackground("#141414")
-        self.plot.setTitle("Activation distribution", color="#eeeeee", size="10pt")
-        self.plot.setLabel("bottom", "Activation", color="#d7d7d7")
-        self.plot.setLabel("left", "Density", color="#d7d7d7")
+        self.apply_theme(current_theme())
         self.plot.showGrid(x=True, y=True, alpha=0.22)
         self.plot.setMenuEnabled(False)
         self.plot.setMouseEnabled(x=False, y=False)
@@ -314,6 +342,10 @@ def __init__(self) -> None:
         self.plot.setYRange(0, 1.0)
         layout.addWidget(self.plot)
 
+    def apply_theme(self, theme: str) -> None:
+        """Refresh this custom plot for the selected application theme."""
+        _apply_plot_theme(self.plot, "Activation distribution", "Activation", "Density", theme)
+
     def update_histogram(self, step: int, tokens_per_second: Optional[float]) -> None:
         """Update activation histogram proxy.
 
@@ -340,10 +372,7 @@ def __init__(self) -> None:
         layout = QVBoxLayout(self)
         layout.setContentsMargins(0, 0, 0, 0)
         self.plot = pg.PlotWidget()
-        self.plot.setBackground("#141414")
-        self.plot.setTitle("Gradient flow", color="#eeeeee", size="10pt")
-        self.plot.setLabel("bottom", "Gradient norm", color="#d7d7d7")
-        self.plot.setLabel("left", "Layer", color="#d7d7d7")
+        self.apply_theme(current_theme())
         self.plot.showGrid(x=True, y=True, alpha=0.22)
         self.plot.setMenuEnabled(False)
         self.plot.setMouseEnabled(x=False, y=False)
@@ -354,6 +383,10 @@ def __init__(self) -> None:
         self.plot.setXRange(0, 1)
         layout.addWidget(self.plot)
 
+    def apply_theme(self, theme: str) -> None:
+        """Refresh this custom plot for the selected application theme."""
+        _apply_plot_theme(self.plot, "Gradient flow", "Gradient norm", "Layer", theme)
+
     def update_flow(self, layer_count: int, grad_norm: Optional[float], step: int) -> None:
         """Update gradient flow proxy bars.
 
@@ -374,4 +407,3 @@ def update_flow(self, layer_count: int, grad_norm: Optional[float], step: int) -
         self.bars.setOpts(x0=[0] * count, x1=values, y=self.layers, height=0.55, brush="#ff4ca8")
         self.plot.setYRange(0, count + 1)
         self.plot.setXRange(0, max_value * 1.15)
-