ENH: Add dark mode to website (#10523)

Author: larsoner

doc/_static/mne_logo.svg

@@ -8,6 +8,19 @@
 
 }
 
+html[data-theme="light"] {
+    --mne-color-github: #000;
+    --mne-color-discourse: #231e20;
+    --pst-color-border-rgba: rgba(0, 0, 0, 0.125);
+    --pst-color-background-rgba: rgba(0, 0, 0, 0.03);
+}
+html[data-theme="dark"] {
+    --mne-color-github: #fff;
+    --mne-color-discourse: #d1c498;
+    --pst-color-border-rgba: rgba(201, 201, 201, 0.25);
+    --pst-color-background-rgba: rgba(255, 255, 255, 0.08);
+}
+
 /* ************************************************************ Sphinx fixes */
 dl.field-list {
     grid-template-columns: auto 1fr;
@@ -156,17 +169,28 @@ div.frontpage-gallery:hover .fadeout {
     opacity: 0.0;
     transition: 200ms linear;
 }
+div.card img.institution {
+    background-color: #fffe;
+}
+div.card {
+    border: 1px solid var(--pst-color-border-rgba);
+    background-color: rgb(var(--pst-color-background));
+}
+.card-header {
+    border-bottom-color: var(--pst-color-border-rgba);
+    background-color: var(--pst-color-background-rgba);
+}
 
 /* ****************************************************** 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/_static/mne_logo_dark.svg

@@ -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/_static/mne_logo_small.svg

@@ -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/_static/style.css

@@ -12,12 +12,22 @@ MNE-Python Homepage
 
 .. LOGO
 
+.. raw:: html
+
+    <script type="text/javascript">
+    var observer = new MutationObserver(function(mutations) {
+    const dark = document.documentElement.dataset.theme == 'dark';
+    document.getElementsByClassName('mainlogo')[0].src = dark ? '_static/mne_logo_dark.svg' : "_static/mne_logo.svg";
+    })
+    observer.observe(document.documentElement, {attributes: true, attributeFilter: ['data-theme']});
+    </script>
+    <link rel="preload" href="_static/mne_logo_dark.svg" as="image">
+
 .. image:: _static/mne_logo.svg
    :alt: MNE-Python
-   :class: logo
+   :class: logo, mainlogo
    :align: center
 
-
 .. rst-class:: h4 text-center font-weight-light my-4
 
    Open-source Python package for exploring, visualizing, and analyzing

doc/_templates/homepage.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>