Merge pull request #34 from jklymak/enh-add-theme-switcher

Enh add theme switcher

Author: timhoffm

docs/conf.py

@@ -1,7 +1,7 @@
 import os
 import time
 import datetime
-
+import matplotlib  # noqa: F401
 # Configuration file for the Sphinx documentation builder for
 # matplotlib projects.
 
@@ -28,7 +28,9 @@
 # Add any Sphinx extension module names here, as strings. They can be
 # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
 # ones.
-extensions = []
+extensions = [
+    'matplotlib.sphinxext.plot_directive',
+]
 
 # Add any paths that contain templates here, relative to this directory.
 
@@ -42,7 +44,9 @@
 html_theme = "mpl_sphinx_theme"
 html_favicon = "_static/favicon.ico"
 html_theme_options = {
-    "logo": {"link": "https://matplotlib.org/stable/"},
+    "logo": {"link": "https://matplotlib.org/stable/",
+             "image_light": "images/logo2.svg",
+             "image_dark": "images/logo_dark.svg"},
     # collapse_navigation in pydata-sphinx-theme is slow, so skipped for local
     # and CI builds https://github.com/pydata/pydata-sphinx-theme/pull/386
     "collapse_navigation": not is_release_build,

docs/index.rst

@@ -5,8 +5,8 @@ Welcome to Matplotlib Sphinx Theme's documentation!
    :maxdepth: 2
    :caption: Contents:
 
-This is the official Sphinx theme for Matplotlib documentation. 
-It extends the ``pydata_sphinx_theme`` project, but adds custom 
+This is the official Sphinx theme for Matplotlib documentation.
+It extends the ``pydata_sphinx_theme`` project, but adds custom
 styling and a navigation bar.
 
 When creating a Matplotlib subproject you can include this theme by changing this
@@ -25,18 +25,55 @@ There are three main templates that replace the defaults in ``pydata-sphinx-them
 
    navbar_start = mpl_navbar_logo.html
    navbar_center = mpl_nav_bar.html
-   navbar_end = mpl_icon_links.html   
+   navbar_end = mpl_icon_links.html
 
-Note that the option ``html_logo`` need not be specified as it is included 
-in ``mpl_sphinx_theme/mpl_navbar_logo.html``.  The logo is stored at 
-``mpl_sphinx_theme/static/images/logo2.svg``.  
+Note that the option ``html_logo`` need not be specified as it is included
+in ``mpl_sphinx_theme/mpl_navbar_logo.html``.  The logo is stored at
+``mpl_sphinx_theme/static/images/logo2.svg``.
 
 To change the top navbar, edit ``mpl_sphinx_theme/mpl_nav_bar.html``
 
 To change the social icons, edit ``mpl_sphinx_theme/mpl_icon_links.html``
 
 To change the style, edit ``mpl_sphinx_theme/static/css/style.css``
 
-The full ``conf.py`` is 
+Example plot
+~~~~~~~~~~~~
+.. plot::
+   :include-source:
+   :align: center
+
+   import matplotlib.pyplot as plt
+   import numpy as np
+
+   x = np.arange(0, 4, 0.05)
+   y = np.sin(x*np.pi)
+
+   fig, ax = plt.subplots(figsize=(3,2), constrained_layout=True)
+   ax.plot(x, y)
+   ax.set_xlabel('t [s]')
+   ax.set_ylabel('S [V]')
+   ax.set_title('Sine wave')
+
+.. plot::
+   :include-source:
+   :align: center
+
+   import matplotlib.pyplot as plt
+   import numpy as np
+
+   x = np.arange(0, 4, 0.05)
+
+   fig, ax = plt.subplots(figsize=(3,2), constrained_layout=True)
+   ax.pcolormesh(x, x, np.random.randn(len(x)-1, len(x)-1) )
+   ax.set_xlabel('t [s]')
+   ax.set_ylabel('S [V]')
+   ax.set_title('Sine wave')
+
+
+Configuration for this demo
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The full ``conf.py`` is
 
 .. literalinclude:: conf.py

docs/requirements.txt

@@ -1 +1,2 @@
-pydata-sphinx-theme>=0.9.0
+pydata-sphinx-theme>=0.9.0
+matplotlib

mpl_sphinx_theme/mpl_navbar_logo.html

@@ -10,7 +10,7 @@
 {% else %}
 <a class="navbar-brand" href="{{ pathto(theme_logo_link) }}">
   <img src="{{ pathto('_static/' + logo, 1) }}" class="logo" alt="logo">
-</a>      
+</a>
 {% endif %}
 {% else %}
 {% if not theme_logo_link %}
@@ -24,6 +24,7 @@
 {% else %}
 <a class="navbar-brand" href="{{ pathto(theme_logo_link) }}">
   <img src="_static/images/logo2.svg" class="logo" alt="logo">
-</a>      
+</a>
+{% endif %}
 {% endif %}
-{% endif %}
+

mpl_sphinx_theme/static/css/style.css

@@ -1,5 +1,5 @@
 html[data-theme="light"], html[data-theme="dark"] {
-  --pst-color-primary: rgb(19, 6, 84);
+  --pst-color-primary: #11557c;
   --pst-color-link: rgb(17, 85, 124);
   --pst-color-link-hover: rgb(0, 60, 99);
 }
@@ -9,6 +9,7 @@ html[data-theme="light"] {
 }
 
 html[data-theme="dark"] {
+  --pst-color-primary: #65baeaff;
   --pst-color-text-base: rgb(240, 240, 240);
 }
 

mpl_sphinx_theme/static/images/logo_dark.svg

@@ -4,6 +4,7 @@ stylesheet = css/style.css
 
 [options]
 native_site = False
-navbar_start = mpl_navbar_logo.html
+# navbar_start = mpl_navbar_logo.html
 navbar_center = mpl_nav_bar.html
-navbar_end = mpl_icon_links.html
+navbar_end = mpl_icon_links.html, theme-switcher.html
+logo = images/logo2.svg

mpl_sphinx_theme/theme.conf

@@ -1 +1,2 @@
-pydata-sphinx-theme>=0.9.0
+pydata-sphinx-theme>=0.9.0
+matplotlib