Set up a Dark theme

docs/conf.py

@@ -61,7 +61,7 @@
 # List of patterns, relative to source directory, that match files and
 # directories to ignore when looking for source files.
 # This pattern also affects html_static_path and html_extra_path.
-exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]
+exclude_patterns = ["_build", "Thumbs.db", ".DS_Store", "**.ipynb_checkpoints"]
 
 html_sidebars = {
     "contributing": ["search-field", "custom-template"],

pydata_sphinx_theme/_templates/navbar-nav.html

@@ -1,4 +1,12 @@
 <ul id="navbar-main-elements" class="navbar-nav">
+    <div id="theme-switch" class="nav-item">
+      <input type="checkbox" class="checkbox" id="chk" />
+      <label class="label" for="chk">
+		<i class="fas fa-moon"></i>
+		<i class="fas fa-sun"></i>
+		<div class="ball"></div>
+      </label>
+    </div>
     {{ generate_nav_html("navbar", maxdepth=1, collapse=True, includehidden=True, titles_only=True) }}
     {% for external_link in theme_external_links %}
     <li class="nav-item">

pydata_sphinx_theme/layout.html

@@ -9,6 +9,7 @@
     {% endblock %}
     {{- css() }}
     {{ _webpack.head_js_preload() }}
+    {{ _webpack.head_post() }}
 {%- endblock %}
 
 {%- block extrahead %}

pydata_sphinx_theme/static/css/dark-pygment.css

@@ -0,0 +1,86 @@
+/*******************************************************************************
+* Pygment CSS using Native
+*/
+pre { line-height: 125%; margin: 0; }
+td.linenos pre { color: #000000; background-color: #f0f0f0; padding: 0 5px 0 5px; }
+span.linenos { color: #000000; background-color: #f0f0f0; padding: 0 5px 0 5px; }
+td.linenos pre.special { color: #000000; background-color: #ffffc0; padding: 0 5px 0 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding: 0 5px 0 5px; }
+.highlight .hll { background-color: #404040 }
+.highlight { background: #202020; color: #d0d0d0 }
+.highlight .c { color: #999999; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .esc { color: #d0d0d0 } /* Escape */
+.highlight .g { color: #d0d0d0 } /* Generic */
+.highlight .k { color: #6ab825; font-weight: bold } /* Keyword */
+.highlight .l { color: #d0d0d0 } /* Literal */
+.highlight .n { color: #d0d0d0 } /* Name */
+.highlight .o { color: #d0d0d0 } /* Operator */
+.highlight .x { color: #d0d0d0 } /* Other */
+.highlight .p { color: #d0d0d0 } /* Punctuation */
+.highlight .ch { color: #999999; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #999999; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #cd2828; font-weight: bold } /* Comment.Preproc */
+.highlight .cpf { color: #999999; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #999999; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #e50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
+.highlight .gd { color: #d22323 } /* Generic.Deleted */
+.highlight .ge { color: #d0d0d0; font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #d22323 } /* Generic.Error */
+.highlight .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #589819 } /* Generic.Inserted */
+.highlight .go { color: #cccccc } /* Generic.Output */
+.highlight .gp { color: #aaaaaa } /* Generic.Prompt */
+.highlight .gs { color: #d0d0d0; font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
+.highlight .gt { color: #d22323 } /* Generic.Traceback */
+.highlight .kc { color: #6ab825; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #6ab825; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #6ab825; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #6ab825 } /* Keyword.Pseudo */
+.highlight .kr { color: #6ab825; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #6ab825; font-weight: bold } /* Keyword.Type */
+.highlight .ld { color: #d0d0d0 } /* Literal.Date */
+.highlight .m { color: #3677a9 } /* Literal.Number */
+.highlight .s { color: #ed9d13 } /* Literal.String */
+.highlight .na { color: #bbbbbb } /* Name.Attribute */
+.highlight .nb { color: #24909d } /* Name.Builtin */
+.highlight .nc { color: #447fcf; text-decoration: underline } /* Name.Class */
+.highlight .no { color: #40ffff } /* Name.Constant */
+.highlight .nd { color: #ffa500 } /* Name.Decorator */
+.highlight .ni { color: #d0d0d0 } /* Name.Entity */
+.highlight .ne { color: #bbbbbb } /* Name.Exception */
+.highlight .nf { color: #447fcf } /* Name.Function */
+.highlight .nl { color: #d0d0d0 } /* Name.Label */
+.highlight .nn { color: #447fcf; text-decoration: underline } /* Name.Namespace */
+.highlight .nx { color: #d0d0d0 } /* Name.Other */
+.highlight .py { color: #d0d0d0 } /* Name.Property */
+.highlight .nt { color: #6ab825; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #40ffff } /* Name.Variable */
+.highlight .ow { color: #6ab825; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #666666 } /* Text.Whitespace */
+.highlight .mb { color: #3677a9 } /* Literal.Number.Bin */
+.highlight .mf { color: #3677a9 } /* Literal.Number.Float */
+.highlight .mh { color: #3677a9 } /* Literal.Number.Hex */
+.highlight .mi { color: #3677a9 } /* Literal.Number.Integer */
+.highlight .mo { color: #3677a9 } /* Literal.Number.Oct */
+.highlight .sa { color: #ed9d13 } /* Literal.String.Affix */
+.highlight .sb { color: #ed9d13 } /* Literal.String.Backtick */
+.highlight .sc { color: #ed9d13 } /* Literal.String.Char */
+.highlight .dl { color: #ed9d13 } /* Literal.String.Delimiter */
+.highlight .sd { color: #ed9d13 } /* Literal.String.Doc */
+.highlight .s2 { color: #ed9d13 } /* Literal.String.Double */
+.highlight .se { color: #ed9d13 } /* Literal.String.Escape */
+.highlight .sh { color: #ed9d13 } /* Literal.String.Heredoc */
+.highlight .si { color: #ed9d13 } /* Literal.String.Interpol */
+.highlight .sx { color: #ffa500 } /* Literal.String.Other */
+.highlight .sr { color: #ed9d13 } /* Literal.String.Regex */
+.highlight .s1 { color: #ed9d13 } /* Literal.String.Single */
+.highlight .ss { color: #ed9d13 } /* Literal.String.Symbol */
+.highlight .bp { color: #24909d } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #447fcf } /* Name.Function.Magic */
+.highlight .vc { color: #40ffff } /* Name.Variable.Class */
+.highlight .vg { color: #40ffff } /* Name.Variable.Global */
+.highlight .vi { color: #40ffff } /* Name.Variable.Instance */
+.highlight .vm { color: #40ffff } /* Name.Variable.Magic */
+.highlight .il { color: #3677a9 } /* Literal.Number.Integer.Long */

pydata_sphinx_theme/static/css/dark-theme.css

@@ -0,0 +1,66 @@
+/*****************************************************************************
+* Dark theme config
+**/
+:root {
+
+  /*****************************************************************************
+  * Color
+  * 
+  * Colors are defined in rgb string way, "red, green, blue"
+  **/
+  --pst-color-primary: 213, 142, 72;
+  --pst-color-success: 72, 135, 87;
+  --pst-color-info: 64, 125, 191;
+  --pst-color-warning: 193, 162, 69;
+  --pst-color-danger: 203, 70, 83;
+  --pst-color-text-base: 245, 245, 245;
+  --pst-color-background: 18, 18, 18;
+  --pst-color-title: 250, 250, 250;
+  --pst-color-background-up: 22, 22, 22;
+
+  --pst-color-link: 64, 64, 191;
+  --pst-color-link-hover: 170, 103, 196;
+  --pst-color-headerlink: 152, 61, 61;
+  --pst-color-headerlink-hover: 255, 255, 255;
+  --pst-color-toc-link: 119, 117, 122;
+  --pst-color-sidebar-expander-background-hover: 244, 244, 244;
+
+  --pst-color-active-navigation: var(--pst-color-primary);
+  --pst-color-deactive-navigation: 77, 77, 77;
+  --pst-color-sidebar-caption: 110, 110, 110;
+
+  --pst-color-preformatted-text: 210, 210, 210;
+  --pst-color-preformatted-border: 57, 57, 57;
+  --pst-color-preformatted-shadow: var(--pst-color-background);
+  --pst-color-preformatted-background: var(--pst-color-background-up);
+  --pst-color-inline-code: 91, 188, 101;
+
+  --pst-color-admonition-default: var(--pst-color-info);
+  --pst-color-admonition-note: var(--pst-color-info);
+  --pst-color-admonition-attention: var(--pst-color-warning);
+  --pst-color-admonition-caution: var(--pst-color-warning);
+  --pst-color-admonition-warning: var(--pst-color-warning);
+  --pst-color-admonition-danger: var(--pst-color-danger);
+  --pst-color-admonition-error: var(--pst-color-danger);
+  --pst-color-admonition-hint: var(--pst-color-success);
+  --pst-color-admonition-tip: var(--pst-color-success);
+  --pst-color-admonition-important: var(--pst-color-success);
+  --pst-color-admonition-background: var(--pst-color-background-up);
+
+  --pst-color-guilabel-background: 242, 196, 166;
+  --pst-color-guilabel-border: 141, 95, 65;
+  --pst-color-guilabel-text: var(--pst-color-guilabel-border);
+
+  --pst-color-kbd-text: 33, 37, 41;
+  --pst-color-kbd-background: 245, 245, 245;
+}
+
+/*****************************************************************************
+* Images
+* 
+* Decrease the brightness and contrast of images a bit so that it looks 
+* comfortable to the eyes when it’s against a dark background
+**/
+img {
+  filter: brightness(.8) contrast(1.2);
+}

pydata_sphinx_theme/static/css/light-pygment.css

@@ -0,0 +1,79 @@
+/*******************************************************************************
+* Pygment CSS using Default
+*/
+
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.highlight .hll { background-color: #ffffcc }
+.highlight { background: #f8f8f8; }
+.highlight .c { color: #408080; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #FF0000 } /* Error */
+.highlight .k { color: #008000; font-weight: bold } /* Keyword */
+.highlight .o { color: #666666 } /* Operator */
+.highlight .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
+.highlight .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0044DD } /* Generic.Traceback */
+.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #008000 } /* Keyword.Pseudo */
+.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #B00040 } /* Keyword.Type */
+.highlight .m { color: #666666 } /* Literal.Number */
+.highlight .s { color: #BA2121 } /* Literal.String */
+.highlight .na { color: #7D9029 } /* Name.Attribute */
+.highlight .nb { color: #008000 } /* Name.Builtin */
+.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+.highlight .no { color: #880000 } /* Name.Constant */
+.highlight .nd { color: #AA22FF } /* Name.Decorator */
+.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #0000FF } /* Name.Function */
+.highlight .nl { color: #A0A000 } /* Name.Label */
+.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #19177C } /* Name.Variable */
+.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mb { color: #666666 } /* Literal.Number.Bin */
+.highlight .mf { color: #666666 } /* Literal.Number.Float */
+.highlight .mh { color: #666666 } /* Literal.Number.Hex */
+.highlight .mi { color: #666666 } /* Literal.Number.Integer */
+.highlight .mo { color: #666666 } /* Literal.Number.Oct */
+.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
+.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
+.highlight .sc { color: #BA2121 } /* Literal.String.Char */
+.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
+.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
+.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
+.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
+.highlight .sx { color: #008000 } /* Literal.String.Other */
+.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
+.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
+.highlight .ss { color: #19177C } /* Literal.String.Symbol */
+.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #0000FF } /* Name.Function.Magic */
+.highlight .vc { color: #19177C } /* Name.Variable.Class */
+.highlight .vg { color: #19177C } /* Name.Variable.Global */
+.highlight .vi { color: #19177C } /* Name.Variable.Instance */
+.highlight .vm { color: #19177C } /* Name.Variable.Magic */
+.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
+

pydata_sphinx_theme/static/css/light-theme.css

@@ -0,0 +1,56 @@
+/*****************************************************************************
+* Light theme config
+**/
+:root {
+
+  /*****************************************************************************
+  * Color
+  * 
+  * Colors are defined in rgb string way, "red, green, blue"
+  **/
+  --pst-color-primary: 19, 6, 84;
+  --pst-color-success: 40, 167, 69;
+  --pst-color-info: 0, 123, 255;  /*23, 162, 184;*/
+  --pst-color-warning: 255, 193, 7;
+  --pst-color-danger: 220, 53, 69;
+  --pst-color-text-base: 51, 51, 51;
+  --pst-color-background: 255, 255, 255;
+  --pst-color-title: var(--pst-color-text-base);
+  --pst-color-background-up: var(--pst-color-background);
+
+  --pst-color-link: 0, 91, 129;
+  --pst-color-link-hover: 227, 46, 0;
+  --pst-color-headerlink: 198, 15, 15;
+  --pst-color-headerlink-hover: 255, 255, 255;
+  --pst-color-toc-link: 119, 117, 122;
+  --pst-color-sidebar-expander-background-hover: 244, 244, 244;
+
+  --pst-color-active-navigation: var(--pst-color-primary);
+  --pst-color-deactive-navigation: 77, 77, 77;
+  --pst-color-sidebar-caption: var(--pst-color-deactive-navigation);
+
+  --pst-color-preformatted-text: 34, 34, 34;
+  --pst-color-preformatted-border: 201, 201, 201;
+  --pst-color-preformatted-background: 250, 250, 250;
+  --pst-color-preformatted-shadow: 216, 216, 216;
+  --pst-color-inline-code: 232, 62, 140;
+
+  --pst-color-admonition-default: var(--pst-color-info);
+  --pst-color-admonition-note: var(--pst-color-info);
+  --pst-color-admonition-attention: var(--pst-color-warning);
+  --pst-color-admonition-caution: var(--pst-color-warning);
+  --pst-color-admonition-warning: var(--pst-color-warning);
+  --pst-color-admonition-danger: var(--pst-color-danger);
+  --pst-color-admonition-error: var(--pst-color-danger);
+  --pst-color-admonition-hint: var(--pst-color-success);
+  --pst-color-admonition-tip: var(--pst-color-success);
+  --pst-color-admonition-important: var(--pst-color-success);
+  --pst-color-admonition-background: var(--pst-color-background);
+
+  --pst-color-guilabel-background: 231, 242, 250; 
+  --pst-color-guilabel-border: 127, 187, 227;
+  --pst-color-guilabel-text: var(--pst-color-guilabel-border);
+
+  --pst-color-kbd-text: 255, 255, 255;
+  --pst-color-kbd-background: 33, 37, 41;
+}

pydata_sphinx_theme/static/css/theme.css

@@ -2,6 +2,7 @@
 @import "../basic.css";
 
 :root {
+
   /*****************************************************************************
   * Theme config
   **/
@@ -44,38 +45,20 @@
   * 
   * Colors are defined in rgb string way, "red, green, blue"
   **/
-  --pst-color-primary: 19, 6, 84;
-  --pst-color-success: 40, 167, 69;
-  --pst-color-info: 0, 123, 255;  /*23, 162, 184;*/
-  --pst-color-warning: 255, 193, 7;
-  --pst-color-danger: 220, 53, 69;
-  --pst-color-text-base: 51, 51, 51;
-
   --pst-color-h1: var(--pst-color-primary);
   --pst-color-h2: var(--pst-color-primary);
-  --pst-color-h3: var(--pst-color-text-base);
-  --pst-color-h4: var(--pst-color-text-base);
-  --pst-color-h5: var(--pst-color-text-base);
-  --pst-color-h6: var(--pst-color-text-base);
+  --pst-color-h3: var(--pst-color-title);
+  --pst-color-h4: var(--pst-color-title);
+  --pst-color-h5: var(--pst-color-title);
+  --pst-color-h6: var(--pst-color-title);
   --pst-color-paragraph: var(--pst-color-text-base);
-  --pst-color-link: 0, 91, 129;
-  --pst-color-link-hover: 227, 46, 0;
-  --pst-color-headerlink: 198, 15, 15;
-  --pst-color-headerlink-hover: 255, 255, 255;
-  --pst-color-preformatted-text: 34, 34, 34;
-  --pst-color-preformatted-background: 250, 250, 250;
-  --pst-color-inline-code: 232, 62, 140;
 
-  --pst-color-active-navigation: 19, 6, 84;
-  --pst-color-navbar-link: 77, 77, 77;
+  --pst-color-navbar-link: var(--pst-color-deactive-navigation);
   --pst-color-navbar-link-hover: var(--pst-color-active-navigation);
   --pst-color-navbar-link-active: var(--pst-color-active-navigation);
-  --pst-color-sidebar-link: 77, 77, 77;
+  --pst-color-sidebar-link: var(--pst-color-deactive-navigation);
   --pst-color-sidebar-link-hover: var(--pst-color-active-navigation);
   --pst-color-sidebar-link-active: var(--pst-color-active-navigation);
-  --pst-color-sidebar-expander-background-hover: 244, 244, 244;
-  --pst-color-sidebar-caption: 77, 77, 77;
-  --pst-color-toc-link: 119, 117, 122;
   --pst-color-toc-link-hover: var(--pst-color-active-navigation);
   --pst-color-toc-link-active: var(--pst-color-active-navigation);
 
@@ -95,16 +78,7 @@
   * Admonitions
   **/
 
-  --pst-color-admonition-default: var(--pst-color-info);
-  --pst-color-admonition-note: var(--pst-color-info);
-  --pst-color-admonition-attention: var(--pst-color-warning);
-  --pst-color-admonition-caution: var(--pst-color-warning);
-  --pst-color-admonition-warning: var(--pst-color-warning);
-  --pst-color-admonition-danger: var(--pst-color-danger);
-  --pst-color-admonition-error: var(--pst-color-danger);
-  --pst-color-admonition-hint: var(--pst-color-success);
-  --pst-color-admonition-tip: var(--pst-color-success);
-  --pst-color-admonition-important: var(--pst-color-success);
+
 
   --pst-icon-admonition-default: var(--pst-icon-info-circle);
   --pst-icon-admonition-note: var(--pst-icon-info-circle);