MVP for using style sheets

Author: dstansby

MANIFEST.in

@@ -1,5 +1,6 @@
 include LICENSE
 include README.md
+recursive-include * *.mplstyle
 
 recursive-exclude * __pycache__
 recursive-exclude * *.py[co]

src/napari_matplotlib/base.py

@@ -8,6 +8,7 @@
     FigureCanvas,
     NavigationToolbar2QT,
 )
+import matplotlib.style as mplstyle
 from matplotlib.figure import Figure
 from qtpy.QtGui import QIcon
 from qtpy.QtWidgets import QLabel, QVBoxLayout, QWidget
@@ -40,8 +41,11 @@ def __init__(
     ):
         super().__init__(parent=parent)
         self.viewer = napari_viewer
+        self._mpl_style_sheet_path: Optional[Path] = None
 
-        self.canvas = FigureCanvas()
+        # Sets figure.* style
+        with mplstyle.context(self.mpl_style_sheet_path):
+            self.canvas = FigureCanvas()
 
         self.canvas.figure.patch.set_facecolor("none")
         self.canvas.figure.set_layout_engine("constrained")
@@ -52,7 +56,7 @@ def __init__(
         # 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_theme_change)
+        self.viewer.events.theme.connect(self._on_napari_theme_changed)
 
         self.setLayout(QVBoxLayout())
         self.layout().addWidget(self.toolbar)
@@ -63,47 +67,40 @@ 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 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.
 
         The Axes is saved on the ``.axes`` attribute for later access.
         """
-        self.axes = self.figure.subplots()
-        self.apply_napari_colorscheme(self.axes)
-
-    def apply_napari_colorscheme(self, ax: Axes) -> None:
-        """Apply napari-compatible colorscheme to an Axes."""
-        # get the foreground colours from current theme
-        theme = napari.utils.theme.get_theme(self.viewer.theme, as_dict=False)
-        fg_colour = theme.foreground.as_hex()  # fg is a muted contrast to bg
-        text_colour = theme.text.as_hex()  # text is high contrast to bg
-
-        # changing color of axes background to transparent
-        ax.set_facecolor("none")
-
-        # changing colors of all axes
-        for spine in ax.spines:
-            ax.spines[spine].set_color(fg_colour)
-
-        ax.xaxis.label.set_color(text_colour)
-        ax.yaxis.label.set_color(text_colour)
-
-        # changing colors of axes labels
-        ax.tick_params(axis="x", colors=text_colour)
-        ax.tick_params(axis="y", colors=text_colour)
-
-    def _on_theme_change(self) -> None:
-        """Update MPL toolbar and axis styling when `napari.Viewer.theme` is changed.
+        # Sets axes.* style.
+        # Does not set any text styling set by axes.* keys
+        with mplstyle.context(self.mpl_style_sheet_path):
+            self.axes = self.figure.subplots()
 
-        Note:
-            At the moment we only handle the default 'light' and 'dark' napari themes.
+    def _on_napari_theme_changed(self):
+        """
+        Called when the napari theme is changed.
         """
         self._replace_toolbar_icons()
-        if self.figure.gca():
-            self.apply_napari_colorscheme(self.figure.gca())
 
-    def _theme_has_light_bg(self) -> bool:
+    def _napari_theme_has_light_bg(self) -> bool:
         """
         Does this theme have a light background?
 
@@ -124,7 +121,7 @@ def _get_path_to_icon(self) -> Path:
         https://github.com/matplotlib/matplotlib/tree/main/lib/matplotlib/mpl-data/images
         """
         icon_root = Path(__file__).parent / "icons"
-        if self._theme_has_light_bg():
+        if self._napari_theme_has_light_bg():
             return icon_root / "black"
         else:
             return icon_root / "white"
@@ -211,6 +208,17 @@ def current_z(self) -> int:
         """
         return self.viewer.dims.current_step[0]
 
+    def _on_napari_theme_changed(self) -> 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.
+        """
+        super()._on_napari_theme_changed()
+        self.clear()
+        self.draw()
+
+
     def _setup_callbacks(self) -> None:
         """
         Sets up callbacks.
@@ -240,12 +248,14 @@ def _draw(self) -> None:
         Clear current figure, check selected layers are correct, and draw new
         figure if so.
         """
-        self.clear()
+        # Clearing axes sets new defaults, so need to make sure style is applied when
+        # this happens
+        with mplstyle.context(self.mpl_style_sheet_path):
+            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.apply_napari_colorscheme(self.figure.gca())
         self.canvas.draw()
 
     def clear(self) -> None:
@@ -288,7 +298,8 @@ def clear(self) -> None:
         """
         Clear the axes.
         """
-        self.axes.clear()
+        with mplstyle.context(self.mpl_style_sheet_path):
+            self.axes.clear()
 
 
 class NapariNavigationToolbar(NavigationToolbar2QT):

src/napari_matplotlib/styles/README.md

@@ -0,0 +1,3 @@
+This folder contains default built-in Matplotlib style sheets.
+See https://matplotlib.org/stable/tutorials/introductory/customizing.html#defining-your-own-style
+for more info on Matplotlib style sheets.

src/napari_matplotlib/styles/dark.mplstyle

@@ -0,0 +1,12 @@
+# Dark-theme napari colour scheme for matplotlib plots
+
+# text (very light grey - almost white): #f0f1f2
+# foreground (mid grey):                 #414851
+# background (dark blue-gray):           #262930
+
+figure.facecolor    : none
+axes.labelcolor     : f0f1f2
+axes.facecolor      : none
+axes.edgecolor      : 414851
+xtick.color         : f0f1f2
+ytick.color         : f0f1f2

src/napari_matplotlib/styles/light.mplstyle

@@ -0,0 +1,12 @@
+# Light-theme napari colour scheme for matplotlib plots
+
+# text ():       #3b3a39
+# foreground (): #d6d0ce
+# background (): #efebe9
+
+figure.facecolor    : none
+axes.labelcolor     : 3b3a39
+axes.facecolor      : none
+axes.edgecolor      : d6d0ce
+xtick.color         : 3b3a39
+ytick.color         : 3b3a39