diff --git a/debug_toolbar/settings.py b/debug_toolbar/settings.py
index 868d50a90..ca7036c34 100644
--- a/debug_toolbar/settings.py
+++ b/debug_toolbar/settings.py
@@ -45,6 +45,7 @@
     "TOOLBAR_LANGUAGE": None,
     "IS_RUNNING_TESTS": "test" in sys.argv,
     "UPDATE_ON_FETCH": False,
+    "DEFAULT_THEME": "auto",
 }
 
 
diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index a35286a1f..170cc3d5f 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css
@@ -1,5 +1,6 @@
 /* Variable definitions */
-:root {
+:root,
+#djDebug[data-theme="light"] {
     /* Font families are the same as in Django admin/css/base.css */
     --djdt-font-family-primary: "Segoe UI", system-ui, Roboto, "Helvetica Neue",
         Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@@ -9,12 +10,79 @@
         "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New",
         monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
         "Noto Color Emoji";
+
+    color-scheme: light;
+    --djdt-font-color: black;
+    --djdt-background-color: white;
+    --djdt-panel-content-background-color: #eee;
+    --djdt-panel-content-table-background-color: var(--djdt-background-color);
+    --djdt-panel-title-background-color: #ffc;
+    --djdt-djdt-panel-content-table-strip-background-color: #f5f5f5;
+    --djdt--highlighted-background-color: lightgrey;
+    --djdt-toggle-template-background-color: #bbb;
+
+    --djdt-sql-font-color: #333;
+    --djdt-pre-text-color: #555;
+    --djdt-path-and-locals: #777;
+    --djdt-stack-span-color: black;
+    --djdt-template-highlight-color: #333;
+
+    --djdt-table-border-color: #ccc;
+    --djdt-button-border-color: var(--djdt-table-border-color);
+    --djdt-pre-border-color: var(--djdt-table-border-color);
+    --djdt-raw-border-color: var(--djdt-table-border-color);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        color-scheme: dark;
+        --djdt-font-color: #8393a7;
+        --djdt-background-color: #1e293bff;
+        --djdt-panel-content-background-color: #0f1729ff;
+        --djdt-panel-title-background-color: #242432;
+        --djdt-djdt-panel-content-table-strip-background-color: #324154ff;
+        --djdt--highlighted-background-color: #2c2a7dff;
+        --djdt-toggle-template-background-color: #282755;
+
+        --djdt-sql-font-color: var(--djdt-font-color);
+        --djdt-pre-text-color: var(--djdt-font-color);
+        --djdt-path-and-locals: #65758cff;
+        --djdt-stack-span-color: #7c8fa4;
+        --djdt-template-highlight-color: var(--djdt-stack-span-color);
+
+        --djdt-table-border-color: #324154ff;
+        --djdt-button-border-color: var(--djdt-table-border-color);
+        --djdt-pre-border-color: var(--djdt-table-border-color);
+        --djdt-raw-border-color: var(--djdt-table-border-color);
+    }
+}
+
+#djDebug[data-theme="dark"] {
+    color-scheme: dark;
+    --djdt-font-color: #8393a7;
+    --djdt-background-color: #1e293bff;
+    --djdt-panel-content-background-color: #0f1729ff;
+    --djdt-panel-title-background-color: #242432;
+    --djdt-djdt-panel-content-table-strip-background-color: #324154ff;
+    --djdt--highlighted-background-color: #2c2a7dff;
+    --djdt-toggle-template-background-color: #282755;
+
+    --djdt-sql-font-color: var(--djdt-font-color);
+    --djdt-pre-text-color: var(--djdt-font-color);
+    --djdt-path-and-locals: #65758cff;
+    --djdt-stack-span-color: #7c8fa4;
+    --djdt-template-highlight-color: var(--djdt-stack-span-color);
+
+    --djdt-table-border-color: #324154ff;
+    --djdt-button-border-color: var(--djdt-table-border-color);
+    --djdt-pre-border-color: var(--djdt-table-border-color);
+    --djdt-raw-border-color: var(--djdt-table-border-color);
 }
 
 /* Debug Toolbar CSS Reset, adapted from Eric Meyer's CSS Reset */
 #djDebug {
-    color: #000;
-    background: #fff;
+    color: var(--djdt-font-color);
+    background: var(--djdt-background-color);
 }
 #djDebug,
 #djDebug div,
@@ -87,7 +155,7 @@
     outline: 0;
     font-size: 12px;
     line-height: 1.5em;
-    color: #000;
+    color: var(--djdt-font-color);
     vertical-align: baseline;
     background-color: transparent;
     font-family: var(--djdt-font-family-primary);
