Enable dark mode

src/qiskit_sphinx_theme/assets/styles/_admonitions.scss

@@ -17,24 +17,18 @@
 // See https://carbondesignsystem.com/guidelines/color/usage and
 // https://carbondesignsystem.com/components/notification/style/ for where these colors
 // come from.
-$info-background: #edf5ff;
-$info-border: #0043ce;
-$warning-background: #fcf4d6;
-$warning-border: #f1c21b;
-$error-background: #fff1f1;
-$error-border: #da1e28;
 
 .topic {
-  border: 1px solid $info-background;
+  border: 1px solid var(--qiskit-color-info-background);
 }
 
 p.topic-title {
-  background-color: $info-background;
+  background-color: var(--qiskit-color-info-background);
 
   &::before {
     -webkit-mask-image: var(--icon-info);
     mask-image: var(--icon-info);
-    background-color: $info-border;
+    background-color: var(--qiskit-color-info-border);
   }
 }
 
@@ -70,14 +64,14 @@ p.topic-title {
 .admonition.caution,
 .admonition.important,
 .admonition.warning {
-  border-color: $warning-background;
+  border-color: var(--qiskit-color-warning-background);
 
   &::before {
-    background: $warning-border;
+    background: var(--qiskit-color-warning-border);
   }
 
   > .admonition-title {
-    background-color: $warning-background;
+    background-color: var(--qiskit-color-warning-background);
   }
 
   > .admonition-title::before {
@@ -90,53 +84,53 @@ p.topic-title {
     content: var(--icon-warning);
     -webkit-mask-image: unset;
     mask-image: unset;
-    background-color: $warning-background;
+    background-color: var(--qiskit-color-warning-background);
   }
 }
 
 .admonition.danger,
 .admonition.error {
-  border-color: $error-background;
+  border-color: var(--qiskit-color-error-background);
 
   &::before {
-    background: $error-border;
+    background: var(--qiskit-color-error-border);
   }
 
   > .admonition-title {
-    background-color: $error-background;
+    background-color: var(--qiskit-color-error-background);
   }
 
   > .admonition-title::before {
     -webkit-mask-image: var(--icon-failure);
     mask-image: var(--icon-failure);
-    background-color: $error-border;
+    background-color: var(--qiskit-color-error-border);
   }
 }
 
 .admonition,
 .admonition.hint,
 .admonition.note,
 .admonition.tip {
-  border-color: $info-background;
+  border-color: var(--qiskit-color-info-background);
 
   &::before {
-    background: $info-border;
+    background: var(--qiskit-color-info-border);
   }
 
   > .admonition-title {
-    background-color: $info-background;
+    background-color: var(--qiskit-color-info-background);
   }
 
   > .admonition-title::before {
     -webkit-mask-image: var(--icon-info);
     mask-image: var(--icon-info);
-    background-color: $info-border;
+    background-color: var(--qiskit-color-info-border);
   }
 }
 
 // Style deprecations like a warning.
 div.deprecated {
-  border-color: $warning-background;
+  border-color: var(--qiskit-color-warning-background);
   border-left: 0;
   border-right-style: solid;
   border-right-width: 1px;
@@ -156,7 +150,7 @@ div.deprecated {
 }
 
 div.deprecated::before {
-  background: $warning-border;
+  background: var(--qiskit-color-warning-border);
   content: "";
   position: absolute;
   top: 0;
@@ -166,7 +160,7 @@ div.deprecated::before {
 }
 
 span.deprecated {
-  background-color: $warning-background;
+  background-color: var(--qiskit-color-warning-background);
   font-size: var(--admonition-title-font-size);
   line-height: 1.3;
   margin: 0 -0.5rem 0.25rem -0.55rem;

src/qiskit_sphinx_theme/assets/styles/_colors.scss

@@ -1,14 +1,59 @@
-body {
-    // Define the Carbon color schemes from
-    // https://github.com/carbon-design-system/carbon/blob/v10/packages/colors/src/colors.js
-    //
-    // Projects can override `--color-brand-primary` to whatever they want.
-    --qiskit-color-purple: #6929C4;  // purple70
-
-    // Furo normally distinguishes between these two variables, but
-    // we want them to be the same.
-    --color-brand-content: var(--color-brand-primary);
-
-    // For the Qiskit theme, use purple.
-    --color-brand-primary: var(--qiskit-color-purple);
-  }
+/* This code is a Qiskit project.
+ *
+ * (C) Copyright IBM 2024.
+ *
+ * This code is licensed under the Apache License, Version 2.0. You may
+ * obtain a copy of this license in the LICENSE.txt file in the root directory
+ * of this source tree or at http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Any modifications or derivative works of this code must retain this
+ * copyright notice, and modified files need to carry a notice indicating
+ * that they have been altered from the originals.
+ */
+
+@mixin colors {
+  // Define the Carbon color schemes from
+  // https://github.com/carbon-design-system/carbon/blob/v10/packages/colors/src/colors.js
+  //
+  // Projects can override `--color-brand-primary` to whatever they want.
+  --qiskit-color-purple: #6929c4; // purple70
+
+  // Furo normally distinguishes between these two variables, but
+  // we want them to be the same.
+  --color-brand-content: var(--color-brand-primary);
+
+  // For the Qiskit theme, use purple.
+  --color-brand-primary: var(--qiskit-color-purple);
+
+  // Use the same table header color previously used on qiskit.org.
+  --color-table-header-background: #dde1e6;
+
+  // Use gray for the top-level links to be more muted.
+  --color-sidebar-link-text--top-level: var(--color-sidebar-link-text);
+
+  // Turn off gradient for hover.
+  --color-sidebar-item-background--hover: var(--color-background-hover);
+
+  // Colors for admonitions
+  --qiskit-color-info-background: #edf5ff; //blue10
+  --qiskit-color-info-border: #0043ce; // blue70
+  --qiskit-color-warning-background: #fcf4d6; // yellow10
+  --qiskit-color-warning-border: #f1c21b; // yellow30
+  --qiskit-color-error-background: #fff1f1; // red10
+  --qiskit-color-error-border: #da1e28; // red60
+}
+
+@mixin colors-dark {
+  --qiskit-color-purple: #d4bbff; // purple30
+  --color-brand-content: var(--color-brand-primary);
+  --color-brand-primary: var(--qiskit-color-purple);
+  --color-table-header-background: var(--color-background-secondary);
+  --color-sidebar-link-text--top-level: var(--color-sidebar-link-text);
+  --color-sidebar-item-background--hover: var(--color-background-hover);
+  --qiskit-color-info-background: #002d9c; // blue80
+  --qiskit-color-info-border: #78a9ff; // blue40
+  --qiskit-color-warning-background: #684e00; // yellow70
+  --qiskit-color-warning-border: #f1c21b; // yellow30
+  --qiskit-color-error-background: #750e13; // red80
+  --qiskit-color-error-border: #fa4d56; // red50
+}

src/qiskit_sphinx_theme/assets/styles/_left-sidebar.scss

@@ -15,13 +15,6 @@
 // Colors
 // ------------------------------------------------------------------------------
 
-body {
-  // Use gray for the top-level links to be more muted.
-  --color-sidebar-link-text--top-level: var(--color-sidebar-link-text);
-  // Turn off gradient for hover.
-  --color-sidebar-item-background--hover: #efeff4;
-}
-
 // Even though we override --color-sidebar-link--top-level to be a more muted look, we change
 // the currently selected page to be the brand color to make it more obvious.
 .sidebar-tree .current-page > .reference {
@@ -220,6 +213,10 @@ body {
   font-size: var(--sidebar-item-font-size);
   margin-bottom: var(--sidebar-item-spacing-vertical);
   margin-top: 0;
+
+  .icon {
+    color: var(--color-sidebar-link-text--top-level)
+  }
 }
 
 .qiskit-previous-releases-header-container p {

src/qiskit_sphinx_theme/assets/styles/_tables.scss

@@ -11,11 +11,6 @@
  * that they have been altered from the originals.
  */
 
-body {
-  // Use the same table header color previously used on qiskit.org.
-  --color-table-header-background: #dde1e6;
-}
-
 table.docutils {
   // Add a border to the top of the table so that tables without headers have a border.
   //

src/qiskit_sphinx_theme/assets/styles/_theme.scss

@@ -0,0 +1,49 @@
+/* This code is a Qiskit project.
+ *
+ * (C) Copyright IBM 2024.
+ *
+ * This code is licensed under the Apache License, Version 2.0. You may
+ * obtain a copy of this license in the LICENSE.txt file in the root directory
+ * of this source tree or at http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Any modifications or derivative works of this code must retain this
+ * copyright notice, and modified files need to carry a notice indicating
+ * that they have been altered from the originals.
+ */
+
+// Adapted from furo/assets/styles/base/_theme.sass
+
+@import "colors";
+
+body {
+  @include colors;
+}
+
+// Ignore dark-mode hints if print media.
+@media not print {
+  // Enable dark-mode, if requested.
+  body[data-theme="dark"] {
+    @include colors-dark;
+
+    html & .only-light {
+      display: none !important;
+    }
+    .only-dark {
+      display: block !important;
+    }
+  }
+
+  // Enable dark mode, unless explicitly told to avoid.
+  @media (prefers-color-scheme: dark) {
+    body:not([data-theme="light"]) {
+      @include colors-dark;
+
+      html & .only-light {
+        display: none !important;
+      }
+      .only-dark {
+        display: block !important;
+      }
+    }
+  }
+}

src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss

@@ -13,7 +13,6 @@
 
 @import "admonitions";
 @import "api";
-@import "colors";
 @import "custom-directives";
 @import "drop-shadows";
 @import "icons";
@@ -22,15 +21,10 @@
 @import "scaffold";
 @import "sphinx-extensions";
 @import "tables";
+@import "theme";
 @import "typography";
 
 // Turn off scroll animation for anchor links: https://github.com/pradyunsg/furo/discussions/384
 html {
   scroll-behavior: auto;
 }
-
-// Disable dark mode for now, but probably re-enable in
-// https://github.com/Qiskit/qiskit_sphinx_theme/issues/575.
-.theme-toggle-container {
-  display: none;
-}

src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/base.html

@@ -95,9 +95,7 @@
   <body>
     {% block body %}
     <script>
-      {#- QISKIT CHANGE: start. Force light mode. -#}
-      document.body.dataset.theme = "light";
-      {#- QISKIT CHANGE: end. -#}
+      document.body.dataset.theme = localStorage.getItem("theme") || "auto";
     </script>
     {% endblock %}