diff --git a/src/qiskit_sphinx_theme/assets/styles/_admonitions.scss b/src/qiskit_sphinx_theme/assets/styles/_admonitions.scss
index 715dbb79..2e3dbae4 100644
--- a/src/qiskit_sphinx_theme/assets/styles/_admonitions.scss
+++ b/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,26 +84,26 @@ 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);
   }
 }
 
@@ -117,26 +111,26 @@ p.topic-title {
 .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;
diff --git a/src/qiskit_sphinx_theme/assets/styles/_colors.scss b/src/qiskit_sphinx_theme/assets/styles/_colors.scss
index 8a83060f..0d2322b5 100644
--- a/src/qiskit_sphinx_theme/assets/styles/_colors.scss
+++ b/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
+}
diff --git a/src/qiskit_sphinx_theme/assets/styles/_left-sidebar.scss b/src/qiskit_sphinx_theme/assets/styles/_left-sidebar.scss
index 3628bef7..622d62e0 100644
--- a/src/qiskit_sphinx_theme/assets/styles/_left-sidebar.scss
+++ b/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 {
diff --git a/src/qiskit_sphinx_theme/assets/styles/_tables.scss b/src/qiskit_sphinx_theme/assets/styles/_tables.scss
index 1a69f95e..7482de7b 100644
--- a/src/qiskit_sphinx_theme/assets/styles/_tables.scss
+++ b/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.
   //
diff --git a/src/qiskit_sphinx_theme/assets/styles/_theme.scss b/src/qiskit_sphinx_theme/assets/styles/_theme.scss
new file mode 100644
index 00000000..01438df4
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss b/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss
index 09ea63cf..6b2dfd9a 100644
--- a/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss
+++ b/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;
-}
diff --git a/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/base.html b/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/base.html
index 5b673917..2d1c88f4 100644
--- a/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/base.html
+++ b/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 %}
 
diff --git a/tests/js/tests.js b/tests/js/tests.js
index 0ed07f10..2be26739 100644
--- a/tests/js/tests.js
+++ b/tests/js/tests.js
@@ -13,18 +13,20 @@
 
 import { expect, test } from "@playwright/test";
 
-import {
-  setMobile,
-  setTablet,
-  click,
-} from "./utils";
+import { click, setMobile, setTablet, toggleColorTheme } from "./utils";
 