@@ -100,7 +168,7 @@
 #djDebug button {
     background-color: #eee;
     background-image: linear-gradient(to bottom, #eee, #cccccc);
-    border: 1px solid #ccc;
+    border: 1px solid var(--djdt-button-border-color);
     border-bottom: 1px solid #bbb;
     border-radius: 3px;
     color: #333;
@@ -268,10 +336,10 @@
 
 #djDebug pre {
     white-space: pre-wrap;
-    color: #555;
-    border: 1px solid #ccc;
+    color: var(--djdt-pre-text-color);
+    border: 1px solid var(--djdt-pre-border-color);
     border-collapse: collapse;
-    background-color: #fff;
+    background-color: var(--djdt-background-color);
     padding: 2px 3px;
     margin-bottom: 3px;
 }
@@ -283,7 +351,7 @@
     right: 220px;
     bottom: 0;
     left: 0px;
-    background-color: #eee;
+    background-color: var(--djdt-panel-content-background-color);
     color: #666;
     z-index: 100000000;
 }
@@ -294,7 +362,7 @@
 
 #djDebug .djDebugPanelTitle {
     position: absolute;
-    background-color: #ffc;
+    background-color: var(--djdt-panel-title-background-color);
     color: #666;
     padding-left: 20px;
     top: 0;
@@ -357,16 +425,16 @@
 }
 
 #djDebug .djdt-panelContent table {
-    border: 1px solid #ccc;
+    border: 1px solid var(--djdt-table-border-color);
     border-collapse: collapse;
     width: 100%;
-    background-color: #fff;
+    background-color: var(--djdt-panel-content-table-background-color);
     display: table;
     margin-top: 0.8em;
     overflow: auto;
 }
 #djDebug .djdt-panelContent tbody > tr:nth-child(odd):not(.djdt-highlighted) {
-    background-color: #f5f5f5;
+    background-color: var(--djdt-panel-content-table-strip-background-color);
 }
 #djDebug .djdt-panelContent tbody td,
 #djDebug .djdt-panelContent tbody th {
@@ -392,7 +460,7 @@
 }
 
 #djDebug .djTemplateContext {
-    background-color: #fff;
+    background-color: var(--djdt-background-color);
 }
 
 #djDebug .djdt-panelContent .djDebugClose {
@@ -433,7 +501,7 @@
 
 #djDebug a.toggleTemplate {
     padding: 4px;
-    background-color: #bbb;
+    background-color: var(--djdt-toggle-template-background-color);
     border-radius: 3px;
 }
 
@@ -445,11 +513,11 @@
 }
 
 #djDebug .djDebugCollapsed {
-    color: #333;
+    color: var(--djdt-sql-font-color);
 }
 
 #djDebug .djDebugUncollapsed {
-    color: #333;
+    color: var(--djdt-sql-font-color);
 }
 
 #djDebug .djUnselected {
@@ -483,66 +551,66 @@
 }
 
 #djDebug .highlight {
-    color: #000;
+    color: var(--djdt-font-color);
 }
 #djDebug .highlight .err {
-    color: #000;
+    color: var(--djdt-font-color);
 } /* Error */
 #djDebug .highlight .g {
-    color: #000;
+    color: var(--djdt-font-color);
 } /* Generic */
 #djDebug .highlight .k {
-    color: #000;
+    color: var(--djdt-font-color);
     font-weight: bold;
 } /* Keyword */
 #djDebug .highlight .o {
-    color: #000;
+    color: var(--djdt-font-color);
 } /* Operator */
 #djDebug .highlight .n {
-    color: #000;
+    color: var(--djdt-font-color);
 } /* Name */
 #djDebug .highlight .mi {
-    color: #000;
+    color: var(--djdt-font-color);
     font-weight: bold;
 } /* Literal.Number.Integer */
 #djDebug .highlight .l {
-    color: #000;
+    color: var(--djdt-font-color);
 } /* Literal */
 #djDebug .highlight .x {
-    color: #000;
+    color: var(--djdt-font-color);
 } /* Other */
 #djDebug .highlight .p {
-    color: #000;
+    color: var(--djdt-font-color);
 } /* Punctuation */
 #djDebug .highlight .m {
-    color: #000;
+    color: var(--djdt-font-color);
     font-weight: bold;
 } /* Literal.Number */
 #djDebug .highlight .s {
-    color: #333;
+    color: var(--djdt-template-highlight-color);
 } /* Literal.String */
 #djDebug .highlight .w {
     color: #888888;
 } /* Text.Whitespace */
 #djDebug .highlight .il {
