From 47fedddec3b9ba97aeadbc8031f3c85bb35c7ab7 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Mon, 9 May 2022 23:19:35 +0200
Subject: [PATCH 01/21] draft of new color scheme

---
 .../assets/styles/base/_base.scss             |  30 ++-
 .../assets/styles/base/_color.scss            | 229 +-----------------
 .../assets/styles/components/_prev-next.scss  |   4 +-
 .../assets/styles/components/_search.scss     |  12 +-
 .../styles/components/_switcher-theme.scss    |  10 +-
 .../styles/components/_switcher-version.scss  |   4 +-
 .../styles/components/_versionmodified.scss   |  24 +-
 .../assets/styles/content/_admonitions.scss   |  70 +++---
 .../assets/styles/content/_api.scss           |   2 +-
 .../assets/styles/content/_quotes.scss        |   2 +-
 .../assets/styles/content/_spans.scss         |   6 +-
 .../styles/extensions/_ethical-ads.scss       |   8 +-
 .../assets/styles/sections/_footer.scss       |   2 +-
 .../assets/styles/sections/_header.scss       |  21 +-
 .../styles/sections/_sidebar-primary.scss     |  14 +-
 .../styles/sections/_sidebar-secondary.scss   |  10 +-
 16 files changed, 125 insertions(+), 323 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/base/_base.scss b/src/pydata_sphinx_theme/assets/styles/base/_base.scss
