pydata · bollwyvl · Oct 21, 2020 · Oct 21, 2020
diff --git a/pydata_sphinx_theme/docs-navbar.html b/pydata_sphinx_theme/docs-navbar.html
@@ -32,6 +32,23 @@
         {%- include "search-field.html" %}
       {% endif %}
 
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link" href="#">
+            <label for="pst-mode-day" title="Enable Day Mode">
+              <i class="fab fas fa-sun"></i>
+            </label>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">
+            <label for="pst-mode-night" title="Enable Night Mode">
+              <i class="fab fas fa-moon"></i>
+            </label>
+          </a>
+        </li>
+      </ul>
+
       <ul class="navbar-nav">
         {% if theme_github_url | length > 2 %}
           <li class="nav-item">

diff --git a/pydata_sphinx_theme/footer.html b/pydata_sphinx_theme/footer.html
@@ -16,4 +16,4 @@
       {%- endif %}
     </p>
   </div>
-</footer>
+</footer>
diff --git a/pydata_sphinx_theme/layout.html b/pydata_sphinx_theme/layout.html
@@ -34,6 +34,8 @@
 
 {% block body_tag %}
   <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
+    {%- include "modes.html" %}
+    <div class="pst-main">
 {%- endblock %}
 {%- block content %}
     {% block docs_navbar %}
@@ -96,4 +98,5 @@
 
 {%- block footer %}
 {%- include "footer.html" %}
+  </div> <!-- end pst-main -->
 {%- endblock %}
diff --git a/pydata_sphinx_theme/modes.html b/pydata_sphinx_theme/modes.html
@@ -0,0 +1,18 @@
+<input id="pst-mode-day" class="pst-visually-hidden" type="radio" name="pst-mode-day-night" checked="checked">
+<input id="pst-mode-night" class="pst-visually-hidden" type="radio" name="pst-mode-day-night">
+
+<script>
+    ;(function() {
+        const MODE = "pst-mode-day-night";
+        const NIGHT = 'night'
+        const DAY = 'day';
+        const night = document.querySelector('#pst-mode-night');
+        const day = document.querySelector('#pst-mode-day');
+
+        day.checked = !(night.checked = localStorage.getItem(MODE) === NIGHT);
+
+        [day, night].map((mode) => mode.addEventListener('change', function (event) {
+            localStorage.setItem(MODE, night.checked ? NIGHT : DAY);
+        }));
+    }).call(this);
+</script>
diff --git a/...ndex.867a4752765d7cafcde5c68b66309846.css → ...ndex.86ed8df5e0301cf582c2e9672fd4dc06.css b/...ndex.867a4752765d7cafcde5c68b66309846.css → ...ndex.86ed8df5e0301cf582c2e9672fd4dc06.css
diff --git a/pydata_sphinx_theme/static/css/theme.css b/pydata_sphinx_theme/static/css/theme.css
@@ -23,7 +23,7 @@
 
   /*****************************************************************************
   * Color
-  * 
+  *
   * Colors are defined in rgb string way, "red, green, blue"
   **/
   --color-primary: 19, 6, 84;
@@ -74,4 +74,20 @@
   --icon-exclamation-circle: '\f06a';
   --icon-times-circle: '\f057';
   --icon-lightbulb: '\f0eb';
+
+  --pst-background: #fff;
+  --pst-nav-font-color: rgba(var(--color-text-base), 0.5);
+}
+
+#pst-mode-night:checked ~ .pst-main {
+  --color-text-base: 255, 255, 255;
+  --color-paragraph: 255, 255, 255;
+  --color-primary: 255, 202, 0;
+  --color-h1: var(--color-primary);
+  --color-h2: var(--color-primary);
+  --color-link: 255, 255, 153;
+  --color-link-hover: 231, 4, 136;
+
+  /* new top-level things */
+  --pst-background: #050218;
 }
diff --git a/...e/static/js/index.c8075258343c02e88109.js → ...e/static/js/index.0bd3d3c3320c76629c93.js b/...e/static/js/index.c8075258343c02e88109.js → ...e/static/js/index.0bd3d3c3320c76629c93.js
diff --git a/pydata_sphinx_theme/static/webpack-macros.html b/pydata_sphinx_theme/static/webpack-macros.html
@@ -17,13 +17,13 @@
 
 {% macro head_pre_bootstrap() %}
   <link href="{{ pathto('_static/css/theme.css', 1) }}" rel="stylesheet" />
-  <link href="{{ pathto('_static/css/index.867a4752765d7cafcde5c68b66309846.css', 1) }}" rel="stylesheet" />
+  <link href="{{ pathto('_static/css/index.86ed8df5e0301cf582c2e9672fd4dc06.css', 1) }}" rel="stylesheet" />
 {% endmacro %}
 
 {% macro head_js_preload() %}
-  <link rel="preload" as="script" href="{{ pathto('_static/js/index.c8075258343c02e88109.js', 1) }}">
+  <link rel="preload" as="script" href="{{ pathto('_static/js/index.0bd3d3c3320c76629c93.js', 1) }}">
 {% endmacro %}
 
 {% macro body_post() %}
-  <script src="{{ pathto('_static/js/index.c8075258343c02e88109.js', 1) }}"></script>
+  <script src="{{ pathto('_static/js/index.0bd3d3c3320c76629c93.js', 1) }}"></script>
 {% endmacro %}
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
@@ -3,8 +3,6 @@ html {
 }
 
 body {
-  padding-top: 75px;
-
   background-color: white;
   font-family: var(--font-family-base);
   font-weight: 400;

diff --git a/src/scss/_modes.scss b/src/scss/_modes.scss
@@ -0,0 +1,25 @@
+.pst-main {
+    background-color: var(--pst-background);
+
+    .navbar-light {
+        background-color: var(--pst-background) !important;
+
+        .navbar-nav .nav-link {
+            color: var(--pst-nav-font-color);
+        }
+    }
+
+}
+
+
+#pst-mode-day:checked ~ .pst-main {
+    label[for="pst-mode-night"] {
+        opacity: 0.5;
+    }
+}
+
+#pst-mode-night:checked ~ .pst-main label[for="pst-mode-day"],
+#pst-mode-day:checked ~ .pst-main label[for="pst-mode-night"] {
+    opacity: 0.5;
+    transition: opacity 0.2s
+}
diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -22,6 +22,7 @@ $grid-breakpoints: (
 @import './base';
 @import './navbar';
 @import './admonitions';
+@import './modes';
 
 // Custom css, TODO: to be refactored in different partials
 div.deprecated {
@@ -449,3 +450,19 @@ i {
     color: #130754;
   }
 }
+
+.pst-visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  white-space: nowrap;
+}
+
+.pst-main {
+  padding-top: 75px;
+}