-    color: #000;
+    color: var(--djdt-font-color);
     font-weight: bold;
 } /* Literal.Number.Integer.Long */
 #djDebug .highlight .na {
-    color: #333;
+    color: var(--djdt-template-highlight-color);
 } /* Name.Attribute */
 #djDebug .highlight .nt {
-    color: #000;
+    color: var(--djdt-font-color);
     font-weight: bold;
 } /* Name.Tag */
 #djDebug .highlight .nv {
-    color: #333;
+    color: var(--djdt-template-highlight-color);
 } /* Name.Variable */
 #djDebug .highlight .s2 {
-    color: #333;
+    color: var(--djdt-template-highlight-color);
 } /* Literal.String.Double */
 #djDebug .highlight .cp {
-    color: #333;
+    color: var(--djdt-template-highlight-color);
 } /* Comment.Preproc */
 
 #djDebug svg.djDebugLineChart {
@@ -595,13 +663,13 @@
 }
 
 #djDebug .djdt-stack span {
-    color: #000;
+    color: var(--djdt-stack-span-color);
     font-weight: bold;
 }
 #djDebug .djdt-stack span.djdt-path,
 #djDebug .djdt-stack pre.djdt-locals,
 #djDebug .djdt-stack pre.djdt-locals span {
-    color: #777;
+    color: var(--djdt-path-and-locals);
     font-weight: normal;
 }
 #djDebug .djdt-stack span.djdt-code {
@@ -612,7 +680,7 @@
 }
 #djDebug .djdt-raw {
     background-color: #fff;
-    border: 1px solid #ccc;
+    border: 1px solid var(--djdt-raw-border-color);
     margin-top: 0.8em;
     padding: 5px;
     white-space: pre-wrap;
@@ -631,7 +699,7 @@
     max-height: 100%;
 }
 #djDebug .djdt-highlighted {
-    background-color: lightgrey;
+    background-color: var(--djdt--highlighted-background-color);
 }
 #djDebug tr.djdt-highlighted.djdt-profile-row {
     background-color: #ffc;
@@ -654,3 +722,17 @@
 .djdt-hidden {
     display: none;
 }