-test.describe("top nav bar", () => {
+test.describe("top nav bar dark mode cycle", () => {
   test("uses custom page ToC icon on tablet", async ({ page }) => {
     await setTablet(page);
     await page.goto("sphinx_guide/lists.html");
     const pageToC = page.locator("div.content-icon-container");
     await expect(pageToC).toHaveScreenshot();
+    await toggleColorTheme(page);
+    await expect(pageToC).toHaveScreenshot();
+    await toggleColorTheme(page);
+    await expect(pageToC).toHaveScreenshot();
+    await toggleColorTheme(page);
+    await expect(pageToC).toHaveScreenshot();
   });
 
   test("uses custom icons on mobile", async ({ page }) => {
@@ -32,122 +34,157 @@ test.describe("top nav bar", () => {
     await page.goto("sphinx_guide/lists.html");
     const header = page.locator("header.mobile-header");
     await expect(header).toHaveScreenshot();
+    await toggleColorTheme(page);
+    await expect(header).toHaveScreenshot();
+    await toggleColorTheme(page);
+    await expect(header).toHaveScreenshot();
+    await toggleColorTheme(page);
+    await expect(header).toHaveScreenshot();
   });
 });
 
-test("right side bar is not broken by our page layout", async ({ page }) => {
-  // We intentionally use a short page to keep the screenshot shorter.
-  await page.goto("sphinx_guide/notebook.html");
-  const tocDrawer = page.locator(".toc-drawer");
-  await expect(tocDrawer).toHaveScreenshot();
-});
-
-test.describe("left side bar", () => {
-  test("renders correctly", async ({ page }) => {
-    // Go to a top-level page so that we can see how the expanded side bar looks.
-    await page.goto("apidoc/module.html");
-    const leftToC = page.locator(".sidebar-drawer");
-    await expect(leftToC).toHaveScreenshot();
-  });
-
-  test("translations are expandable", async ({ page }) => {
-    await page.goto("");
-    await click(page, "div.qiskit-translations-container i");
-    const translations = page.locator("div.qiskit-translations-container");
-    await expect(translations).toHaveScreenshot();
-  });
-
-  test("previous releases are expandable", async ({ page }) => {
-    await page.goto("");
-    await click(page, "div.qiskit-previous-releases-container i");
-    const previousReleases = page.locator(
-      "div.qiskit-previous-releases-container",
-    );
-    await expect(previousReleases).toHaveScreenshot();
-  });
-});
-
-test.describe("api docs", () => {
-  test("module page", async ({ page }) => {
-    await page.goto("apidoc/module.html");
-    const content = page.locator("div.article-container");
-    await expect(content).toHaveScreenshot();
-  });
-
-  test("class page", async ({ page }) => {
-    await page.goto("stubs/api_example.Electron.html");
-    const content = page.locator("div.article-container");
-    await expect(content).toHaveScreenshot();
-  });
-
-  test("function page", async ({ page }) => {
-    await page.goto("stubs/api_example.my_function1.html");
-    const content = page.locator("div.article-container");
-    await expect(content).toHaveScreenshot();
-  });
-
-  test("inline classes", async ({ page }) => {
-    await page.goto("apidoc/inline_classes.html");
-    const content = page.locator("div.article-container");
-    await expect(content).toHaveScreenshot();
+for (const colorScheme of ["light", "dark"]) {
+  test.describe(`${colorScheme} mode`, () => {
+    test.beforeEach(async ({ page }) => {
+      if (colorScheme === "dark") {
+        await page.goto("");
+        await toggleColorTheme(page);
+      }
+    });
+
+    test.describe("top nav bar", () => {
+      test("uses custom page ToC icon on tablet", async ({ page }) => {
+        await setTablet(page);
+        await page.goto("sphinx_guide/lists.html");
+        const pageToC = page.locator("div.content-icon-container");
+        await expect(pageToC).toHaveScreenshot();
+      });
+
+      test("uses custom icons on mobile", async ({ page }) => {
+        await setMobile(page);
+        await page.goto("sphinx_guide/lists.html");
+        const header = page.locator("header.mobile-header");
+        await expect(header).toHaveScreenshot();
+      });
+    });
+
+    test("right side bar is not broken by our page layout", async ({
+      page,
+    }) => {
+      // We intentionally use a short page to keep the screenshot shorter.
+      await page.goto("sphinx_guide/notebook.html");
+      const tocDrawer = page.locator(".toc-drawer");
+      await expect(tocDrawer).toHaveScreenshot();
+    });
+
+    test.describe("left side bar", () => {
+      test("renders correctly", async ({ page }) => {
+        // Go to a top-level page so that we can see how the expanded side bar looks.
+        await page.goto("apidoc/module.html");
+        const leftToC = page.locator(".sidebar-drawer");
+        await expect(leftToC).toHaveScreenshot();
+      });
+
+      test("translations are expandable", async ({ page }) => {
+        await page.goto("");
+        await click(page, "div.qiskit-translations-container i");
+        const translations = page.locator("div.qiskit-translations-container");
+        await expect(translations).toHaveScreenshot();
+      });
+
+      test("previous releases are expandable", async ({ page }) => {
+        await page.goto("");
+        await click(page, "div.qiskit-previous-releases-container i");
+        const previousReleases = page.locator(
+          "div.qiskit-previous-releases-container"
+        );
+        await expect(previousReleases).toHaveScreenshot();
+      });
+    });
+
+    test.describe("api docs", () => {
+      test("module page", async ({ page }) => {
+        await page.goto("apidoc/module.html");
+        const content = page.locator("div.article-container");
+        await expect(content).toHaveScreenshot();
+      });
+
+      test("class page", async ({ page }) => {
+        await page.goto("stubs/api_example.Electron.html");
+        const content = page.locator("div.article-container");
+        await expect(content).toHaveScreenshot();
+      });
+
+      test("function page", async ({ page }) => {
+        await page.goto("stubs/api_example.my_function1.html");
+        const content = page.locator("div.article-container");
+        await expect(content).toHaveScreenshot();
+      });
+
+      test("inline classes", async ({ page }) => {
+        await page.goto("apidoc/inline_classes.html");
+        const content = page.locator("div.article-container");
+        await expect(content).toHaveScreenshot();
+      });
+    });
+
+    test("tables align with qiskit", async ({ page }) => {
+      await page.goto("sphinx_guide/tables.html");
+      const gridTablesSection = page.locator("section#grid-tables");
+      await expect(gridTablesSection).toHaveScreenshot();
+    });
+
+    test("tutorials do not have purple border", async ({ page }) => {
+      await page.goto("sphinx_guide/notebook_gallery.html");
+      const tutorial = page.locator("div.nbsphinx-gallery");
+      await expect(tutorial).toHaveScreenshot();
+    });
+
+    test("admonitions use Carbon style", async ({ page }) => {
+      await page.goto("sphinx_guide/paragraph.html#admonitions");
+      const admonitions = page.locator("section#admonitions");
+      await expect(admonitions).toHaveScreenshot();
+    });
+
+    test("deprecations look like warning", async ({ page }) => {
+      await page.goto("sphinx_guide/paragraph.html#deprecation-note");
+      const deprecations = page.locator("section#deprecation-note");
+      await expect(deprecations).toHaveScreenshot();
+    });
+
+    test("Sphinx Design elements have no shadows", async ({ page }) => {
+      await page.goto("sphinx_guide/panels.html");
+      await page.locator(".sd-dropdown").first().click();
+      const pageContents = page.locator("section#panels");
+      await expect(pageContents).toHaveScreenshot();
+    });
+
+    test("Jupyter works with copybutton", async ({ page }) => {
+      // Regression test of https://github.com/Qiskit/qiskit_sphinx_theme/issues/306.
+      await page.goto("sphinx_guide/jupyter.html");
+      const pageContents = page.locator("section#jupyter");
+      await expect(pageContents).toHaveScreenshot();
+    });
+
+    test("custom directives", async ({ page }) => {
+      await page.goto("sphinx_guide/custom_directives.html");
+
+      const cards = page.locator("section#qiskit-card");
+      await cards.hover();
+      await expect(cards).toHaveScreenshot();
+
+      const callToActions = page.locator("section#qiskit-call-to-action-item");
+      await expect(callToActions).toHaveScreenshot();
+
+      await setMobile(page);
+      await expect(cards).toHaveScreenshot();
+      await expect(callToActions).toHaveScreenshot();
+    });
+
+    test("inline table of contents have correct fonts", async ({ page }) => {
+      await page.goto("");
+      const contents = page.locator("section#example-docs");
+      await expect(contents).toHaveScreenshot();
+    });
   });
-});
-
-test("tables align with qiskit.", async ({ page }) => {
-  await page.goto("sphinx_guide/tables.html");
-  const gridTablesSection = page.locator("section#grid-tables");
-  await expect(gridTablesSection).toHaveScreenshot();
-});
-
-test("tutorials do not have purple border", async ({ page }) => {
-  await page.goto("sphinx_guide/notebook_gallery.html");
-  const tutorial = page.locator("div.nbsphinx-gallery");
-  await expect(tutorial).toHaveScreenshot();
-});
-
-test("admonitions use Carbon style", async ({ page }) => {
-  await page.goto("sphinx_guide/paragraph.html#admonitions");
-  const admonitions = page.locator("section#admonitions");
-  await expect(admonitions).toHaveScreenshot();
-});
-
-test("deprecations look like warning", async ({ page }) => {
-  await page.goto("sphinx_guide/paragraph.html#deprecation-note");
-  const deprecations = page.locator("section#deprecation-note");
-  await expect(deprecations).toHaveScreenshot();
-});
-
-test("Sphinx Design elements have no shadows", async ({ page }) => {
-  await page.goto("sphinx_guide/panels.html");
-  await page.locator(".sd-dropdown").first().click();
-  const pageContents = page.locator("section#panels");
-  await expect(pageContents).toHaveScreenshot();
-});
-
-test("Jupyter works with copybutton", async ({ page }) => {
-  // Regression test of https://github.com/Qiskit/qiskit_sphinx_theme/issues/306.
-  await page.goto("sphinx_guide/jupyter.html");
-  const pageContents = page.locator("section#jupyter");
-  await expect(pageContents).toHaveScreenshot();
-});
-
-test("custom directives", async ({ page }) => {
-  await page.goto("sphinx_guide/custom_directives.html");
-
-  const cards = page.locator("section#qiskit-card");
-  await cards.hover();
-  await expect(cards).toHaveScreenshot();
-
-  const callToActions = page.locator("section#qiskit-call-to-action-item");
-  await expect(callToActions).toHaveScreenshot();
-
-  await setMobile(page);
-  await expect(cards).toHaveScreenshot();
-  await expect(callToActions).toHaveScreenshot();
-});
-
-test("inline table of contents have correct fonts", async ({ page }) => {
-  await page.goto("");
-  const contents = page.locator("section#example-docs");
-  await expect(contents).toHaveScreenshot();
-});
+}
diff --git a/tests/js/tests.js-snapshots/Jupyter-works-with-copybutton-1-linux.png b/tests/js/tests.js-snapshots/Jupyter-works-with-copybutton-1-linux.png
deleted file mode 100644
index 4733fbe2..00000000
Binary files a/tests/js/tests.js-snapshots/Jupyter-works-with-copybutton-1-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/Sphinx-Design-elements-have-no-shadows-1-linux.png b/tests/js/tests.js-snapshots/Sphinx-Design-elements-have-no-shadows-1-linux.png
deleted file mode 100644
index 2255d030..00000000
Binary files a/tests/js/tests.js-snapshots/Sphinx-Design-elements-have-no-shadows-1-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/admonitions-use-Carbon-style-1-linux.png b/tests/js/tests.js-snapshots/admonitions-use-Carbon-style-1-linux.png
deleted file mode 100644
index b228de8e..00000000
Binary files a/tests/js/tests.js-snapshots/admonitions-use-Carbon-style-1-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/api-docs-class-page-1-linux.png b/tests/js/tests.js-snapshots/api-docs-class-page-1-linux.png
deleted file mode 100644
index 7385f539..00000000
Binary files a/tests/js/tests.js-snapshots/api-docs-class-page-1-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/api-docs-function-page-1-linux.png b/tests/js/tests.js-snapshots/api-docs-function-page-1-linux.png
deleted file mode 100644
index 4f933584..00000000
Binary files a/tests/js/tests.js-snapshots/api-docs-function-page-1-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/api-docs-inline-classes-1-linux.png b/tests/js/tests.js-snapshots/api-docs-inline-classes-1-linux.png
deleted file mode 100644
index 515150e0..00000000
Binary files a/tests/js/tests.js-snapshots/api-docs-inline-classes-1-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/api-docs-module-page-1-linux.png b/tests/js/tests.js-snapshots/api-docs-module-page-1-linux.png
deleted file mode 100644
index f0c79802..00000000
Binary files a/tests/js/tests.js-snapshots/api-docs-module-page-1-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/custom-directives-4-linux.png b/tests/js/tests.js-snapshots/custom-directives-4-linux.png
deleted file mode 100644
index bfe492c3..00000000
Binary files a/tests/js/tests.js-snapshots/custom-directives-4-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-Jupyter-works-with-copybutton-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-Jupyter-works-with-copybutton-1-linux.png
new file mode 100644
index 00000000..fc89eb17
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-Jupyter-works-with-copybutton-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-Sphinx-Design-elements-have-no-shadows-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-Sphinx-Design-elements-have-no-shadows-1-linux.png
new file mode 100644
index 00000000..615b314d
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-Sphinx-Design-elements-have-no-shadows-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-admonitions-use-Carbon-style-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-admonitions-use-Carbon-style-1-linux.png
new file mode 100644
index 00000000..3ab641b0
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-admonitions-use-Carbon-style-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-api-docs-class-page-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-api-docs-class-page-1-linux.png
new file mode 100644
index 00000000..a088ecae
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-api-docs-class-page-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-api-docs-function-page-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-api-docs-function-page-1-linux.png
new file mode 100644
index 00000000..dec43717
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-api-docs-function-page-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-api-docs-inline-classes-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-api-docs-inline-classes-1-linux.png
new file mode 100644
index 00000000..876b1d94
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-api-docs-inline-classes-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-api-docs-module-page-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-api-docs-module-page-1-linux.png
new file mode 100644
index 00000000..26c0f366
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-api-docs-module-page-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-custom-directives-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-custom-directives-1-linux.png
new file mode 100644
index 00000000..da7b5bde
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-custom-directives-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-custom-directives-2-linux.png b/tests/js/tests.js-snapshots/dark-mode-custom-directives-2-linux.png
new file mode 100644
index 00000000..1979fb5c
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-custom-directives-2-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-custom-directives-3-linux.png b/tests/js/tests.js-snapshots/dark-mode-custom-directives-3-linux.png
new file mode 100644
index 00000000..b78f826f
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-custom-directives-3-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-custom-directives-4-linux.png b/tests/js/tests.js-snapshots/dark-mode-custom-directives-4-linux.png
new file mode 100644
index 00000000..9672126b
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-custom-directives-4-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-deprecations-look-like-warning-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-deprecations-look-like-warning-1-linux.png
new file mode 100644
index 00000000..7ad4a444
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-deprecations-look-like-warning-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-inline-table-of-contents-have-correct-fonts-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-inline-table-of-contents-have-correct-fonts-1-linux.png
new file mode 100644
index 00000000..3674b580
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-inline-table-of-contents-have-correct-fonts-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-left-side-bar-previous-releases-are-expandable-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-left-side-bar-previous-releases-are-expandable-1-linux.png
new file mode 100644
index 00000000..4aab43d1
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-left-side-bar-previous-releases-are-expandable-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-left-side-bar-renders-correctly-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-left-side-bar-renders-correctly-1-linux.png
new file mode 100644
index 00000000..66e8b08c
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-left-side-bar-renders-correctly-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-left-side-bar-translations-are-expandable-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-left-side-bar-translations-are-expandable-1-linux.png
new file mode 100644
index 00000000..7db382ae
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-left-side-bar-translations-are-expandable-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-right-side-bar-is-not-broken-by-our-page-layout-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-right-side-bar-is-not-broken-by-our-page-layout-1-linux.png
new file mode 100644
index 00000000..c778ba9f
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-right-side-bar-is-not-broken-by-our-page-layout-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-tables-align-with-qiskit-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-tables-align-with-qiskit-1-linux.png
new file mode 100644
index 00000000..3a6ee6ef
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-tables-align-with-qiskit-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-top-nav-bar-uses-custom-icons-on-mobile-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-top-nav-bar-uses-custom-icons-on-mobile-1-linux.png
new file mode 100644
index 00000000..2df674ee
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-top-nav-bar-uses-custom-icons-on-mobile-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-top-nav-bar-uses-custom-page-ToC-icon-on-tablet-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-top-nav-bar-uses-custom-page-ToC-icon-on-tablet-1-linux.png
new file mode 100644
index 00000000..e74bcfed
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-top-nav-bar-uses-custom-page-ToC-icon-on-tablet-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/dark-mode-tutorials-do-not-have-purple-border-1-linux.png b/tests/js/tests.js-snapshots/dark-mode-tutorials-do-not-have-purple-border-1-linux.png
new file mode 100644
index 00000000..ea5687d8
Binary files /dev/null and b/tests/js/tests.js-snapshots/dark-mode-tutorials-do-not-have-purple-border-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/inline-table-of-contents-have-correct-fonts-1-linux.png b/tests/js/tests.js-snapshots/inline-table-of-contents-have-correct-fonts-1-linux.png
deleted file mode 100644
index fb828dcd..00000000
Binary files a/tests/js/tests.js-snapshots/inline-table-of-contents-have-correct-fonts-1-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/left-side-bar-previous-releases-are-expandable-1-linux.png b/tests/js/tests.js-snapshots/left-side-bar-previous-releases-are-expandable-1-linux.png
deleted file mode 100644
index 2df6c721..00000000
Binary files a/tests/js/tests.js-snapshots/left-side-bar-previous-releases-are-expandable-1-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/light-mode-Jupyter-works-with-copybutton-1-linux.png b/tests/js/tests.js-snapshots/light-mode-Jupyter-works-with-copybutton-1-linux.png
new file mode 100644
index 00000000..155f7470
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-Jupyter-works-with-copybutton-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/light-mode-Sphinx-Design-elements-have-no-shadows-1-linux.png b/tests/js/tests.js-snapshots/light-mode-Sphinx-Design-elements-have-no-shadows-1-linux.png
new file mode 100644
index 00000000..7077cfc3
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-Sphinx-Design-elements-have-no-shadows-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/light-mode-admonitions-use-Carbon-style-1-linux.png b/tests/js/tests.js-snapshots/light-mode-admonitions-use-Carbon-style-1-linux.png
new file mode 100644
index 00000000..2a194138
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-admonitions-use-Carbon-style-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/light-mode-api-docs-class-page-1-linux.png b/tests/js/tests.js-snapshots/light-mode-api-docs-class-page-1-linux.png
new file mode 100644
index 00000000..b5f04626
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-api-docs-class-page-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/light-mode-api-docs-function-page-1-linux.png b/tests/js/tests.js-snapshots/light-mode-api-docs-function-page-1-linux.png
new file mode 100644
index 00000000..a88764ec
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-api-docs-function-page-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/light-mode-api-docs-inline-classes-1-linux.png b/tests/js/tests.js-snapshots/light-mode-api-docs-inline-classes-1-linux.png
new file mode 100644
index 00000000..93eaf932
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-api-docs-inline-classes-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/light-mode-api-docs-module-page-1-linux.png b/tests/js/tests.js-snapshots/light-mode-api-docs-module-page-1-linux.png
new file mode 100644
index 00000000..7c1fb6af
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-api-docs-module-page-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/custom-directives-1-linux.png b/tests/js/tests.js-snapshots/light-mode-custom-directives-1-linux.png
similarity index 100%
rename from tests/js/tests.js-snapshots/custom-directives-1-linux.png
rename to tests/js/tests.js-snapshots/light-mode-custom-directives-1-linux.png
diff --git a/tests/js/tests.js-snapshots/custom-directives-2-linux.png b/tests/js/tests.js-snapshots/light-mode-custom-directives-2-linux.png
similarity index 100%
rename from tests/js/tests.js-snapshots/custom-directives-2-linux.png
rename to tests/js/tests.js-snapshots/light-mode-custom-directives-2-linux.png
diff --git a/tests/js/tests.js-snapshots/custom-directives-3-linux.png b/tests/js/tests.js-snapshots/light-mode-custom-directives-3-linux.png
similarity index 100%
rename from tests/js/tests.js-snapshots/custom-directives-3-linux.png
rename to tests/js/tests.js-snapshots/light-mode-custom-directives-3-linux.png
diff --git a/tests/js/tests.js-snapshots/light-mode-custom-directives-4-linux.png b/tests/js/tests.js-snapshots/light-mode-custom-directives-4-linux.png
new file mode 100644
index 00000000..c5ba03c7
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-custom-directives-4-linux.png differ
diff --git a/tests/js/tests.js-snapshots/deprecations-look-like-warning-1-linux.png b/tests/js/tests.js-snapshots/light-mode-deprecations-look-like-warning-1-linux.png
similarity index 100%
rename from tests/js/tests.js-snapshots/deprecations-look-like-warning-1-linux.png
rename to tests/js/tests.js-snapshots/light-mode-deprecations-look-like-warning-1-linux.png
diff --git a/tests/js/tests.js-snapshots/light-mode-inline-table-of-contents-have-correct-fonts-1-linux.png b/tests/js/tests.js-snapshots/light-mode-inline-table-of-contents-have-correct-fonts-1-linux.png
new file mode 100644
index 00000000..b07107a2
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-inline-table-of-contents-have-correct-fonts-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/light-mode-left-side-bar-previous-releases-are-expandable-1-linux.png b/tests/js/tests.js-snapshots/light-mode-left-side-bar-previous-releases-are-expandable-1-linux.png
new file mode 100644
index 00000000..c3cad5d1
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-left-side-bar-previous-releases-are-expandable-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/left-side-bar-renders-correctly-1-linux.png b/tests/js/tests.js-snapshots/light-mode-left-side-bar-renders-correctly-1-linux.png
similarity index 87%
rename from tests/js/tests.js-snapshots/left-side-bar-renders-correctly-1-linux.png
rename to tests/js/tests.js-snapshots/light-mode-left-side-bar-renders-correctly-1-linux.png
index 71bfd334..fb084ed1 100644
Binary files a/tests/js/tests.js-snapshots/left-side-bar-renders-correctly-1-linux.png and b/tests/js/tests.js-snapshots/light-mode-left-side-bar-renders-correctly-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/left-side-bar-translations-are-expandable-1-linux.png b/tests/js/tests.js-snapshots/light-mode-left-side-bar-translations-are-expandable-1-linux.png
similarity index 100%
rename from tests/js/tests.js-snapshots/left-side-bar-translations-are-expandable-1-linux.png
rename to tests/js/tests.js-snapshots/light-mode-left-side-bar-translations-are-expandable-1-linux.png
diff --git a/tests/js/tests.js-snapshots/right-side-bar-is-not-broken-by-our-page-layout-1-linux.png b/tests/js/tests.js-snapshots/light-mode-right-side-bar-is-not-broken-by-our-page-layout-1-linux.png
similarity index 100%
rename from tests/js/tests.js-snapshots/right-side-bar-is-not-broken-by-our-page-layout-1-linux.png
rename to tests/js/tests.js-snapshots/light-mode-right-side-bar-is-not-broken-by-our-page-layout-1-linux.png
diff --git a/tests/js/tests.js-snapshots/tables-align-with-qiskit-1-linux.png b/tests/js/tests.js-snapshots/light-mode-tables-align-with-qiskit-1-linux.png
similarity index 100%
rename from tests/js/tests.js-snapshots/tables-align-with-qiskit-1-linux.png
rename to tests/js/tests.js-snapshots/light-mode-tables-align-with-qiskit-1-linux.png
diff --git a/tests/js/tests.js-snapshots/light-mode-top-nav-bar-uses-custom-icons-on-mobile-1-linux.png b/tests/js/tests.js-snapshots/light-mode-top-nav-bar-uses-custom-icons-on-mobile-1-linux.png
new file mode 100644
index 00000000..9e138e79
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-top-nav-bar-uses-custom-icons-on-mobile-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/light-mode-top-nav-bar-uses-custom-page-ToC-icon-on-tablet-1-linux.png b/tests/js/tests.js-snapshots/light-mode-top-nav-bar-uses-custom-page-ToC-icon-on-tablet-1-linux.png
new file mode 100644
index 00000000..e09ed3e0
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-top-nav-bar-uses-custom-page-ToC-icon-on-tablet-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/light-mode-tutorials-do-not-have-purple-border-1-linux.png b/tests/js/tests.js-snapshots/light-mode-tutorials-do-not-have-purple-border-1-linux.png
new file mode 100644
index 00000000..dfdd1571
Binary files /dev/null and b/tests/js/tests.js-snapshots/light-mode-tutorials-do-not-have-purple-border-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-1-linux.png b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-1-linux.png
new file mode 100644
index 00000000..9e138e79
Binary files /dev/null and b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-2-linux.png b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-2-linux.png
new file mode 100644
index 00000000..2df674ee
Binary files /dev/null and b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-2-linux.png differ
diff --git a/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-3-linux.png b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-3-linux.png
new file mode 100644
index 00000000..f970ea27
Binary files /dev/null and b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-3-linux.png differ
diff --git a/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-4-linux.png b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-4-linux.png
new file mode 100644
index 00000000..9e138e79
Binary files /dev/null and b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-icons-on-mobile-4-linux.png differ
diff --git a/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-1-linux.png b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-1-linux.png
new file mode 100644
index 00000000..e09ed3e0
Binary files /dev/null and b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-1-linux.png differ
diff --git a/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-2-linux.png b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-2-linux.png
new file mode 100644
index 00000000..e74bcfed
Binary files /dev/null and b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-2-linux.png differ
diff --git a/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-3-linux.png b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-3-linux.png
new file mode 100644
index 00000000..ef58ea02
Binary files /dev/null and b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-3-linux.png differ
diff --git a/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-4-linux.png b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-4-linux.png
new file mode 100644
index 00000000..e09ed3e0
Binary files /dev/null and b/tests/js/tests.js-snapshots/top-nav-bar-dark-mode-cycle-uses-custom-page-ToC-icon-on-tablet-4-linux.png differ
diff --git a/tests/js/tests.js-snapshots/top-nav-bar-uses-custom-icons-on-mobile-1-linux.png b/tests/js/tests.js-snapshots/top-nav-bar-uses-custom-icons-on-mobile-1-linux.png
deleted file mode 100644
index db6196b4..00000000
Binary files a/tests/js/tests.js-snapshots/top-nav-bar-uses-custom-icons-on-mobile-1-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/top-nav-bar-uses-custom-page-ToC-icon-on-tablet-1-linux.png b/tests/js/tests.js-snapshots/top-nav-bar-uses-custom-page-ToC-icon-on-tablet-1-linux.png
deleted file mode 100644
index b544f723..00000000
Binary files a/tests/js/tests.js-snapshots/top-nav-bar-uses-custom-page-ToC-icon-on-tablet-1-linux.png and /dev/null differ
diff --git a/tests/js/tests.js-snapshots/tutorials-do-not-have-purple-border-1-linux.png b/tests/js/tests.js-snapshots/tutorials-do-not-have-purple-border-1-linux.png
deleted file mode 100644
index 623d3dee..00000000
Binary files a/tests/js/tests.js-snapshots/tutorials-do-not-have-purple-border-1-linux.png and /dev/null differ
diff --git a/tests/js/utils.js b/tests/js/utils.js
index 79980210..916a8095 100644
--- a/tests/js/utils.js
+++ b/tests/js/utils.js
@@ -29,9 +29,20 @@ const click = async (page, selector) => {
   await page.waitForTimeout(500);
 };
 
+const toggleColorTheme = async (page) => {
+  if (await page.locator("div.theme-toggle-content button").isVisible()) {
+    await click(page, "div.theme-toggle-content button");
+  } else if (await page.locator("div.theme-toggle-header button").isVisible()) {
+    await click(page, "div.theme-toggle-header button");
+  } else {
+    throw new Error("Theme toggle button is not visible.")
+  }
+};
+
 export {
   setDesktop,
   setMobile,
   setTablet,
   click,
+  toggleColorTheme,
 };