WIP: Add dark mode to website [skip azp] [skip actions] [circle front]

Author: larsoner

doc/_static/style.css

@@ -8,6 +8,15 @@
 
 }
 
+html[data-theme="light"] {
+    --mne-color-github: #000;
+    --mne-color-discourse: #231e20,
+}
+html[data-theme="dark"] {
+    --mne-color-github: #fff;
+    --mne-color-discourse: #d1c498;
+}
+
 /* ************************************************************ Sphinx fixes */
 dl.field-list {
     grid-template-columns: auto 1fr;
@@ -156,17 +165,23 @@ div.frontpage-gallery:hover .fadeout {
     opacity: 0.0;
     transition: 200ms linear;
 }
+div.card {
+    background-color: rgb(var(--pst-color-background));
+}
+div.card img.institution {
+    background-color: #fffe;
+}
 
 /* ****************************************************** navbar quick links */
 
 i.fa-github-square:before {
-    color: #000;
+    color: rgb(var(--mne-color-github));
 }
 i.fa-twitter-square:before {
     color: #55acee;
 }
 i.fa-discourse:before {
-    color: #231e20;
+    color: rgb(var(--mne-color-discourse));
 }
 i.fa-discord:before {
     color: #7289da;  /* 99aab5 is also in-brand for discord */

doc/_templates/homepage.html

@@ -5,7 +5,7 @@
       <div class="col-12 col-sm-6 col-lg-4 my-2">
         <div class="card frontpage-gallery">
           <a href="{{ item.url }}">
-            <img class="card-img" src="{{ item.img if item.img.startswith('http') else pathto('_images/' + item.img, 1) }}" alt="{{ item.alt }}">
+            <img class="card-img institution" src="{{ item.img if item.img.startswith('http') else pathto('_images/' + item.img, 1) }}" alt="{{ item.alt }}">
             <div class="card-img-overlay px-3 py-1">
               <p class="lead mb-1 fadeout">{{ item.title }}</p>
               <p class="card-text fadeout">{{ item.text }}</p>
@@ -23,7 +23,7 @@
     {% for item in funders -%}
       <div class="card my-1 mx-2 border-light" style="{{ 'width: ' + item.size + 'rem;' }}">
         <a href="{{ pathto('funding.html', 1) }}">
-            <img class="card-img" src="{{ pathto('_static/funding/' + item.img, 1) }}" title="{{ item.title }}" alt="{{ item.title }}">
+            <img class="card-img institution" src="{{ pathto('_static/funding/' + item.img, 1) }}" title="{{ item.title }}" alt="{{ item.title }}">
         </a>
       </div>
     {% endfor %}
@@ -36,7 +36,7 @@
     {% for inst in institutions -%}
       <div class="card my-1 mx-2 border-light" style="{{ 'width: ' + inst.size + 'rem;' }}">
         <a href="{{ inst.url }}">
-          <img class="card-img" src="{{ pathto('_static/institution_logos/' + inst.img, 1) }}" title="{{ inst.name }}" alt="{{ inst.name }}"/>
+          <img class="card-img institution" src="{{ pathto('_static/institution_logos/' + inst.img, 1) }}" title="{{ inst.name }}" alt="{{ inst.name }}"/>
         </a>
       </div>
     {% endfor %}

doc/conf.py

@@ -575,7 +575,7 @@ def append_attr_meth_examples(app, what, name, obj, options, lines):
     'use_edit_page_button': False,
     'navigation_with_keys': False,
     'show_toc_level': 1,
-    'navbar_end': ['version-switcher', 'navbar-icon-links'],
+    'navbar_end': ['theme-switcher', 'version-switcher', 'navbar-icon-links'],
     'footer_items': ['copyright'],
     'google_analytics_id': 'UA-37225609-1',
     'switcher': {
@@ -635,6 +635,9 @@ def append_attr_meth_examples(app, what, name, obj, options, lines):
 # variables to pass to HTML templating engine
 html_context = {
     'build_dev_html': bool(int(os.environ.get('BUILD_DEV_HTML', False))),
+    'default_mode': 'auto',
+    'pygment_light_style': 'tango',
+    'pygment_dark_style': 'native',
     'funders': [
         dict(img='nih.png', size='3', title='National Institutes of Health'),
         dict(img='nsf.png', size='3.5',

doc/install/install_type_selector.html

@@ -12,7 +12,7 @@ <h6 class="card-subtitle mb-2 mt-2 text-muted">For Beginners</h6>
                 everything to get you started!
             </p>
         </div>
-        <div class="card-footer bg-white border-white"">
+        <div class="card-footer"">
             <a class="btn btn-primary font-weight-bold shadow-sm mb-3" role="button" href="installers.html">
             <i class="fa fa-cloud-download-alt"></i>&ensp;Download Installers
             </a>
@@ -31,7 +31,7 @@ <h6 class="card-subtitle mb-2 mt-2 text-muted">For Advanced Users</h6>
                 <code>conda</code>!
             </p>
         </div>
-        <div class="card-footer bg-white border-white"">
+        <div class="card-footer">
             <a class="btn btn-primary font-weight-bold shadow-sm mb-3" role="button" href="manual_install.html">
             <i class="fa fa-wrench"></i>&ensp;Setup Instructions
             </a>

requirements_doc.txt

@@ -1,7 +1,7 @@
 # requirements for building docs
 sphinx!=4.1.0
 https://github.com/numpy/numpydoc/archive/main.zip
-https://github.com/pydata/pydata-sphinx-theme/archive/af02a6a5fe5c8f322f148274c5eeb4204638a7f4.zip
+https://github.com/pydata/pydata-sphinx-theme/archive/454918d43c9a9d10764aeccccfb1a7aca4918cfd.zip
 https://github.com/sphinx-gallery/sphinx-gallery/archive/master.zip
 sphinxcontrib-bibtex>=2.1.2
 memory_profiler