+
+#djDebug #djDebugToolbar a#djToggleThemeButton {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+#djToggleThemeButton > svg {
+    margin-left: auto;
+}
+#djDebug[data-theme="light"] #djToggleThemeButton svg.theme-light,
+#djDebug[data-theme="dark"] #djToggleThemeButton svg.theme-dark,
+#djDebug[data-theme="auto"] #djToggleThemeButton svg.theme-auto {
+    display: block;
+}
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 199616336..067b5a312 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -1,4 +1,4 @@
-import { $$, ajax, replaceToolbarState, debounce } from "./utils.js";
+import { $$, ajax, debounce, replaceToolbarState } from "./utils.js";
 
 function onKeyDown(event) {
     if (event.keyCode === 27) {
@@ -213,6 +213,29 @@ const djdt = {
         if (djDebug.dataset.sidebarUrl !== undefined) {
             djdt.updateOnAjax();
         }
+
+        // Updates the theme using user settings
+        const userTheme = localStorage.getItem("djdt.user-theme");
+        if (userTheme !== null) {
+            djDebug.setAttribute("data-theme", userTheme);
+        }
+        // Adds the listener to the Theme Toggle Button
+        $$.on(djDebug, "click", "#djToggleThemeButton", function () {
+            switch (djDebug.getAttribute("data-theme")) {
+                case "auto":
+                    djDebug.setAttribute("data-theme", "light");
+                    localStorage.setItem("djdt.user-theme", "light");
+                    break;
+                case "light":
+                    djDebug.setAttribute("data-theme", "dark");
+                    localStorage.setItem("djdt.user-theme", "dark");
+                    break;
+                default: /* dark is the default */
+                    djDebug.setAttribute("data-theme", "auto");
+                    localStorage.setItem("djdt.user-theme", "auto");
+                    break;
+            }
+        });
     },
     hidePanels() {
         const djDebug = getDebugElement();
@@ -276,7 +299,7 @@ const djdt = {
             storeId = encodeURIComponent(storeId);
             const dest = `${sidebarUrl}?store_id=${storeId}`;
             slowjax(dest).then(function (data) {
-                if (djdt.needUpdateOnFetch){
+                if (djdt.needUpdateOnFetch) {
                     replaceToolbarState(storeId, data);
                 }
             });
diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index 6f4967f21..4867a834e 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -16,10 +16,16 @@
      data-sidebar-url="{{ history_url }}"
      {% endif %}
      data-default-show="{% if toolbar.config.SHOW_COLLAPSED %}false{% else %}true{% endif %}"
-     {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}  data-update-on-fetch="{{ toolbar.config.UPDATE_ON_FETCH }}">
+     {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}  data-update-on-fetch="{{ toolbar.config.UPDATE_ON_FETCH }}"
+     data-theme="{{ toolbar.config.DEFAULT_THEME }}">
   <div class="djdt-hidden" id="djDebugToolbar">
     <ul id="djDebugPanelList">
       <li><a id="djHideToolBarButton" href="#" title="{% trans 'Hide toolbar' %}">{% trans "Hide" %} »</a></li>
+      <li>
+        <a id="djToggleThemeButton" href="#" title="{% trans 'Toggle Theme' %}">
+          {% trans "Toggle Theme" %} {% include "debug_toolbar/includes/theme_selector.html" %}
+        </a>
+      </li>
       {% for panel in toolbar.panels %}
         {% include "debug_toolbar/includes/panel_button.html" %}
       {% endfor %}
diff --git a/debug_toolbar/templates/debug_toolbar/includes/theme_selector.html b/debug_toolbar/templates/debug_toolbar/includes/theme_selector.html
new file mode 100644
index 000000000..372727900
--- /dev/null
+++ b/debug_toolbar/templates/debug_toolbar/includes/theme_selector.html
@@ -0,0 +1,47 @@
+<svg
+  aria-hidden="true"
+  class="djdt-hidden theme-auto"
+  fill="currentColor"
+  width="1rem"
+  height="1rem"
+  viewBox="0 0 32 32"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M0 16q0 3.264 1.28 6.24t3.392 5.088 5.12 3.424 6.208 1.248q3.264 0 6.24-1.248t5.088-3.424 3.392-5.088 1.28-6.24-1.28-6.208-3.392-5.12-5.088-3.392-6.24-1.28q-3.264 0-6.208 1.28t-5.12 3.392-3.392 5.12-1.28 6.208zM4 16q0-3.264 1.6-6.016t4.384-4.352 6.016-1.632 6.016 1.632 4.384 4.352 1.6 6.016-1.6 6.048-4.384 4.352-6.016 1.6-6.016-1.6-4.384-4.352-1.6-6.048zM16 26.016q2.72 0 5.024-1.344t3.648-3.648 1.344-5.024-1.344-4.992-3.648-3.648-5.024-1.344v20z"
+  ></path>
+</svg>
+<svg
+  aria-hidden="true"
+  class="djdt-hidden theme-light"
+  width="1rem"
+  height="1rem"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V4C12.75 4.41421 12.4142 4.75 12 4.75C11.5858 4.75 11.25 4.41421 11.25 4V2C11.25 1.58579 11.5858 1.25 12 1.25ZM3.66865 3.71609C3.94815 3.41039 4.42255 3.38915 4.72825 3.66865L6.95026 5.70024C7.25596 5.97974 7.2772 6.45413 6.9977 6.75983C6.7182 7.06553 6.2438 7.08677 5.9381 6.80727L3.71609 4.77569C3.41039 4.49619 3.38915 4.02179 3.66865 3.71609ZM20.3314 3.71609C20.6109 4.02179 20.5896 4.49619 20.2839 4.77569L18.0619 6.80727C17.7562 7.08677 17.2818 7.06553 17.0023 6.75983C16.7228 6.45413 16.744 5.97974 17.0497 5.70024L19.2718 3.66865C19.5775 3.38915 20.0518 3.41039 20.3314 3.71609ZM12 7.75C9.65279 7.75 7.75 9.65279 7.75 12C7.75 14.3472 9.65279 16.25 12 16.25C14.3472 16.25 16.25 14.3472 16.25 12C16.25 9.65279 14.3472 7.75 12 7.75ZM6.25 12C6.25 8.82436 8.82436 6.25 12 6.25C15.1756 6.25 17.75 8.82436 17.75 12C17.75 15.1756 15.1756 17.75 12 17.75C8.82436 17.75 6.25 15.1756 6.25 12ZM1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H4C4.41421 11.25 4.75 11.5858 4.75 12C4.75 12.4142 4.41421 12.75 4 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12ZM19.25 12C19.25 11.5858 19.5858 11.25 20 11.25H22C22.4142 11.25 22.75 11.5858 22.75 12C22.75 12.4142 22.4142 12.75 22 12.75H20C19.5858 12.75 19.25 12.4142 19.25 12ZM17.0255 17.0252C17.3184 16.7323 17.7933 16.7323 18.0862 17.0252L20.3082 19.2475C20.6011 19.5404 20.601 20.0153 20.3081 20.3082C20.0152 20.6011 19.5403 20.601 19.2475 20.3081L17.0255 18.0858C16.7326 17.7929 16.7326 17.3181 17.0255 17.0252ZM6.97467 17.0253C7.26756 17.3182 7.26756 17.7931 6.97467 18.086L4.75244 20.3082C4.45955 20.6011 3.98468 20.6011 3.69178 20.3082C3.39889 20.0153 3.39889 19.5404 3.69178 19.2476L5.91401 17.0253C6.2069 16.7324 6.68177 16.7324 6.97467 17.0253ZM12 19.25C12.4142 19.25 12.75 19.5858 12.75 20V22C12.75 22.4142 12.4142 22.75 12 22.75C11.5858 22.75 11.25 22.4142 11.25 22V20C11.25 19.5858 11.5858 19.25 12 19.25Z"
+    fill="currentColor"
+  />
+</svg>
+<svg
+  aria-hidden="true"
+  class="djdt-hidden theme-dark"
+  width="1rem"
+  height="1rem"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
diff --git a/docs/changes.rst b/docs/changes.rst
index 997a997f2..019facea1 100644
--- a/docs/changes.rst
+++ b/docs/changes.rst
@@ -32,6 +32,9 @@ Pending
 * Added check to prevent the toolbar from being installed when tests
   are running.
 * Added test to example app and command to run the example app's tests.
+* Implemented dark mode theme and button to toggle the theme,
+  introduced the ``DEFAULT_THEME`` setting which sets the default theme
+  to use.
 
 4.3.0 (2024-02-01)
 ------------------
diff --git a/docs/configuration.rst b/docs/configuration.rst
index 2af0b7fa4..7db7ad41e 100644
--- a/docs/configuration.rst
+++ b/docs/configuration.rst
@@ -188,6 +188,14 @@ Toolbar options
   request when it occurs. This is especially useful when using htmx
   boosting or similar JavaScript techniques.
 
+.. _DEFAULT_THEME:
+
+* ``DEFAULT_THEME``
+
+  Default: ``"auto"``
+
+  This controls which theme will use the toolbar by default.
+
 Panel options
 ~~~~~~~~~~~~~
 
@@ -366,10 +374,10 @@ Here's what a slightly customized toolbar configuration might look like::
 
 Theming support
 ---------------
-The debug toolbar uses CSS variables to define fonts. This allows changing
-fonts without having to override many individual CSS rules. For example, if
-you preferred Roboto instead of the default list of fonts you could add a
-**debug_toolbar/base.html** template override to your project:
+The debug toolbar uses CSS variables to define fonts and colors. This allows
+changing fonts and colors without having to override many individual CSS rules.
+For example, if you preferred Roboto instead of the default list of fonts you
+could add a **debug_toolbar/base.html** template override to your project:
 
 .. code-block:: django
 
diff --git a/tests/test_integration.py b/tests/test_integration.py
index 127406df8..70522ff8a 100644
--- a/tests/test_integration.py
+++ b/tests/test_integration.py
@@ -792,3 +792,29 @@ def test_ajax_refresh(self):
         )
         self.assertNotIn("/ajax/", history_panel.text)
         self.assertIn("/json_view/", history_panel.text)
+
+    def test_theme_toggle(self):
+        self.get("/regular/basic/")
+
+        toolbar = self.selenium.find_element(By.ID, "djDebug")
+
+        # Check that the default theme is auto
+        self.assertEqual(toolbar.get_attribute("data-theme"), "auto")
+
+        # The theme toggle button is shown on the toolbar
+        self.assertIn('<a id="djToggleThemeButton', toolbar.text)
+
+        # The theme changes when user clicks the button
+        self.selenium.find_element(By.ID, "djDebugToolbar").click()
+        self.assertEqual(toolbar.get_attribute("data-theme"), "light")
+        self.selenium.find_element(By.ID, "djDebugToolbar").click()
+        self.assertEqual(toolbar.get_attribute("data-theme"), "dark")
+
+        # Enter the page again to check that user settings is saved
+        self.get("/regular/basic/")
+        toolbar = self.selenium.find_element(By.ID, "djDebug")
+        self.assertEqual(toolbar.get_attribute("data-theme"), "dark")
+
+        # Set the default again and check that dark changes to auto
+        self.selenium.find_element(By.ID, "djDebugToolbar").click()
+        self.assertEqual(toolbar.get_attribute("data-theme"), "auto")