index 61a441aba1..445d1ac357 100644
--- a/src/pydata_sphinx_theme/assets/styles/base/_base.scss
+++ b/src/pydata_sphinx_theme/assets/styles/base/_base.scss
@@ -16,7 +16,7 @@ body {
 p {
   margin-bottom: 1.15rem;
   font-size: 1em;
-  color: var(--pst-color-paragraph);
+  color: var(--pst-color-text-base);
 
   /* section header in docstring pages */
   &.rubric {
@@ -38,7 +38,7 @@ a {
   }
 
   &.headerlink {
-    color: var(--pst-color-headerlink);
+    color: var(--pst-color-danger);
     opacity: 0.4;
     font-size: 0.8em;
     padding: 0 4px 0 4px;
@@ -64,37 +64,37 @@ h1 {
   @extend .heading-style;
   margin-top: 0;
   font-size: var(--pst-font-size-h1);
-  color: var(--pst-color-h1);
+  color: var(--pst-color-primary);
 }
 
 h2 {
   @extend .heading-style;
   font-size: var(--pst-font-size-h2);
-  color: var(--pst-color-h2);
+  color: var(--pst-color-primary);
 }
 
 h3 {
   @extend .heading-style;
   font-size: var(--pst-font-size-h3);
-  color: var(--pst-color-h3);
+  color: var(--pst-color-text-base);
 }
 
 h4 {
   @extend .heading-style;
   font-size: var(--pst-font-size-h4);
-  color: var(--pst-color-h4);
+  color: var(--pst-color-text-base);
 }
 
 h5 {
   @extend .heading-style;
   font-size: var(--pst-font-size-h5);
-  color: var(--pst-color-h5);
+  color: var(--pst-color-text-base);
 }
 
 h6 {
   @extend .heading-style;
   font-size: var(--pst-font-size-h6);
-  color: var(--pst-color-h6);
+  color: var(--pst-color-text-base);
 }
 
 small,
@@ -114,6 +114,12 @@ samp {
   font-family: var(--pst-font-family-monospace);
 }
 
+kbd {
+  // use theme negative
+  background-color: var(--pst-color-text-base);
+  color: var(--pst-color-background);
+}
+
 code {
   color: var(--pst-color-inline-code);
 }
@@ -121,12 +127,12 @@ code {
 pre {
   margin: 1.5em 0 1.5em 0;
   padding: 10px;
-  background-color: var(--pst-color-preformatted-background);
-  color: var(--pst-color-preformatted-text);
+  background-color: var(--pst-color-surface);
+  color: var(--pst-color-text-base);
   line-height: 1.2em;
-  border: 1px solid var(--pst-color-preformatted-border);
+  border: 1px solid var(--pst-color-border);
   border-radius: 0.2rem;
-  box-shadow: 1px 1px 1px var(--pst-color-preformatted-shadow);
+  box-shadow: 1px 1px 1px var(--pst-color-shadow);
 
   .linenos {
     opacity: 0.5;
diff --git a/src/pydata_sphinx_theme/assets/styles/base/_color.scss b/src/pydata_sphinx_theme/assets/styles/base/_color.scss
index 28778a0a3c..f74df1e386 100644
--- a/src/pydata_sphinx_theme/assets/styles/base/_color.scss
+++ b/src/pydata_sphinx_theme/assets/styles/base/_color.scss
@@ -11,136 +11,34 @@ html[data-theme="light"] {
   // main colors
   --pst-color-primary: rgb(19, 6, 84);
   --pst-color-success: rgb(40, 167, 69);
-  --pst-color-info: rgb(0, 123, 255); /*23, 162, 184;*/
+  --pst-color-info: rgb(0, 123, 255);
   --pst-color-warning: rgb(255, 193, 7);
   --pst-color-danger: rgb(220, 53, 69);
   --pst-color-text-base: rgb(51, 51, 51);
+  --pst-color-text-muted: rgb(77, 77, 77);
   --pst-color-background: rgb(255, 255, 255);
-  --pst-color-background-up: rgb(240, 240, 240); // for 3D effects
-  --pst-color-background-up-up: rgb(255, 255, 238); // for 3D effects
-  --pst-color-deactivate: rgb(77, 77, 77);
+  --pst-color-on-background: rgb(255, 255, 255);
+  --pst-color-surface: rgb(240, 240, 240);
+  --pst-color-on-surface: rgb(255, 255, 238);
   --pst-color-border: rgb(201, 201, 201);
   --pst-color-shadow: rgb(216, 216, 216);
 
-  // headers
-  --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-paragraph: var(--pst-color-text-base);
-
   // links
   --pst-color-link: rgb(0, 91, 129);
   --pst-color-link-hover: rgb(227, 46, 0);
   --pst-color-target: rgb(251, 229, 78);
 
-  // headerlinks (the anchors at the end of titles)
-  --pst-color-headerlink: rgb(198, 15, 15);
-
-  // navigation
-  --pst-color-active-navigation: var(--pst-color-primary);
-  --pst-color-deactive-navigation: var(--pst-color-deactivate);
-
-  /*****************************************************************************
-  * roles
-  */
-
   // inline code
   --pst-color-inline-code: rgb(232, 62, 140);
 
-  // guilabel
-  --pst-color-guilabel-background: rgb(231, 242, 250);
-  --pst-color-guilabel-border: rgb(127, 187, 227);
-  --pst-color-guilabel-text: var(--pst-color-guilabel-border);
-
-  // kbd
-  --pst-color-kbd-text: rgb(255, 255, 255);
-  --pst-color-kbd-background: rgb(33, 37, 41);
-
-  /*****************************************************************************
-  * directives
-  */
-
-  // 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-color-admonition-background: var(--pst-color-background);
-  --pst-color-admonition-shadow: var(--pst-color-shadow);
-
-  // viersion modified
-  --pst-color-versionmodified-default: var(--pst-color-info);
-  --pst-color-versionmodified-added: var(--pst-color-success);
-  --pst-color-versionmodified-changed: var(--pst-color-warning);
-  --pst-color-versionmodified-deprecated: var(--pst-color-danger);
-
-  // preformatted
-  --pst-color-preformatted-text: rgb(34, 34, 34);
-  --pst-color-preformatted-border: var(--pst-color-border);
-  --pst-color-preformatted-background: var(--pst-color-background-up);
-  --pst-color-preformatted-shadow: var(--pst-color-shadow);
-
   // targeted viewcode
   --pst-color-viewcode-target-border: rgb(170, 204, 153);
   --pst-color-viewcode-target-background: rgb(244, 222, 191);
 
-  /*****************************************************************************
-  * layout
-  */
-
-  // navbar
-  --pst-color-navbar-background: var(--pst-color-background);
-  --pst-color-navbar-link: var(--pst-color-deactivate);
-  --pst-color-navbar-link-hover: var(--pst-color-active-navigation);
-  --pst-color-navbar-link-active: var(--pst-color-active-navigation);
-
-  // toc
-  --pst-color-toc-link: var(--pst-color-deactivate);
-  --pst-color-toc-link-hover: var(--pst-color-active-navigation);
-  --pst-color-toc-link-active: var(--pst-color-active-navigation);
-  --pst-color-toc-border: var(--pst-color-border);
-
-  // sidebar
-  --pst-color-sidebar-link: var(--pst-color-deactivate);
-  --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: var(--pst-color-background-up);
-  --pst-color-sidebar-caption: var(--pst-color-text-base);
-  --pst-color-sidebar-border: var(--pst-color-border);
-
-  // footer
-  --pst-color-footer-border: var(--pst-color-border);
-
   // alert
   // higher contrast of links in info boxes
   --pst-color-alert-link: rgb(232, 62, 140);
 
-  // prev-next
-  --pst-color-prev-next: var(--pst-color-primary);
-  --pst-color-prev-next-btn: var(--pst-color-deactivate);
-
-  // search
-  --pst-color-search-background: var(--pst-color-background);
-  --pst-color-search: var(--pst-color-border);
-  --pst-color-search-border: var(--pst-color-border);
-
-  // ethical ad
-  --pst-color-ad-text: var(--pst-color-text-base);
-  --pst-color-ad-background: var(--pst-color-background);
-  --pst-color-ad-border: var(--pst-color-border);
-
-  // navbar-toogler
-  --pst-color-navbar-toggler: var(--pst-color-deactivate);
-
   // blockquote
   --pst-color-blockquote-border: rgb(221, 221, 221);
 }
@@ -152,7 +50,7 @@ html[data-theme="light"] {
 */
 html[data-theme="dark"] {
   /*****************************************************************************
-  * theme colors
+  * colors
   */
 
   // main colors
@@ -162,130 +60,29 @@ html[data-theme="dark"] {
   --pst-color-warning: rgb(193, 162, 69);
   --pst-color-danger: rgb(203, 70, 83);
   --pst-color-text-base: rgb(201, 209, 217);
+  --pst-color-text-muted: rgb(192, 192, 192);
   --pst-color-background: rgb(18, 18, 18);
-  --pst-color-background-up: rgb(22, 22, 22); // for 3D effect in dark theme
-  --pst-color-background-up-up: rgb(55, 55, 55); // for 3D effects
-  --pst-color-deactivate: rgb(192, 192, 192);
-  --pst-color-border: var(--pst-color-deactivate);
+  --pst-color-on-background: rgb(22, 22, 22);
+  --pst-color-surface: rgb(22, 22, 22);
+  --pst-color-on-surface: rgb(55, 55, 55);
+  --pst-color-border: rgb(192, 192, 192);
   --pst-color-shadow: var(--pst-color-background);
 
-  // headers
-  --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-paragraph: var(--pst-color-text-base);
-
   // links
   --pst-color-link: var(--pst-color-primary);
   --pst-color-link-hover: rgb(170, 103, 196);
   --pst-color-target: rgb(71, 39, 0);
 
-  // headerlinks (the anchors at the end of titles)
-  --pst-color-headerlink: rgb(221, 90, 90);
-
-  // navigation
-  --pst-color-active-navigation: var(--pst-color-primary);
-  --pst-color-deactive-navigation: var(--pst-color-deactivate);
-
-  /*****************************************************************************
-  * roles
-  */
-
   // inline code
   --pst-color-inline-code: rgb(221, 158, 194);
 
-  // guilabel
-  --pst-color-guilabel-background: rgb(242, 196, 166);
-  --pst-color-guilabel-border: rgb(83, 56, 38);
-  --pst-color-guilabel-text: var(--pst-color-guilabel-border);
-
-  // kbd
-  --pst-color-kbd-text: rgb(33, 37, 41);
-  --pst-color-kbd-background: rgb(245, 245, 245);
-
-  /*****************************************************************************
-  * directives
-  */
-
-  // 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-color-admonition-background: var(--pst-color-background-up);
-  --pst-color-admonition-shadow: var(--pst-color-shadow);
-
-  // viersion modified
-  --pst-color-versionmodified-default: var(--pst-color-info);
-  --pst-color-versionmodified-added: var(--pst-color-success);
-  --pst-color-versionmodified-changed: var(--pst-color-warning);
-  --pst-color-versionmodified-deprecated: var(--pst-color-danger);
-
-  // preformatted
-  --pst-color-preformatted-text: rgb(210, 210, 210);
-  --pst-color-preformatted-border: rgb(83, 83, 83);
-  --pst-color-preformatted-background: var(--pst-color-background-up);
-  --pst-color-preformatted-shadow: var(--pst-color-shadow);
-
   // targeted viewcode
   --pst-color-viewcode-target-border: rgb(170, 204, 153);
   --pst-color-viewcode-target-background: rgb(35, 55, 83);
 
-  /*****************************************************************************
-  * layout
-  */
-
-  // navbar
-  --pst-color-navbar-background: var(--pst-color-background-up);
-  --pst-color-navbar-link: var(--pst-color-deactivate);
-  --pst-color-navbar-link-hover: var(--pst-color-active-navigation);
-  --pst-color-navbar-link-active: var(--pst-color-active-navigation);
-
-  // toc
-  --pst-color-toc-link: var(--pst-color-deactivate);
-  --pst-color-toc-link-hover: var(--pst-color-active-navigation);
-  --pst-color-toc-link-active: var(--pst-color-active-navigation);
-  --pst-color-toc-border: var(--pst-color-border);
-
-  // sidebar
-  --pst-color-sidebar-link: var(--pst-color-deactivate);
-  --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: var(--pst-color-background-up);
-  --pst-color-sidebar-caption: var(--pst-color-text-base);
-  --pst-color-sidebar-border: var(--pst-color-border);
-
-  // footer
-  --pst-color-footer-border: var(--pst-color-border);
-
   // alert
-  --pst-color-alert-link: rgb(232, 62, 140); // higher contrast of links
-
-  // prev-next
-  --pst-color-prev-next: var(--pst-color-link);
-  --pst-color-prev-next-btn: var(--pst-color-deactivate);
-
-  // search
-  --pst-color-search-background: var(--pst-color-background);
-  --pst-color-search: var(--pst-color-border);
-  --pst-color-search-border: var(--pst-color-border);
-
-  // ethical ad
-  --pst-color-ad-text: var(--pst-color-text-base);
-  --pst-color-ad-background: var(--pst-color-background);
-  --pst-color-ad-border: var(--pst-color-border);
-
-  // navbar-toogler
-  --pst-color-navbar-toggler: var(--pst-color-deactivate);
+  // higher contrast of links in info boxes
+  --pst-color-alert-link: rgb(232, 62, 140);
 
   // blockquote
   --pst-color-blockquote-border: rgb(117, 117, 117);
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss b/src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss
index c111266947..8557324637 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss
@@ -19,11 +19,11 @@
     padding: 10px;
     max-width: 45%;
     overflow-x: hidden;
-    color: var(--pst-color-prev-next-btn);
+    color: var(--pst-color-text-muted);
     text-decoration: none;
 
     p.prev-next-title {
-      color: var(--pst-color-prev-next);
+      color: var(--pst-color-primary);
       font-weight: 600;
       font-size: 1.1em;
     }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss
index 1cd2602e42..595327b092 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_search.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_search.scss
@@ -6,27 +6,27 @@
 
   .icon {
     position: absolute;
-    color: var(--pst-color-search);
+    color: var(--pst-color-border);
     left: 25px;
   }
 
   input {
-    background-color: var(--pst-color-search-background);
+    background-color: var(--pst-color-background);
     border-radius: 0.2rem;
-    border: 1px solid var(--pst-color-search-border);
+    border: 1px solid var(--pst-color-border);
     padding-left: 35px;
     color: var(--pst-color-text-base);
 
     // Inner-text of the search bar
     &::placeholder {
-      color: var(--pst-color-search);
+      color: var(--pst-color-border);
     }
 
     // Background should always be same color regardless of active or nor
     &:active,
     &:focus {
-      background-color: var(--pst-color-search-background);
-      color: var(--pst-color-search);
+      background-color: var(--pst-color-background);
+      color: var(--pst-color-border);
     }
   }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
index b77f7c6b12..a647698a35 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
@@ -1,19 +1,19 @@
 // the icons for theme change
 #theme-switch {
-  border-color: var(--pst-color-navbar-link-hover);
+  border-color: var(--pst-color-primary);
   margin-right: 0.4rem;
 
   a {
-    color: var(--pst-color-navbar-link-hover);
+    color: var(--pst-color-primary);
     display: none;
   }
 
   &:hover {
-    border-color: var(--pst-color-navbar-background);
-    background-color: var(--pst-color-navbar-link-hover);
+    border-color: var(--pst-color-on-background);
+    background-color: var(--pst-color-primary);
 
     a {
-      color: var(--pst-color-navbar-background);
+      color: var(--pst-color-on-background);
     }
   }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
index 6e93303d05..3189bf6a2c 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
@@ -1,4 +1,4 @@
 #version_switcher_button {
-  background-color: var(--pst-color-active-navigation);
-  border-color: var(--pst-color-active-navigation);
+  background-color: var(--pst-color-primary);
+  border-color: var(--pst-color-primary);
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
index 50408b3415..38fb683227 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
@@ -7,7 +7,7 @@ div.deprecated {
   overflow: hidden;
   page-break-inside: avoid;
   border-left: 0.2rem solid;
-  border-color: var(--pst-color-versionmodified-default);
+  border-color: var(--pst-color-info);
   border-radius: 0.2rem;
   box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05),
     0 0 0.0625rem rgba(0, 0, 0, 0.1);
@@ -27,33 +27,33 @@ div.deprecated {
       position: absolute;
       left: 0;
       top: 0;
-      background-color: var(--pst-color-admonition-default);
+      background-color: var(--pst-color-info);
       opacity: 0.1;
     }
   }
 }
 
 div.versionadded {
-  border-color: var(--pst-color-versionmodified-added);
+  border-color: var(--pst-color-success);
 
   p:before {
-    background-color: var(--pst-color-versionmodified-added);
+    background-color: var(--pst-color-success);
   }
 }
 
 div.versionchanged {
-  border-color: var(--pst-color-versionmodified-changed);
+  border-color: var(--pst-color-warning);
 
   p:before {
-    background-color: var(--pst-color-versionmodified-changed);
+    background-color: var(--pst-color-warning);
   }
 }
 
 div.deprecated {
-  border-color: var(--pst-color-versionmodified-deprecated);
+  border-color: var(--pst-color-danger);
 
   p:before {
-    background-color: var(--pst-color-versionmodified-deprecated);
+    background-color: var(--pst-color-danger);
   }
 }
 
@@ -63,7 +63,7 @@ span.versionmodified {
   &:before {
     font-style: normal;
     margin-right: 0.6rem;
-    color: var(--pst-color-versionmodified-default);
+    color: var(--pst-color-info);
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: var(--pst-icon-versionmodified-default);
@@ -72,21 +72,21 @@ span.versionmodified {
 
 span.versionmodified.added {
   &:before {
-    color: var(--pst-color-versionmodified-added);
+    color: var(--pst-color-success);
     content: var(--pst-icon-versionmodified-added);
   }
 }
 
 span.versionmodified.changed {
   &:before {
-    color: var(--pst-color-versionmodified-changed);
+    color: var(--pst-color-warning);
     content: var(--pst-icon-versionmodified-changed);
   }
 }
 
 span.versionmodified.deprecated {
   &:before {
-    color: var(--pst-color-versionmodified-deprecated);
+    color: var(--pst-color-danger);
     content: var(--pst-icon-versionmodified-deprecated);
   }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
index cb5008d4ed..2f724bd4d8 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
@@ -7,12 +7,12 @@ div.admonition,
   overflow: hidden;
   page-break-inside: avoid;
   border-left: 0.2rem solid;
-  border-color: var(--pst-color-admonition-default);
+  border-color: var(--pst-color-info);
   border-radius: 0.2rem;
-  box-shadow: 0 0.2rem 0.5rem var(--pst-color-admonition-shadow),
-    0 0 0.0625rem var(--pst-color-admonition-shadow);
+  box-shadow: 0 0.2rem 0.5rem var(--pst-color-shadow),
+    0 0 0.0625rem var(--pst-color-shadow);
   transition: color 250ms, background-color 250ms, border-color 250ms;
-  background-color: var(--pst-color-admonition-background);
+  background-color: var(--pst-color-surface);
 
   // Last item should have no spacing since we'll control that w/ padding
   *:last-child {
@@ -43,7 +43,7 @@ div.admonition,
       left: 0.6rem;
       width: 1rem;
       height: 1rem;
-      color: var(--pst-color-admonition-default);
+      color: var(--pst-color-info);
       font-family: "Font Awesome 5 Free";
       font-weight: 900;
       content: var(--pst-icon-admonition-default);
@@ -59,7 +59,7 @@ div.admonition,
       position: absolute;
       left: 0;
       top: 0;
-      background-color: var(--pst-color-admonition-default);
+      background-color: var(--pst-color-info);
       opacity: 0.1;
     }
 
@@ -70,126 +70,126 @@ div.admonition,
   }
 
   &.attention {
-    border-color: var(--pst-color-admonition-attention);
+    border-color: var(--pst-color-warning);
     > .admonition-title {
       &:after {
-        background-color: var(--pst-color-admonition-attention);
+        background-color: var(--pst-color-warning);
       }
 
       &:before {
-        color: var(--pst-color-admonition-attention);
+        color: var(--pst-color-warning);
         content: var(--pst-icon-admonition-attention);
       }
     }
   }
 
   &.caution {
-    border-color: var(--pst-color-admonition-caution);
+    border-color: var(--pst-color-warning);
     > .admonition-title {
       &:after {
-        background-color: var(--pst-color-admonition-caution);
+        background-color: var(--pst-color-warning);
       }
 
       &:before {
-        color: var(--pst-color-admonition-caution);
+        color: var(--pst-color-warning);
         content: var(--pst-icon-admonition-caution);
       }
     }
   }
 
   &.warning {
-    border-color: var(--pst-color-admonition-warning);
+    border-color: var(--pst-color-warning);
     > .admonition-title {
       &:after {
-        background-color: var(--pst-color-admonition-warning);
+        background-color: var(--pst-color-warning);
       }
 
       &:before {
-        color: var(--pst-color-admonition-warning);
+        color: var(--pst-color-warning);
         content: var(--pst-icon-admonition-warning);
       }
     }
   }
 
   &.danger {
-    border-color: var(--pst-color-admonition-danger);
+    border-color: var(--pst-color-danger);
     > .admonition-title {
       &:after {
-        background-color: var(--pst-color-admonition-danger);
+        background-color: var(--pst-color-danger);
       }
 
       &:before {
-        color: var(--pst-color-admonition-danger);
+        color: var(--pst-color-danger);
         content: var(--pst-icon-admonition-danger);
       }
     }
   }
 
   &.error {
-    border-color: var(--pst-color-admonition-error);
+    border-color: var(--pst-color-danger);
     > .admonition-title {
       &:after {
-        background-color: var(--pst-color-admonition-error);
+        background-color: var(--pst-color-danger);
       }
 
       &:before {
-        color: var(--pst-color-admonition-error);
+        color: var(--pst-color-danger);
         content: var(--pst-icon-admonition-error);
       }
     }
   }
 
   &.hint {
-    border-color: var(--pst-color-admonition-hint);
+    border-color: var(--pst-color-success);
     > .admonition-title {
       &:after {
-        background-color: var(--pst-color-admonition-hint);
+        background-color: var(--pst-color-success);
       }
 
       &:before {
-        color: var(--pst-color-admonition-hint);
+        color: var(--pst-color-success);
         content: var(--pst-icon-admonition-hint);
       }
     }
   }
 
   &.tip {
-    border-color: var(--pst-color-admonition-tip);
+    border-color: var(--pst-color-success);
     > .admonition-title {
       &:after {
-        background-color: var(--pst-color-admonition-tip);
+        background-color: var(--pst-color-success);
       }
 
       &:before {
-        color: var(--pst-color-admonition-tip);
+        color: var(--pst-color-success);
         content: var(--pst-icon-admonition-tip);
       }
     }
   }
 
   &.important {
-    border-color: var(--pst-color-admonition-important);
+    border-color: var(--pst-color-success);
     > .admonition-title {
       &:after {
-        background-color: var(--pst-color-admonition-important);
+        background-color: var(--pst-color-success);
       }
 
       &:before {
-        color: var(--pst-color-admonition-important);
+        color: var(--pst-color-success);
         content: var(--pst-icon-admonition-important);
       }
     }
   }
 
   &.note {
-    border-color: var(--pst-color-admonition-note);
+    border-color: var(--pst-color-info);
     > .admonition-title {
       &:after {
-        background-color: var(--pst-color-admonition-note);
+        background-color: var(--pst-color-info);
       }
 
       &:before {
-        color: var(--pst-color-admonition-note);
+        color: var(--pst-color-info);
         content: var(--pst-icon-admonition-note);
       }
     }
@@ -198,12 +198,12 @@ div.admonition,
 
 // Similar content blocks that are not technically admonitions.
 .topic {
-  background-color: var(--pst-color-background-up);
+  background-color: var(--pst-color-surface);
   border-color: var(--pst-color-border);
 }
 
 aside.sidebar {
-  background-color: var(--pst-color-background-up-up);
+  background-color: var(--pst-color-on-surface);
   border-color: var(--pst-color-border);
 }
 
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_api.scss b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
index 1416fbf533..2bb20f649e 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_api.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
@@ -13,7 +13,7 @@ table.field-list {
   th.field-name {
     padding: 1px 8px 1px 5px;
     white-space: nowrap;
-    background-color: var(--pst-color-background-up);
+    background-color: var(--pst-color-surface);
   }
 
   /* italic font for parameter types */
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss
index 8896c7deee..f1073e1738 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss
@@ -1,6 +1,6 @@
 // GitHub blockquote style
 blockquote {
   padding: 0 1em;
-  color: var(--pst-color-deactivate);
+  color: var(--pst-color-text-muted);
   border-left: 0.25em solid var(--pst-color-blockquote-border);
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
index 01011204e9..aeeabc269e 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
@@ -3,9 +3,9 @@
  */
 
 span.guilabel {
-  border: 1px solid var(--pst-color-guilabel-border);
-  background: var(--pst-color-guilabel-background);
-  color: var(--pst-color-guilabel-text);
+  border: 1px solid var(--pst-color-info);
+  background: var(--pst-color-info);
+  color: var(--pst-color-info);
   font-size: 80%;
   font-weight: 700;
   border-radius: 4px;
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_ethical-ads.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_ethical-ads.scss
index 6c01c7165c..3e9bf0cc33 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_ethical-ads.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_ethical-ads.scss
@@ -8,15 +8,15 @@
   .ethical-footer a:visited,
   .ethical-footer a:hover,
   .ethical-footer a:active {
-    color: var(--pst-color-ad-text);
+    color: var(--pst-color-text-base);
   }
 
   .ethical-sidebar,
   .ethical-footer {
-    background-color: var(--pst-color-ad-background);
-    border: 1px solid var(--pst-color-ad-border);
+    background-color: var(--pst-color-background);
+    border: 1px solid var(--pst-color-border);
     border-radius: 5px;
-    color: var(--pst-color-ad-text);
+    color: var(--pst-color-text-base);
     font-size: 14px;
     line-height: 20px;
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_footer.scss b/src/pydata_sphinx_theme/assets/styles/sections/_footer.scss
index e8a9cee34d..78b250fd65 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_footer.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_footer.scss
@@ -1,6 +1,6 @@
 footer {
   width: 100%;
-  border-top: 1px solid var(--pst-color-footer-border);
+  border-top: 1px solid var(--pst-color-border);
   padding: 10px;
 
   .footer-item p {
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
index 23b08ee31a..66e28c0f95 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
@@ -16,8 +16,8 @@
 
     button.navbar-toggler {
       margin-right: 1em;
-      border-color: var(--pst-color-navbar-toggler);
-      color: var(--pst-color-navbar-toggler);
+      border-color: var(--pst-color-text-muted);
+      color: var(--pst-color-text-muted);
     }
   }
 
@@ -53,28 +53,27 @@
 // If we want the shadow to only point downward in the future, set
 // box-shadow to: 0 0.125rem 0.25rem -0.125rem rgba(0, 0, 0, 0.11);
 .navbar-light {
-  background: var(
-    --pst-color-navbar-background
-  ) !important; // Overrides bootstrap
+  // Overrides bootstrap
+  background: var(--pst-color-on-background) !important;
   box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.11);
 
   .navbar-nav {
     li a.nav-link {
       padding: 0 0.5rem;
-      color: var(--pst-color-navbar-link);
+      color: var(--pst-color-text-muted);
 
       &:hover {
-        color: var(--pst-color-navbar-link-hover);
+        color: var(--pst-color-primary);
       }
 
       &:focus {
-        color: var(--pst-color-navbar-link-hover);
+        color: var(--pst-color-primary);
       }
     }
 
     > .active > .nav-link {
       font-weight: 600;
-      color: var(--pst-color-navbar-link-active);
+      color: var(--pst-color-primary);
     }
   }
 }
@@ -92,9 +91,9 @@
 
 .toc-entry > .nav-link.active {
   font-weight: 600;
-  color: var(--pst-color-toc-link-active);
+  color: var(--pst-color-primary);
   background-color: transparent;
-  border-left: 2px solid var(--pst-color-toc-link-active);
+  border-left: 2px solid var(--pst-color-primary);
 }
 
 .nav-link:hover {
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
index b7f34c0b68..9d080f9109 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
@@ -9,7 +9,7 @@
   flex-direction: column;
 
   @include media-breakpoint-up(md) {
-    border-right: 1px solid var(--pst-color-sidebar-border);
+    border-right: 1px solid var(--pst-color-border);
 
     @supports (position: -webkit-sticky) or (position: sticky) {
       position: -webkit-sticky;
@@ -58,7 +58,7 @@
     align-items: center;
 
     &:hover {
-      background: var(--pst-color-sidebar-expander-background-hover);
+      background: var(--pst-color-surface);
     }
 
     i {
@@ -66,7 +66,7 @@
       font-size: 0.75rem;
       text-align: center;
       &:hover {
-        color: var(--pst-color-sidebar-link-hover);
+        color: var(--pst-color-primary);
       }
     }
   }
@@ -97,10 +97,10 @@ nav.bd-links {
   li > a {
     display: block;
     padding: 0.25rem 1.5rem;
-    color: var(--pst-color-sidebar-link);
+    color: var(--pst-color-text-muted);
 
     &:hover {
-      color: var(--pst-color-sidebar-link-hover);
+      color: var(--pst-color-primary);
       text-decoration: none;
       background-color: transparent;
     }
@@ -120,7 +120,7 @@ nav.bd-links {
     > a,
     &:hover > a {
       font-weight: 600;
-      color: var(--pst-color-sidebar-link-active);
+      color: var(--pst-color-primary);
     }
   }
 
@@ -133,7 +133,7 @@ nav.bd-links {
     margin-top: 1.25em;
     margin-bottom: 0.5em;
     padding: 0 1.5rem;
-    color: var(--pst-color-sidebar-caption);
+    color: var(--pst-color-text-base);
     &:first-child {
       margin-top: 0;
     }
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss
index 262a90c247..08bfd3981d 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss
@@ -5,7 +5,7 @@
 // Each TOC item is wrapped in this
 .tocsection {
   padding-left: 10px;
-  border-left: 1px solid var(--pst-color-toc-border);
+  border-left: 1px solid var(--pst-color-border);
   padding: 0.3rem 1.5rem;
 
   i {
@@ -16,7 +16,7 @@
 // The list of in-page TOC
 .section-nav {
   padding-left: 0;
-  border-left: 1px solid var(--pst-color-toc-border);
+  border-left: 1px solid var(--pst-color-border);
   border-bottom: none;
 
   ul {
@@ -51,14 +51,14 @@
   a {
     display: block;
     padding: 0.125rem 1.5rem;
-    color: var(--pst-color-toc-link);
+    color: var(--pst-color-text-muted);
 
     @include media-breakpoint-up(xl) {
       padding-right: 0;
     }
 
     &:hover {
-      color: var(--pst-color-toc-link-hover);
+      color: var(--pst-color-primary);
       text-decoration: none;
     }
   }
@@ -82,6 +82,6 @@
   padding-top: 2rem;
 
   a {
-    color: var(--pst-color-sidebar-link-active);
+    color: var(--pst-color-primary);
   }
 }

From 571ad94ba2bc9e7ec9d7106018e314c610f9ae5c Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Mon, 9 May 2022 23:24:05 +0200
Subject: [PATCH 02/21] remove background of the guilabel

---
 .../assets/styles/content/_spans.scss            | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
index aeeabc269e..2db8129b57 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
@@ -4,11 +4,25 @@
 
 span.guilabel {
   border: 1px solid var(--pst-color-info);
-  background: var(--pst-color-info);
+  //background: var(--pst-color-info);
   color: var(--pst-color-info);
   font-size: 80%;
   font-weight: 700;
   border-radius: 4px;
   padding: 2.4px 6px;
   margin: auto 2px;
+  position: relative;
+
+  // This is a hack to control the opacity for admonitions with our color variables
+  // ref: https://stackoverflow.com/a/56951626/6734243
+  &:before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: var(--pst-color-info);
+    opacity: 0.1;
+  }
 }

From fd9f4b69ab25f890274888b8a15551ba1b534c45 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Mon, 9 May 2022 23:27:22 +0200
Subject: [PATCH 03/21] remove navbar shadow in dark theme

---
 src/pydata_sphinx_theme/assets/styles/sections/_header.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
index 66e28c0f95..e20ee75d36 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
@@ -55,7 +55,7 @@
 .navbar-light {
   // Overrides bootstrap
   background: var(--pst-color-on-background) !important;
-  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.11);
+  box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow); //rgba(0, 0, 0, 0.11);
 
   .navbar-nav {
     li a.nav-link {

From 71cf75151a68543efe5144b69d55f2c50ab08f16 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Mon, 9 May 2022 23:31:02 +0200
Subject: [PATCH 04/21] remove shadow in versionmodified

---
 .../assets/styles/components/_versionmodified.scss            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
index 38fb683227..c3afa8abac 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
@@ -9,8 +9,8 @@ div.deprecated {
   border-left: 0.2rem solid;
   border-color: var(--pst-color-info);
   border-radius: 0.2rem;
-  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05),
-    0 0 0.0625rem rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.2rem 0.5rem var(--pst-color-shadow),
+    0 0 0.0625rem var(--pst-color-shadow);
   transition: color 250ms, background-color 250ms, border-color 250ms;
   position: relative;
 

From a8d92be7b0e1a54e203c4a696db9e045005d1e0b Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Mon, 9 May 2022 23:51:01 +0200
Subject: [PATCH 05/21] use target color for viewcode background

---
 .../assets/styles/base/_color.scss            | 40 +++++++------------
 .../styles/components/_switcher-theme.scss    |  1 -
 .../assets/styles/content/_api.scss           | 19 +++++++--
 .../assets/styles/content/_spans.scss         |  1 -
 4 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/base/_color.scss b/src/pydata_sphinx_theme/assets/styles/base/_color.scss
index f74df1e386..ca3d8b0137 100644
--- a/src/pydata_sphinx_theme/assets/styles/base/_color.scss
+++ b/src/pydata_sphinx_theme/assets/styles/base/_color.scss
@@ -5,10 +5,9 @@
 */
 html[data-theme="light"] {
   /*****************************************************************************
-  * colors
+  * main colors
   */
 
-  // main colors
   --pst-color-primary: rgb(19, 6, 84);
   --pst-color-success: rgb(40, 167, 69);
   --pst-color-info: rgb(0, 123, 255);
@@ -23,24 +22,19 @@ html[data-theme="light"] {
   --pst-color-border: rgb(201, 201, 201);
   --pst-color-shadow: rgb(216, 216, 216);
 
+  /*****************************************************************************
+  * extra
+  */
+
   // links
   --pst-color-link: rgb(0, 91, 129);
   --pst-color-link-hover: rgb(227, 46, 0);
-  --pst-color-target: rgb(251, 229, 78);
 
   // inline code
   --pst-color-inline-code: rgb(232, 62, 140);
 
-  // targeted viewcode
-  --pst-color-viewcode-target-border: rgb(170, 204, 153);
-  --pst-color-viewcode-target-background: rgb(244, 222, 191);
-
-  // alert
-  // higher contrast of links in info boxes
-  --pst-color-alert-link: rgb(232, 62, 140);
-
-  // blockquote
-  --pst-color-blockquote-border: rgb(221, 221, 221);
+  // targeted content
+  --pst-color-target: rgb(251, 229, 78);
 }
 
 /*******************************************************************************
@@ -50,10 +44,9 @@ html[data-theme="light"] {
 */
 html[data-theme="dark"] {
   /*****************************************************************************
-  * colors
+  * main colors
   */
 
-  // main colors
   --pst-color-primary: rgb(76, 145, 219);
   --pst-color-success: rgb(72, 135, 87);
   --pst-color-info: rgb(64, 125, 191);
@@ -68,24 +61,19 @@ html[data-theme="dark"] {
   --pst-color-border: rgb(192, 192, 192);
   --pst-color-shadow: var(--pst-color-background);
 
+  /*****************************************************************************
+  * extra
+  */
+
   // links
   --pst-color-link: var(--pst-color-primary);
   --pst-color-link-hover: rgb(170, 103, 196);
-  --pst-color-target: rgb(71, 39, 0);
 
   // inline code
   --pst-color-inline-code: rgb(221, 158, 194);
 
-  // targeted viewcode
-  --pst-color-viewcode-target-border: rgb(170, 204, 153);
-  --pst-color-viewcode-target-background: rgb(35, 55, 83);
-
-  // alert
-  // higher contrast of links in info boxes
-  --pst-color-alert-link: rgb(232, 62, 140);
-
-  // blockquote
-  --pst-color-blockquote-border: rgb(117, 117, 117);
+  // targeted content
+  --pst-color-target: rgb(71, 39, 0);
 
   // specific brightness applied on images
   img {
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
index a647698a35..1463cf7b00 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
@@ -9,7 +9,6 @@
   }
 
   &:hover {
-    border-color: var(--pst-color-on-background);
     background-color: var(--pst-color-primary);
 
     a {
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_api.scss b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
index 2bb20f649e..a77f8617e6 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_api.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
@@ -99,7 +99,20 @@ span.highlighted {
 }
 
 .viewcode-block:target {
-  background-color: var(--pst-color-viewcode-target-background);
-  border-top: 1px solid var(--pst-color-viewcode-target-border);
-  border-bottom: 1px solid var(--pst-color-viewcode-target-border);
+  border-top: 1px solid var(--pst-color-border);
+  border-bottom: 1px solid var(--pst-color-border);
+  position: relative;
+
+  // This is a hack to control the opacity for admonitions with our color variables
+  // ref: https://stackoverflow.com/a/56951626/6734243
+  &:before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: var(--pst-color-target);
+    opacity: 0.1;
+  }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
index 2db8129b57..82a6d2a129 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
@@ -4,7 +4,6 @@
 
 span.guilabel {
   border: 1px solid var(--pst-color-info);
-  //background: var(--pst-color-info);
   color: var(--pst-color-info);
   font-size: 80%;
   font-weight: 700;

From 408dfa36b9d25bce30721e80d4f993d6c6a698b9 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Tue, 10 May 2022 00:20:03 +0200
Subject: [PATCH 06/21] change target opacity

---
 src/pydata_sphinx_theme/assets/styles/content/_api.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/content/_api.scss b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
index a77f8617e6..719e5f1e1d 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_api.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
@@ -113,6 +113,6 @@ span.highlighted {
     left: 0;
     top: 0;
     background-color: var(--pst-color-target);
-    opacity: 0.1;
+    opacity: 0.5;
   }
 }

From 99b11d306b5c01fe9eceb4402a59cb524693e556 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Tue, 10 May 2022 00:33:51 +0200
Subject: [PATCH 07/21] change the order of the viewcode target background

---
 src/pydata_sphinx_theme/assets/styles/content/_api.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/content/_api.scss b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
index 719e5f1e1d..3596dbc3a9 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_api.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
@@ -105,7 +105,7 @@ span.highlighted {
 
   // This is a hack to control the opacity for admonitions with our color variables
   // ref: https://stackoverflow.com/a/56951626/6734243
-  &:before {
+  &:first-child:before {
     content: "";
     width: 100%;
     height: 100%;
@@ -113,6 +113,6 @@ span.highlighted {
     left: 0;
     top: 0;
     background-color: var(--pst-color-target);
-    opacity: 0.5;
+    opacity: 0.3;
   }
 }

From ae3b1c44f00e3d7b181c5ff376ce3750a901ed15 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Tue, 10 May 2022 00:39:54 +0200
Subject: [PATCH 08/21] set admonition background

---
 src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
index 2f724bd4d8..53680a6632 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
@@ -12,7 +12,7 @@ div.admonition,
   box-shadow: 0 0.2rem 0.5rem var(--pst-color-shadow),
     0 0 0.0625rem var(--pst-color-shadow);
   transition: color 250ms, background-color 250ms, border-color 250ms;
-  background-color: var(--pst-color-surface);
+  background-color: var(--pst-color-on-background);
 
   // Last item should have no spacing since we'll control that w/ padding
   *:last-child {

From 3fd40b99138400929fa5180cd2b89be6d98e235b Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Tue, 10 May 2022 00:40:59 +0200
Subject: [PATCH 09/21] reset viewcode color

---
 src/pydata_sphinx_theme/assets/styles/content/_api.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/content/_api.scss b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
index 3596dbc3a9..9f4c948ec6 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_api.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
@@ -105,7 +105,7 @@ span.highlighted {
 
   // This is a hack to control the opacity for admonitions with our color variables
   // ref: https://stackoverflow.com/a/56951626/6734243
-  &:first-child:before {
+  &:before {
     content: "";
     width: 100%;
     height: 100%;

From 5d15a48ba1fc4f8e0aaf70366e9df89968815c77 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Tue, 10 May 2022 20:27:04 +0200
Subject: [PATCH 10/21] explain the depth variables

---
 .../assets/styles/base/_color.scss            | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/base/_color.scss b/src/pydata_sphinx_theme/assets/styles/base/_color.scss
index ca3d8b0137..4515a9b4e4 100644
--- a/src/pydata_sphinx_theme/assets/styles/base/_color.scss
+++ b/src/pydata_sphinx_theme/assets/styles/base/_color.scss
@@ -7,7 +7,6 @@ html[data-theme="light"] {
   /*****************************************************************************
   * main colors
   */
-
   --pst-color-primary: rgb(19, 6, 84);
   --pst-color-success: rgb(40, 167, 69);
   --pst-color-info: rgb(0, 123, 255);
@@ -15,12 +14,21 @@ html[data-theme="light"] {
   --pst-color-danger: rgb(220, 53, 69);
   --pst-color-text-base: rgb(51, 51, 51);
   --pst-color-text-muted: rgb(77, 77, 77);
+  --pst-color-border: rgb(201, 201, 201);
+  --pst-color-shadow: rgb(216, 216, 216);
+
+  /*****************************************************************************
+  * depth colors
+  *
+  * background: the more in depth color
+  * on-background: the object directly set on the background, use of shadows in light theme
+  * surface: object set on the background (without shadows)
+  * on_surface: object set on surface object (without shadows)
+  */
   --pst-color-background: rgb(255, 255, 255);
   --pst-color-on-background: rgb(255, 255, 255);
   --pst-color-surface: rgb(240, 240, 240);
   --pst-color-on-surface: rgb(255, 255, 238);
-  --pst-color-border: rgb(201, 201, 201);
-  --pst-color-shadow: rgb(216, 216, 216);
 
   /*****************************************************************************
   * extra
@@ -46,7 +54,6 @@ html[data-theme="dark"] {
   /*****************************************************************************
   * main colors
   */
-
   --pst-color-primary: rgb(76, 145, 219);
   --pst-color-success: rgb(72, 135, 87);
   --pst-color-info: rgb(64, 125, 191);
@@ -54,12 +61,21 @@ html[data-theme="dark"] {
   --pst-color-danger: rgb(203, 70, 83);
   --pst-color-text-base: rgb(201, 209, 217);
   --pst-color-text-muted: rgb(192, 192, 192);
+  --pst-color-border: rgb(192, 192, 192);
+  --pst-color-shadow: var(--pst-color-background);
+
+  /*****************************************************************************
+  * depth colors
+  *
+  * background: the more in depth color
+  * on-background: the object directly set on the background, use of a light grey in dark theme
+  * surface: object set on the background (without shadows)
+  * on_surface: object set on surface object (without shadows)
+  */
   --pst-color-background: rgb(18, 18, 18);
   --pst-color-on-background: rgb(22, 22, 22);
   --pst-color-surface: rgb(22, 22, 22);
   --pst-color-on-surface: rgb(55, 55, 55);
-  --pst-color-border: rgb(192, 192, 192);
-  --pst-color-shadow: var(--pst-color-background);
 
   /*****************************************************************************
   * extra

From 4b3a0ed31a34a677e809e1311e2327f49bc79619 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Tue, 10 May 2022 20:45:19 +0200
Subject: [PATCH 11/21] lighten the depth color in dark theme

---
 src/pydata_sphinx_theme/assets/styles/base/_color.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/base/_color.scss b/src/pydata_sphinx_theme/assets/styles/base/_color.scss
index 4515a9b4e4..967e25841b 100644
--- a/src/pydata_sphinx_theme/assets/styles/base/_color.scss
+++ b/src/pydata_sphinx_theme/assets/styles/base/_color.scss
@@ -73,8 +73,8 @@ html[data-theme="dark"] {
   * on_surface: object set on surface object (without shadows)
   */
   --pst-color-background: rgb(18, 18, 18);
-  --pst-color-on-background: rgb(22, 22, 22);
-  --pst-color-surface: rgb(22, 22, 22);
+  --pst-color-on-background: rgb(30, 30, 30);
+  --pst-color-surface: rgb(41, 41, 41);
   --pst-color-on-surface: rgb(55, 55, 55);
 
   /*****************************************************************************

From f002b571d15e404b33d5dc3251a195f96cae960c Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Tue, 10 May 2022 20:51:02 +0200
Subject: [PATCH 12/21] use a background for version directive

---
 .../assets/styles/components/_versionmodified.scss               | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
index c3afa8abac..b0babfc369 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
@@ -13,6 +13,7 @@ div.deprecated {
     0 0 0.0625rem var(--pst-color-shadow);
   transition: color 250ms, background-color 250ms, border-color 250ms;
   position: relative;
+  background-color: var(--pst-color-on-background);
 
   > p {
     margin-bottom: 0.6rem;

From ef2ec137571566479c347b0be635d9d7d80ebcc2 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Tue, 10 May 2022 21:16:49 +0200
Subject: [PATCH 13/21] move the target background object

---
 .../assets/styles/components/_versionmodified.scss          | 2 +-
 src/pydata_sphinx_theme/assets/styles/content/_api.scss     | 6 +++---
 src/pydata_sphinx_theme/assets/styles/content/_spans.scss   | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
index b0babfc369..ba4fbee3ea 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
@@ -19,7 +19,7 @@ div.deprecated {
     margin-bottom: 0.6rem;
     margin-top: 0.6rem;
 
-    // This is a hack to control the opacity for admonitions with our color variables
+    // This is a hack to control the opacity for verson tags with our color variables
     // ref: https://stackoverflow.com/a/56951626/6734243
     &:before {
       content: "";
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_api.scss b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
index 9f4c948ec6..6eabf252df 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_api.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
@@ -103,9 +103,9 @@ span.highlighted {
   border-bottom: 1px solid var(--pst-color-border);
   position: relative;
 
-  // This is a hack to control the opacity for admonitions with our color variables
+  // This is a hack to control the opacity for viewcode with our color variables
   // ref: https://stackoverflow.com/a/56951626/6734243
-  &:before {
+  .viewcode-back:before {
     content: "";
     width: 100%;
     height: 100%;
@@ -113,6 +113,6 @@ span.highlighted {
     left: 0;
     top: 0;
     background-color: var(--pst-color-target);
-    opacity: 0.3;
+    opacity: 0.7;
   }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
index 82a6d2a129..39a40d9733 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
@@ -12,7 +12,7 @@ span.guilabel {
   margin: auto 2px;
   position: relative;
 
-  // This is a hack to control the opacity for admonitions with our color variables
+  // This is a hack to control the opacity for guilabel with our color variables
   // ref: https://stackoverflow.com/a/56951626/6734243
   &:before {
     content: "";

From 6dfabf4a803b1d7c0a1be865e5dc59dfeac339f3 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Tue, 10 May 2022 22:22:10 +0200
Subject: [PATCH 14/21] use background-color for viewcode target

---
 .../assets/styles/content/_api.scss                | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/content/_api.scss b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
index 6eabf252df..9453505755 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_api.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
@@ -102,17 +102,5 @@ span.highlighted {
   border-top: 1px solid var(--pst-color-border);
   border-bottom: 1px solid var(--pst-color-border);
   position: relative;
-
-  // This is a hack to control the opacity for viewcode with our color variables
-  // ref: https://stackoverflow.com/a/56951626/6734243
-  .viewcode-back:before {
-    content: "";
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background-color: var(--pst-color-target);
-    opacity: 0.7;
-  }
+  background-color: var(--pst-color-target);
 }

From 0331bd2e8bebd2f4ece2c423a3264d794e5c6e25 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Tue, 10 May 2022 22:24:36 +0200
Subject: [PATCH 15/21] remove the never used admonition transition

---
 src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
index 53680a6632..0b023a3662 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
@@ -11,7 +11,6 @@ div.admonition,
   border-radius: 0.2rem;
   box-shadow: 0 0.2rem 0.5rem var(--pst-color-shadow),
     0 0 0.0625rem var(--pst-color-shadow);
-  transition: color 250ms, background-color 250ms, border-color 250ms;
   background-color: var(--pst-color-on-background);
 
   // Last item should have no spacing since we'll control that w/ padding

From 475b2be48602561caa5da778772a7e05f0f5417d Mon Sep 17 00:00:00 2001
From: Rambaud Pierrick <12rambau@users.noreply.github.com>
Date: Wed, 11 May 2022 14:08:14 +0200
Subject: [PATCH 16/21] use the new variable name

---
 src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
index a443016800..8acab804f1 100644
--- a/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
+++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
@@ -11,7 +11,7 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--pst-color-deactivate);
+    background: var(--pst-color-text-muted);
     border-radius: 0.25rem;
   }
 

From 705ec9390897676e06e4af82c0c729aac1fccb4c Mon Sep 17 00:00:00 2001
From: Rambaud Pierrick <12rambau@users.noreply.github.com>
Date: Tue, 17 May 2022 09:12:14 +0200
Subject: [PATCH 17/21] update colors and variable customization docs

---
 docs/user_guide/customizing.rst | 37 +++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/docs/user_guide/customizing.rst b/docs/user_guide/customizing.rst
index e0a2f48f3e..3703c4b93c 100644
--- a/docs/user_guide/customizing.rst
+++ b/docs/user_guide/customizing.rst
@@ -76,8 +76,6 @@ For example to define a different background color for both the light and dark t
         background: black;
     }
 
-A complete list of the used colors for this theme can be found in the `pydata default css colors file <pydata-css-colors_>`__.
-
 Define custom JavaScript to react to theme changes
 --------------------------------------------------
 
@@ -115,8 +113,10 @@ This theme defines several `CSS variables <css-variable-help_>`_ that can be
 used to quickly control behavior across your documentation.
 
 These are based on top of the basic `Bootstrap CSS variables <https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables>`_
-extended with some theme specific variables. An overview of all variables and
-every default is defined in `the pydata default CSS variables file <pydata-css-variables_>`_.
+extended with some theme specific variables.
+
+base variables
+--------------
 
 In order to change a variable, follow these steps:
 
@@ -124,7 +124,7 @@ In order to change a variable, follow these steps:
 2. Underneath a ``:root`` section, add the variables you wish to update. For example, to update
    the base font size, you might add this to ``custom.css``:
 
-   .. code-block:: none
+   .. code-block:: css
 
        :root {
            --pst-font-size-base: 17px;
@@ -142,6 +142,31 @@ For a complete list of the theme variables that you may override, see the
 
 .. literalinclude:: ../../src/pydata_sphinx_theme/theme/pydata_sphinx_theme/static/styles/theme.css
   :language: CSS
+  
+color variables
+---------------
+
+In order to change a color variable and customize the rendering of the site, you'll need to update
+the color behaviours in both light and dark theme. 
+    
+Underneath 2 ``html`` sections, one with ``light`` and the other with ``dark`` option, set your new color to overwrite. 
+For example, to update the primary color, you might add this to ``custom.css``:
+
+.. code-block:: css
+
+    html[data-theme="light"] {
+        --pst-color-primary: black;
+    }
+    
+    html[data-theme="dark"] {
+        --pst-color-primary: white;
+    }
+    
+For a complete list of the theme colors that you may override, see the
+`color variables defaults CSS file <pydata-css-colors_>`_:
+
+.. literalinclude:: ../../src/pydata_sphinx_theme/assets/styles/base/_color.scss
+  :language: CSS
 
 Change footer display
 =====================
@@ -224,7 +249,7 @@ The default body and header fonts can be changed as follows:
     before waiting for the CSS to be parsed, but should be used with care.
 
 .. _pydata-css-variables: https://github.com/pydata/pydata-sphinx-theme/blob/master/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/static/styles/theme.css
-.. _pydata-css-colors: https://github.com/pydata/pydata-sphinx-theme/blob/master/src/pydata_sphinx_theme/assets/style/color.scss
+.. _pydata-css-colors: https://github.com/pydata/pydata-sphinx-theme/blob/master/src/pydata_sphinx_theme/assets/styles/base/_color.scss
 .. _css-variable-help: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 
 .. meta::

From 12c9d040e36c3786dd061f082fc386c7459a82cd Mon Sep 17 00:00:00 2001
From: Rambaud Pierrick <12rambau@users.noreply.github.com>
Date: Tue, 17 May 2022 09:54:04 +0200
Subject: [PATCH 18/21] correct sphinx warnings (#5)

---
 docs/user_guide/customizing.rst | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/user_guide/customizing.rst b/docs/user_guide/customizing.rst
index 3703c4b93c..1ff686b0e7 100644
--- a/docs/user_guide/customizing.rst
+++ b/docs/user_guide/customizing.rst
@@ -110,7 +110,7 @@ CSS Theme variables
 ===================
 
 This theme defines several `CSS variables <css-variable-help_>`_ that can be
-used to quickly control behavior across your documentation.
+used to quickly control behavior and display across your documentation.
 
 These are based on top of the basic `Bootstrap CSS variables <https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables>`_
 extended with some theme specific variables.
@@ -142,14 +142,14 @@ For a complete list of the theme variables that you may override, see the
 
 .. literalinclude:: ../../src/pydata_sphinx_theme/theme/pydata_sphinx_theme/static/styles/theme.css
   :language: CSS
-  
+
 color variables
 ---------------
 
 In order to change a color variable and customize the rendering of the site, you'll need to update
-the color behaviours in both light and dark theme. 
-    
-Underneath 2 ``html`` sections, one with ``light`` and the other with ``dark`` option, set your new color to overwrite. 
+the color behaviours in both light and dark theme.
+
+Underneath 2 ``html`` sections, one with ``light`` and the other with ``dark`` option, set your new color to overwrite.
 For example, to update the primary color, you might add this to ``custom.css``:
 
 .. code-block:: css
@@ -157,16 +157,16 @@ For example, to update the primary color, you might add this to ``custom.css``:
     html[data-theme="light"] {
         --pst-color-primary: black;
     }
-    
+
     html[data-theme="dark"] {
         --pst-color-primary: white;
     }
-    
+
 For a complete list of the theme colors that you may override, see the
 `color variables defaults CSS file <pydata-css-colors_>`_:
 
 .. literalinclude:: ../../src/pydata_sphinx_theme/assets/styles/base/_color.scss
-  :language: CSS
+  :language: scss
 
 Change footer display
 =====================

From a59e17337ed3ebbd7b74849b929b14609c35650a Mon Sep 17 00:00:00 2001
From: Rambaud Pierrick <12rambau@users.noreply.github.com>
Date: Tue, 17 May 2022 10:00:27 +0200
Subject: [PATCH 19/21] wrong code highlight

---
 docs/user_guide/customizing.rst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/user_guide/customizing.rst b/docs/user_guide/customizing.rst
index 1ff686b0e7..eb439e7a33 100644
--- a/docs/user_guide/customizing.rst
+++ b/docs/user_guide/customizing.rst
@@ -27,7 +27,7 @@ To add a custom stylesheet, follow these steps:
 1. **Create a CSS stylesheet** in ``_static/css/custom.css``, and add the CSS rules you wish.
 2. **Attach the stylesheet to your Sphinx build**. Add the following to ``conf.py``
 
-   .. code-block:: rst
+   .. code-block:: python
 
        html_static_path = ['_static']
 

From afc58a2a4d950e9c095cc7ca51e6edc9bfbdb684 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@gmail.com>
Date: Tue, 17 May 2022 20:49:08 +0200
Subject: [PATCH 20/21] Docs updates

---
 docs/user_guide/customizing.rst | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/user_guide/customizing.rst b/docs/user_guide/customizing.rst
index eb439e7a33..718e2c0d02 100644
--- a/docs/user_guide/customizing.rst
+++ b/docs/user_guide/customizing.rst
@@ -143,14 +143,14 @@ For a complete list of the theme variables that you may override, see the
 .. literalinclude:: ../../src/pydata_sphinx_theme/theme/pydata_sphinx_theme/static/styles/theme.css
   :language: CSS
 
-color variables
+Color variables
 ---------------
 
-In order to change a color variable and customize the rendering of the site, you'll need to update
-the color behaviours in both light and dark theme.
+Each color variable has two values, one corresponding to the "light" and one for the "dark" theme.
+These are used throughout many of the theme elements to define text color, background color, etc.
 
-Underneath 2 ``html`` sections, one with ``light`` and the other with ``dark`` option, set your new color to overwrite.
-For example, to update the primary color, you might add this to ``custom.css``:
+You can control the colors used for these variables for each theme by
+:ref:`adding a custom CSS stylesheet <custom-css>` and adding a structure like so:
 
 .. code-block:: css
 

From 3a07b3b046169b701826fafe96c23df0cfb1b181 Mon Sep 17 00:00:00 2001
From: Rambaud Pierrick <12rambau@users.noreply.github.com>
Date: Wed, 25 May 2022 18:42:02 +0200
Subject: [PATCH 21/21] overwrite header settings from panel lib

---
 src/pydata_sphinx_theme/assets/styles/sections/_header.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
index cae6c05e28..ff5755c65f 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
@@ -40,7 +40,7 @@
 
 // If we want the shadow to only point downward in the future, set
 // box-shadow to: 0 0.125rem 0.25rem -0.125rem rgba(0, 0, 0, 0.11);
-.navbar-light {
+.bd-header.navbar-light#navbar-main {
   // Overrides bootstrap
   background: var(--pst-color-on-background) !important;
   box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow); //rgba(0, 0, 0, 0.11);