add dynamic viewer theme matching

Author: Chris-N-K

src/napari_matplotlib/base.py

@@ -5,6 +5,7 @@
 import matplotlib
 import matplotlib.style as mplstyle
 import napari
+from napari.utils.events import Event
 from napari.utils.theme import get_theme
 from matplotlib.backends.backend_qtagg import (  # type: ignore[attr-defined]
     FigureCanvasQTAgg,
@@ -56,9 +57,6 @@ def __init__(
         self.canvas.figure.set_layout_engine("constrained")
         self.toolbar = NapariNavigationToolbar(self.canvas, parent=self)
         self._replace_toolbar_icons()
-        # callback to update when napari theme changed
-        # TODO: this isn't working completely (see issue #140)
-        # most of our styling respects the theme change but not all
         self.viewer.events.theme.connect(self._on_napari_theme_changed)
 
         self.setLayout(QVBoxLayout())
@@ -70,24 +68,6 @@ def figure(self) -> Figure:
         """Matplotlib figure."""
         return self.canvas.figure
 
-    #@property
-    #def mpl_style_sheet_path(self) -> Path:
-    #    """
-    #    Path to the set Matplotlib style sheet.
-    #    """
-    #    if self._mpl_style_sheet_path is not None:
-    #        return self._mpl_style_sheet_path
-    #    elif (_CUSTOM_STYLE_PATH).exists():
-    #        return _CUSTOM_STYLE_PATH
-    #    elif self._napari_theme_has_light_bg():
-    #        return Path(__file__).parent / "styles" / "light.mplstyle"
-    #    else:
-    #        return Path(__file__).parent / "styles" / "dark.mplstyle"
-
-    #@mpl_style_sheet_path.setter
-    #def mpl_style_sheet_path(self, path: Path) -> None:
-    #    self._mpl_style_sheet_path = Path(path)
-
     def add_single_axes(self) -> None:
         """
         Add a single Axes to the figure.
@@ -99,11 +79,16 @@ def add_single_axes(self) -> None:
         with mplstyle.context(self.napari_theme_style_sheet):
             self.axes = self.figure.add_subplot()
 
-    def _on_napari_theme_changed(self) -> None:
+    def _on_napari_theme_changed(self, event: Event) -> None:
         """
         Called when the napari theme is changed.
+
+        Parameters
+        ----------
+        event : napari.utils.events.Event
+            Event that triggered the callback.
         """
-        self.napari_theme_style_sheet = style_sheet_from_theme(get_theme(self.napari_viewer.theme, as_dict=False))
+        self.napari_theme_style_sheet = style_sheet_from_theme(get_theme(event.value, as_dict=False))
         self._replace_toolbar_icons()
 
     def _napari_theme_has_light_bg(self) -> bool:
@@ -214,15 +199,18 @@ def current_z(self) -> int:
         """
         return self.viewer.dims.current_step[0]
 
-    def _on_napari_theme_changed(self) -> None:
+    def _on_napari_theme_changed(self, event: Event) -> None:
         """Update MPL toolbar and axis styling when `napari.Viewer.theme` is changed.
 
-        Note:
-            At the moment we only handle the default 'light' and 'dark' napari themes.
+        Parameters
+        ----------
+        event : napari.utils.events.Event
+            Event that triggered the callback.
         """
-        super()._on_napari_theme_changed()
-        self.clear()
-        self.draw()
+        super()._on_napari_theme_changed(event)
+        # use self._draw instead of self.draw to cope with redraw while there are no 
+        # layers, this makes the self.clear() obsolete
+        self._draw()
 
     def _setup_callbacks(self) -> None:
         """
@@ -256,12 +244,13 @@ def _draw(self) -> None:
         # Clearing axes sets new defaults, so need to make sure style is applied when
         # this happens
         with mplstyle.context(self.napari_theme_style_sheet):
+            # everything should be done in the style context
             self.clear()
-        if self.n_selected_layers in self.n_layers_input and all(
-            isinstance(layer, self.input_layer_types) for layer in self.layers
-        ):
-            self.draw()
-        self.canvas.draw()  # type: ignore[no-untyped-call]
+            if self.n_selected_layers in self.n_layers_input and all(
+                isinstance(layer, self.input_layer_types) for layer in self.layers
+            ):
+                self.draw()
+            self.canvas.draw()  # type: ignore[no-untyped-call]
 
     def clear(self) -> None:
         """

src/napari_matplotlib/util.py

@@ -142,23 +142,43 @@ def from_napari_css_get_size_of(
 
 
 def style_sheet_from_theme(theme: Theme) -> Dict[str, str]:
+    """Translate napari theme to a matplotlib style dictionary.
+
+    Parameters
+    ----------
+    theme : napari.utils.theme.Theme
+        Napari theme object representing the theme of the current viewer.
+    
+    Returns
+    -------
+    Dict[str, str]
+        Matplotlib compatible style dictionary.
+    """
     return {
         'axes.edgecolor':theme.secondary.as_hex(),
-        # alternatively "axes.facecolor" could be background color or not be set at all, 
-        # but this causes problems when saving figure as image
-        'axes.facecolor':theme.canvas.as_hex(),
+        #BUG: could be the same as napari canvas, but facecolors do not get 
+        #     updated upon redraw for what ever reason
+        #'axes.facecolor':theme.canvas.as_hex(),
+        'axes.facecolor':'none',
         'axes.labelcolor':theme.text.as_hex(),
         'boxplot.boxprops.color':theme.text.as_hex(),
         'boxplot.capprops.color':theme.text.as_hex(),
         'boxplot.flierprops.markeredgecolor':theme.text.as_hex(),
         'boxplot.whiskerprops.color':theme.text.as_hex(),
         'figure.edgecolor':theme.secondary.as_hex(),
-        # alternatively "figure.facecolor" could not be set, but this causes problems 
-        # when saving figure as image
-        'figure.facecolor':theme.background.as_hex(),
+        #BUG: should be the same as napari background, but facecolors do not get 
+        #     updated upon redraw for what ever reason
+        #'figure.facecolor':theme.background.as_hex(),
+        'figure.facecolor':'none',
         'grid.color':theme.foreground.as_hex(),
-        'legend.edgecolor':theme.secondary.as_hex(),
-        'legend.facecolor':theme.background.as_hex(),
+        #COMMENT: the hard coded colors are to match the previous behaviour 
+        #         alternativly we could use the theme to style the legend as well
+        #'legend.edgecolor':theme.secondary.as_hex(),
+        'legend.edgecolor':'black',
+        #'legend.facecolor':theme.background.as_hex(),
+        'legend.facecolor':'white',
+        #'legend.labelcolor':theme.text.as_hex()
+        'legend.labelcolor':'black',
         'text.color':theme.text.as_hex(),
         'xtick.color':theme.secondary.as_hex(),
         'xtick.labelcolor':theme.text.as_hex(),