diff --git a/debug_toolbar/settings.py b/debug_toolbar/settings.py
index e0be35ea8..59d538a0b 100644
--- a/debug_toolbar/settings.py
+++ b/debug_toolbar/settings.py
@@ -45,7 +45,6 @@
     "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 a45e8a670..e47dcc975 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css
@@ -35,29 +35,6 @@
     --djdt-raw-border-color: var(--djdt-table-border-color);
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --djdt-font-color: #f8f8f2;
-        --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"] {
     --djdt-font-color: #f8f8f2;
     --djdt-background-color: #1e293bff;
@@ -569,763 +546,511 @@ To regenerate:
     from pygments.formatters import HtmlFormatter
     print(HtmlFormatter(wrapcode=True).get_style_defs())
  */
-#djDebug .highlight pre {
+#djDebug[data-theme="light"] .highlight pre {
     line-height: 125%;
 }
-#djDebug .highlight td.linenos .normal {
+#djDebug[data-theme="light"] .highlight td.linenos .normal {
     color: inherit;
     background-color: transparent;
     padding-left: 5px;
     padding-right: 5px;
 }
-#djDebug .highlight span.linenos {
+#djDebug[data-theme="light"] .highlight span.linenos {
     color: inherit;
     background-color: transparent;
     padding-left: 5px;
     padding-right: 5px;
 }
-#djDebug .highlight td.linenos .special {
+#djDebug[data-theme="light"] .highlight td.linenos .special {
     color: #000000;
     background-color: #ffffc0;
     padding-left: 5px;
     padding-right: 5px;
 }
-#djDebug .highlight span.linenos.special {
+#djDebug[data-theme="light"] .highlight span.linenos.special {
     color: #000000;
     background-color: #ffffc0;
     padding-left: 5px;
     padding-right: 5px;
 }
-#djDebug .highlight .hll {
+#djDebug[data-theme="light"] .highlight .hll {
     background-color: #ffffcc;
 }
-#djDebug .highlight .c {
+#djDebug[data-theme="light"] .highlight .c {
     color: #3d7b7b;
     font-style: italic;
 } /* Comment */
-#djDebug .highlight .err {
+#djDebug[data-theme="light"] .highlight .err {
     border: 1px solid #ff0000;
 } /* Error */
-#djDebug .highlight .k {
+#djDebug[data-theme="light"] .highlight .k {
     color: #008000;
     font-weight: bold;
 } /* Keyword */
-#djDebug .highlight .o {
+#djDebug[data-theme="light"] .highlight .o {
     color: #666666;
 } /* Operator */
-#djDebug .highlight .ch {
+#djDebug[data-theme="light"] .highlight .ch {
     color: #3d7b7b;
     font-style: italic;
 } /* Comment.Hashbang */
-#djDebug .highlight .cm {
+#djDebug[data-theme="light"] .highlight .cm {
     color: #3d7b7b;
     font-style: italic;
 } /* Comment.Multiline */
-#djDebug .highlight .cp {
+#djDebug[data-theme="light"] .highlight .cp {
     color: #9c6500;
 } /* Comment.Preproc */
-#djDebug .highlight .cpf {
+#djDebug[data-theme="light"] .highlight .cpf {
     color: #3d7b7b;
     font-style: italic;
 } /* Comment.PreprocFile */
-#djDebug .highlight .c1 {
+#djDebug[data-theme="light"] .highlight .c1 {
     color: #3d7b7b;
     font-style: italic;
 } /* Comment.Single */
-#djDebug .highlight .cs {
+#djDebug[data-theme="light"] .highlight .cs {
     color: #3d7b7b;
     font-style: italic;
 } /* Comment.Special */
-#djDebug .highlight .gd {
+#djDebug[data-theme="light"] .highlight .gd {
     color: #a00000;
 } /* Generic.Deleted */
-#djDebug .highlight .ge {
+#djDebug[data-theme="light"] .highlight .ge {
     font-style: italic;
 } /* Generic.Emph */
-#djDebug .highlight .ges {
+#djDebug[data-theme="light"] .highlight .ges {
     font-weight: bold;
     font-style: italic;
 } /* Generic.EmphStrong */
-#djDebug .highlight .gr {
+#djDebug[data-theme="light"] .highlight .gr {
     color: #e40000;
 } /* Generic.Error */
-#djDebug .highlight .gh {
+#djDebug[data-theme="light"] .highlight .gh {
     color: #000080;
     font-weight: bold;
 } /* Generic.Heading */
-#djDebug .highlight .gi {
+#djDebug[data-theme="light"] .highlight .gi {
     color: #008400;
 } /* Generic.Inserted */
-#djDebug .highlight .go {
+#djDebug[data-theme="light"] .highlight .go {
     color: #717171;
 } /* Generic.Output */
-#djDebug .highlight .gp {
+#djDebug[data-theme="light"] .highlight .gp {
     color: #000080;
     font-weight: bold;
 } /* Generic.Prompt */
-#djDebug .highlight .gs {
+#djDebug[data-theme="light"] .highlight .gs {
     font-weight: bold;
 } /* Generic.Strong */
-#djDebug .highlight .gu {
+#djDebug[data-theme="light"] .highlight .gu {
     color: #800080;
     font-weight: bold;
 } /* Generic.Subheading */
-#djDebug .highlight .gt {
+#djDebug[data-theme="light"] .highlight .gt {
     color: #0044dd;
 } /* Generic.Traceback */
-#djDebug .highlight .kc {
+#djDebug[data-theme="light"] .highlight .kc {
     color: #008000;
     font-weight: bold;
 } /* Keyword.Constant */
-#djDebug .highlight .kd {
+#djDebug[data-theme="light"] .highlight .kd {
     color: #008000;
     font-weight: bold;
 } /* Keyword.Declaration */
-#djDebug .highlight .kn {
+#djDebug[data-theme="light"] .highlight .kn {
     color: #008000;
     font-weight: bold;
 } /* Keyword.Namespace */
-#djDebug .highlight .kp {
+#djDebug[data-theme="light"] .highlight .kp {
     color: #008000;
 } /* Keyword.Pseudo */
-#djDebug .highlight .kr {
+#djDebug[data-theme="light"] .highlight .kr {
     color: #008000;
     font-weight: bold;
 } /* Keyword.Reserved */
-#djDebug .highlight .kt {
+#djDebug[data-theme="light"] .highlight .kt {
     color: #b00040;
 } /* Keyword.Type */
-#djDebug .highlight .m {
+#djDebug[data-theme="light"] .highlight .m {
     color: #666666;
 } /* Literal.Number */
-#djDebug .highlight .s {
+#djDebug[data-theme="light"] .highlight .s {
     color: #ba2121;
 } /* Literal.String */
-#djDebug .highlight .na {
+#djDebug[data-theme="light"] .highlight .na {
     color: #687822;
 } /* Name.Attribute */
-#djDebug .highlight .nb {
+#djDebug[data-theme="light"] .highlight .nb {
     color: #008000;
 } /* Name.Builtin */
-#djDebug .highlight .nc {
+#djDebug[data-theme="light"] .highlight .nc {
     color: #0000ff;
     font-weight: bold;
 } /* Name.Class */
-#djDebug .highlight .no {
+#djDebug[data-theme="light"] .highlight .no {
     color: #880000;
 } /* Name.Constant */
-#djDebug .highlight .nd {
+#djDebug[data-theme="light"] .highlight .nd {
     color: #aa22ff;
 } /* Name.Decorator */
-#djDebug .highlight .ni {
+#djDebug[data-theme="light"] .highlight .ni {
     color: #717171;
     font-weight: bold;
 } /* Name.Entity */
-#djDebug .highlight .ne {
+#djDebug[data-theme="light"] .highlight .ne {
     color: #cb3f38;
     font-weight: bold;
 } /* Name.Exception */
-#djDebug .highlight .nf {
+#djDebug[data-theme="light"] .highlight .nf {
     color: #0000ff;
 } /* Name.Function */
-#djDebug .highlight .nl {
+#djDebug[data-theme="light"] .highlight .nl {
     color: #767600;
 } /* Name.Label */
-#djDebug .highlight .nn {
+#djDebug[data-theme="light"] .highlight .nn {
     color: #0000ff;
     font-weight: bold;
 } /* Name.Namespace */
-#djDebug .highlight .nt {
+#djDebug[data-theme="light"] .highlight .nt {
     color: #008000;
     font-weight: bold;
 } /* Name.Tag */
-#djDebug .highlight .nv {
+#djDebug[data-theme="light"] .highlight .nv {
     color: #19177c;
 } /* Name.Variable */
-#djDebug .highlight .ow {
+#djDebug[data-theme="light"] .highlight .ow {
     color: #aa22ff;
     font-weight: bold;
 } /* Operator.Word */
-#djDebug .highlight .w {
+#djDebug[data-theme="light"] .highlight .w {
     color: #bbbbbb;
     white-space: pre-wrap;
 } /* Text.Whitespace */
-#djDebug .highlight .mb {
+#djDebug[data-theme="light"] .highlight .mb {
     color: #666666;
 } /* Literal.Number.Bin */
-#djDebug .highlight .mf {
+#djDebug[data-theme="light"] .highlight .mf {
     color: #666666;
 } /* Literal.Number.Float */
-#djDebug .highlight .mh {
+#djDebug[data-theme="light"] .highlight .mh {
     color: #666666;
 } /* Literal.Number.Hex */
-#djDebug .highlight .mi {
+#djDebug[data-theme="light"] .highlight .mi {
     color: #666666;
 } /* Literal.Number.Integer */
-#djDebug .highlight .mo {
+#djDebug[data-theme="light"] .highlight .mo {
     color: #666666;
 } /* Literal.Number.Oct */
-#djDebug .highlight .sa {
+#djDebug[data-theme="light"] .highlight .sa {
     color: #ba2121;
 } /* Literal.String.Affix */
-#djDebug .highlight .sb {
+#djDebug[data-theme="light"] .highlight .sb {
     color: #ba2121;
 } /* Literal.String.Backtick */
-#djDebug .highlight .sc {
+#djDebug[data-theme="light"] .highlight .sc {
     color: #ba2121;
 } /* Literal.String.Char */
-#djDebug .highlight .dl {
+#djDebug[data-theme="light"] .highlight .dl {
     color: #ba2121;
 } /* Literal.String.Delimiter */
-#djDebug .highlight .sd {
+#djDebug[data-theme="light"] .highlight .sd {
     color: #ba2121;
     font-style: italic;
 } /* Literal.String.Doc */
-#djDebug .highlight .s2 {
+#djDebug[data-theme="light"] .highlight .s2 {
     color: #ba2121;
 } /* Literal.String.Double */
-#djDebug .highlight .se {
+#djDebug[data-theme="light"] .highlight .se {
     color: #aa5d1f;
     font-weight: bold;
 } /* Literal.String.Escape */
-#djDebug .highlight .sh {
+#djDebug[data-theme="light"] .highlight .sh {
     color: #ba2121;
 } /* Literal.String.Heredoc */
-#djDebug .highlight .si {
+#djDebug[data-theme="light"] .highlight .si {
     color: #a45a77;
     font-weight: bold;
 } /* Literal.String.Interpol */
-#djDebug .highlight .sx {
+#djDebug[data-theme="light"] .highlight .sx {
     color: #008000;
 } /* Literal.String.Other */
-#djDebug .highlight .sr {
+#djDebug[data-theme="light"] .highlight .sr {
     color: #a45a77;
 } /* Literal.String.Regex */
-#djDebug .highlight .s1 {
+#djDebug[data-theme="light"] .highlight .s1 {
     color: #ba2121;
 } /* Literal.String.Single */
-#djDebug .highlight .ss {
+#djDebug[data-theme="light"] .highlight .ss {
     color: #19177c;
 } /* Literal.String.Symbol */
-#djDebug .highlight .bp {
+#djDebug[data-theme="light"] .highlight .bp {
     color: #008000;
 } /* Name.Builtin.Pseudo */
-#djDebug .highlight .fm {
+#djDebug[data-theme="light"] .highlight .fm {
     color: #0000ff;
 } /* Name.Function.Magic */
-#djDebug .highlight .vc {
+#djDebug[data-theme="light"] .highlight .vc {
     color: #19177c;
 } /* Name.Variable.Class */
-#djDebug .highlight .vg {
+#djDebug[data-theme="light"] .highlight .vg {
     color: #19177c;
 } /* Name.Variable.Global */
-#djDebug .highlight .vi {
+#djDebug[data-theme="light"] .highlight .vi {
     color: #19177c;
 } /* Name.Variable.Instance */
-#djDebug .highlight .vm {
+#djDebug[data-theme="light"] .highlight .vm {
     color: #19177c;
 } /* Name.Variable.Magic */
-#djDebug .highlight .il {
+#djDebug[data-theme="light"] .highlight .il {
     color: #666666;
 } /* Literal.Number.Integer.Long */
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        #djDebug .highlight .hll {
-            background-color: #f1fa8c;
-        }
-        #djDebug .highlight {
-            background: #282a36;
-            color: #f8f8f2;
-        }
-        #djDebug .highlight .c {
-            color: #6272a4;
-        } /* Comment */
-        #djDebug .highlight .err {
-            color: #f8f8f2;
-        } /* Error */
-        #djDebug .highlight .g {
-            color: #f8f8f2;
-        } /* Generic */
-        #djDebug .highlight .k {
-            color: #ff79c6;
-        } /* Keyword */
-        #djDebug .highlight .l {
-            color: #f8f8f2;
-        } /* Literal */
-        #djDebug .highlight .n {
-            color: #f8f8f2;
-        } /* Name */
-        #djDebug .highlight .o {
-            color: #ff79c6;
-        } /* Operator */
-        #djDebug .highlight .x {
-            color: #f8f8f2;
-        } /* Other */
-        #djDebug .highlight .p {
-            color: #f8f8f2;
-        } /* Punctuation */
-        #djDebug .highlight .ch {
-            color: #6272a4;
-        } /* Comment.Hashbang */
-        #djDebug .highlight .cm {
-            color: #6272a4;
-        } /* Comment.Multiline */
-        #djDebug .highlight .cp {
-            color: #ff79c6;
-        } /* Comment.Preproc */
-        #djDebug .highlight .cpf {
-            color: #6272a4;
-        } /* Comment.PreprocFile */
-        #djDebug .highlight .c1 {
-            color: #6272a4;
-        } /* Comment.Single */
-        #djDebug .highlight .cs {
-            color: #6272a4;
-        } /* Comment.Special */
-        #djDebug .highlight .gd {
-            color: #8b080b;
-        } /* Generic.Deleted */
-        #djDebug .highlight .ge {
-            color: #f8f8f2;
-            text-decoration: underline;
-        } /* Generic.Emph */
-        #djDebug .highlight .gr {
-            color: #f8f8f2;
-        } /* Generic.Error */
-        #djDebug .highlight .gh {
-            color: #f8f8f2;
-            font-weight: bold;
-        } /* Generic.Heading */
-        #djDebug .highlight .gi {
-            color: #f8f8f2;
-            font-weight: bold;
-        } /* Generic.Inserted */
-        #djDebug .highlight .go {
-            color: #44475a;
-        } /* Generic.Output */
-        #djDebug .highlight .gp {
-            color: #f8f8f2;
-        } /* Generic.Prompt */
-        #djDebug .highlight .gs {
-            color: #f8f8f2;
-        } /* Generic.Strong */
-        #djDebug .highlight .gu {
-            color: #f8f8f2;
-            font-weight: bold;
-        } /* Generic.Subheading */
-        #djDebug .highlight .gt {
-            color: #f8f8f2;
-        } /* Generic.Traceback */
-        #djDebug .highlight .kc {
-            color: #ff79c6;
-        } /* Keyword.Constant */
-        #djDebug .highlight .kd {
-            color: #8be9fd;
-            font-style: italic;
-        } /* Keyword.Declaration */
-        #djDebug .highlight .kn {
-            color: #ff79c6;
-        } /* Keyword.Namespace */
-        #djDebug .highlight .kp {
-            color: #ff79c6;
-        } /* Keyword.Pseudo */
-        #djDebug .highlight .kr {
-            color: #ff79c6;
-        } /* Keyword.Reserved */
-        #djDebug .highlight .kt {
-            color: #8be9fd;
-        } /* Keyword.Type */
-        #djDebug .highlight .ld {
-            color: #f8f8f2;
-        } /* Literal.Date */
-        #djDebug .highlight .m {
-            color: #bd93f9;
-        } /* Literal.Number */
-        #djDebug .highlight .s {
-            color: #f1fa8c;
-        } /* Literal.String */
-        #djDebug .highlight .na {
-            color: #50fa7b;
-        } /* Name.Attribute */
-        #djDebug .highlight .nb {
-            color: #8be9fd;
-            font-style: italic;
-        } /* Name.Builtin */
-        #djDebug .highlight .nc {
-            color: #50fa7b;
-        } /* Name.Class */
-        #djDebug .highlight .no {
-            color: #f8f8f2;
-        } /* Name.Constant */
-        #djDebug .highlight .nd {
-            color: #f8f8f2;
-        } /* Name.Decorator */
-        #djDebug .highlight .ni {
-            color: #f8f8f2;
-        } /* Name.Entity */
-        #djDebug .highlight .ne {
-            color: #f8f8f2;
-        } /* Name.Exception */
-        #djDebug .highlight .nf {
-            color: #50fa7b;
-        } /* Name.Function */
-        #djDebug .highlight .nl {
-            color: #8be9fd;
-            font-style: italic;
-        } /* Name.Label */
-        #djDebug .highlight .nn {
-            color: #f8f8f2;
-        } /* Name.Namespace */
-        #djDebug .highlight .nx {
-            color: #f8f8f2;
-        } /* Name.Other */
-        #djDebug .highlight .py {
-            color: #f8f8f2;
-        } /* Name.Property */
-        #djDebug .highlight .nt {
-            color: #ff79c6;
-        } /* Name.Tag */
-        #djDebug .highlight .nv {
-            color: #8be9fd;
-            font-style: italic;
-        } /* Name.Variable */
-        #djDebug .highlight .ow {
-            color: #ff79c6;
-        } /* Operator.Word */
-        #djDebug .highlight .w {
-            color: #f8f8f2;
-        } /* Text.Whitespace */
-        #djDebug .highlight .mb {
-            color: #bd93f9;
-        } /* Literal.Number.Bin */
-        #djDebug .highlight .mf {
-            color: #bd93f9;
-        } /* Literal.Number.Float */
-        #djDebug .highlight .mh {
-            color: #bd93f9;
-        } /* Literal.Number.Hex */
-        #djDebug .highlight .mi {
-            color: #bd93f9;
-        } /* Literal.Number.Integer */
-        #djDebug .highlight .mo {
-            color: #bd93f9;
-        } /* Literal.Number.Oct */
-        #djDebug .highlight .sa {
-            color: #f1fa8c;
-        } /* Literal.String.Affix */
-        #djDebug .highlight .sb {
-            color: #f1fa8c;
-        } /* Literal.String.Backtick */
-        #djDebug .highlight .sc {
-            color: #f1fa8c;
-        } /* Literal.String.Char */
-        #djDebug .highlight .dl {
-            color: #f1fa8c;
-        } /* Literal.String.Delimiter */
-        #djDebug .highlight .sd {
-            color: #f1fa8c;
-        } /* Literal.String.Doc */
-        #djDebug .highlight .s2 {
-            color: #f1fa8c;
-        } /* Literal.String.Double */
-        #djDebug .highlight .se {
-            color: #f1fa8c;
-        } /* Literal.String.Escape */
-        #djDebug .highlight .sh {
-            color: #f1fa8c;
-        } /* Literal.String.Heredoc */
-        #djDebug .highlight .si {
-            color: #f1fa8c;
-        } /* Literal.String.Interpol */
-        #djDebug .highlight .sx {
-            color: #f1fa8c;
-        } /* Literal.String.Other */
-        #djDebug .highlight .sr {
-            color: #f1fa8c;
-        } /* Literal.String.Regex */
-        #djDebug .highlight .s1 {
-            color: #f1fa8c;
-        } /* Literal.String.Single */
-        #djDebug .highlight .ss {
-            color: #f1fa8c;
-        } /* Literal.String.Symbol */
-        #djDebug .highlight .bp {
-            color: #f8f8f2;
-            font-style: italic;
-        } /* Name.Builtin.Pseudo */
-        #djDebug .highlight .fm {
-            color: #50fa7b;
-        } /* Name.Function.Magic */
-        #djDebug .highlight .vc {
-            color: #8be9fd;
-            font-style: italic;
-        } /* Name.Variable.Class */
-        #djDebug .highlight .vg {
-            color: #8be9fd;
-            font-style: italic;
-        } /* Name.Variable.Global */
-        #djDebug .highlight .vi {
-            color: #8be9fd;
-            font-style: italic;
-        } /* Name.Variable.Instance */
-        #djDebug .highlight .vm {
-            color: #8be9fd;
-            font-style: italic;
-        } /* Name.Variable.Magic */
-        #djDebug .highlight .il {
-            color: #bd93f9;
-        } /* Literal.Number.Integer.Long */
-    }
+#djDebug[data-theme="dark"] .highlight .hll {
+    background-color: #f1fa8c;
 }
-
-#djDebug[data-theme="dark"] {
-    #djDebug .highlight .hll {
-        background-color: #f1fa8c;
-    }
-    #djDebug .highlight {
-        background: #282a36;
-        color: #f8f8f2;
-    }
-    #djDebug .highlight .c {
-        color: #6272a4;
-    } /* Comment */
-    #djDebug .highlight .err {
-        color: #f8f8f2;
-    } /* Error */
-    #djDebug .highlight .g {
-        color: #f8f8f2;
-    } /* Generic */
-    #djDebug .highlight .k {
-        color: #ff79c6;
-    } /* Keyword */
-    #djDebug .highlight .l {
-        color: #f8f8f2;
-    } /* Literal */
-    #djDebug .highlight .n {
-        color: #f8f8f2;
-    } /* Name */
-    #djDebug .highlight .o {
-        color: #ff79c6;
-    } /* Operator */
-    #djDebug .highlight .x {
-        color: #f8f8f2;
-    } /* Other */
-    #djDebug .highlight .p {
-        color: #f8f8f2;
-    } /* Punctuation */
-    #djDebug .highlight .ch {
-        color: #6272a4;
-    } /* Comment.Hashbang */
-    #djDebug .highlight .cm {
-        color: #6272a4;
-    } /* Comment.Multiline */
-    #djDebug .highlight .cp {
-        color: #ff79c6;
-    } /* Comment.Preproc */
-    #djDebug .highlight .cpf {
-        color: #6272a4;
-    } /* Comment.PreprocFile */
-    #djDebug .highlight .c1 {
-        color: #6272a4;
-    } /* Comment.Single */
-    #djDebug .highlight .cs {
-        color: #6272a4;
-    } /* Comment.Special */
-    #djDebug .highlight .gd {
-        color: #8b080b;
-    } /* Generic.Deleted */
-    #djDebug .highlight .ge {
-        color: #f8f8f2;
-        text-decoration: underline;
-    } /* Generic.Emph */
-    #djDebug .highlight .gr {
-        color: #f8f8f2;
-    } /* Generic.Error */
-    #djDebug .highlight .gh {
-        color: #f8f8f2;
-        font-weight: bold;
-    } /* Generic.Heading */
-    #djDebug .highlight .gi {
-        color: #f8f8f2;
-        font-weight: bold;
-    } /* Generic.Inserted */
-    #djDebug .highlight .go {
-        color: #44475a;
-    } /* Generic.Output */
-    #djDebug .highlight .gp {
-        color: #f8f8f2;
-    } /* Generic.Prompt */
-    #djDebug .highlight .gs {
-        color: #f8f8f2;
-    } /* Generic.Strong */
-    #djDebug .highlight .gu {
-        color: #f8f8f2;
-        font-weight: bold;
-    } /* Generic.Subheading */
-    #djDebug .highlight .gt {
-        color: #f8f8f2;
-    } /* Generic.Traceback */
-    #djDebug .highlight .kc {
-        color: #ff79c6;
-    } /* Keyword.Constant */
-    #djDebug .highlight .kd {
-        color: #8be9fd;
-        font-style: italic;
-    } /* Keyword.Declaration */
-    #djDebug .highlight .kn {
-        color: #ff79c6;
-    } /* Keyword.Namespace */
-    #djDebug .highlight .kp {
-        color: #ff79c6;
-    } /* Keyword.Pseudo */
-    #djDebug .highlight .kr {
-        color: #ff79c6;
-    } /* Keyword.Reserved */
-    #djDebug .highlight .kt {
-        color: #8be9fd;
-    } /* Keyword.Type */
-    #djDebug .highlight .ld {
-        color: #f8f8f2;
-    } /* Literal.Date */
-    #djDebug .highlight .m {
-        color: #bd93f9;
-    } /* Literal.Number */
-    #djDebug .highlight .s {
-        color: #f1fa8c;
-    } /* Literal.String */
-    #djDebug .highlight .na {
-        color: #50fa7b;
-    } /* Name.Attribute */
-    #djDebug .highlight .nb {
-        color: #8be9fd;
-        font-style: italic;
-    } /* Name.Builtin */
-    #djDebug .highlight .nc {
-        color: #50fa7b;
-    } /* Name.Class */
-    #djDebug .highlight .no {
-        color: #f8f8f2;
-    } /* Name.Constant */
-    #djDebug .highlight .nd {
-        color: #f8f8f2;
-    } /* Name.Decorator */
-    #djDebug .highlight .ni {
-        color: #f8f8f2;
-    } /* Name.Entity */
-    #djDebug .highlight .ne {
-        color: #f8f8f2;
-    } /* Name.Exception */
-    #djDebug .highlight .nf {
-        color: #50fa7b;
-    } /* Name.Function */
-    #djDebug .highlight .nl {
-        color: #8be9fd;
-        font-style: italic;
-    } /* Name.Label */
-    #djDebug .highlight .nn {
-        color: #f8f8f2;
-    } /* Name.Namespace */
-    #djDebug .highlight .nx {
-        color: #f8f8f2;
-    } /* Name.Other */
-    #djDebug .highlight .py {
-        color: #f8f8f2;
-    } /* Name.Property */
-    #djDebug .highlight .nt {
-        color: #ff79c6;
-    } /* Name.Tag */
-    #djDebug .highlight .nv {
-        color: #8be9fd;
-        font-style: italic;
-    } /* Name.Variable */
-    #djDebug .highlight .ow {
-        color: #ff79c6;
-    } /* Operator.Word */
-    #djDebug .highlight .w {
-        color: #f8f8f2;
-    } /* Text.Whitespace */
-    #djDebug .highlight .mb {
-        color: #bd93f9;
-    } /* Literal.Number.Bin */
-    #djDebug .highlight .mf {
-        color: #bd93f9;
-    } /* Literal.Number.Float */
-    #djDebug .highlight .mh {
-        color: #bd93f9;
-    } /* Literal.Number.Hex */
-    #djDebug .highlight .mi {
-        color: #bd93f9;
-    } /* Literal.Number.Integer */
-    #djDebug .highlight .mo {
-        color: #bd93f9;
-    } /* Literal.Number.Oct */
-    #djDebug .highlight .sa {
-        color: #f1fa8c;
-    } /* Literal.String.Affix */
-    #djDebug .highlight .sb {
-        color: #f1fa8c;
-    } /* Literal.String.Backtick */
-    #djDebug .highlight .sc {
-        color: #f1fa8c;
-    } /* Literal.String.Char */
-    #djDebug .highlight .dl {
-        color: #f1fa8c;
-    } /* Literal.String.Delimiter */
-    #djDebug .highlight .sd {
-        color: #f1fa8c;
-    } /* Literal.String.Doc */
-    #djDebug .highlight .s2 {
-        color: #f1fa8c;
-    } /* Literal.String.Double */
-    #djDebug .highlight .se {
-        color: #f1fa8c;
-    } /* Literal.String.Escape */
-    #djDebug .highlight .sh {
-        color: #f1fa8c;
-    } /* Literal.String.Heredoc */
-    #djDebug .highlight .si {
-        color: #f1fa8c;
-    } /* Literal.String.Interpol */
-    #djDebug .highlight .sx {
-        color: #f1fa8c;
-    } /* Literal.String.Other */
-    #djDebug .highlight .sr {
-        color: #f1fa8c;
-    } /* Literal.String.Regex */
-    #djDebug .highlight .s1 {
-        color: #f1fa8c;
-    } /* Literal.String.Single */
-    #djDebug .highlight .ss {
-        color: #f1fa8c;
-    } /* Literal.String.Symbol */
-    #djDebug .highlight .bp {
-        color: #f8f8f2;
-        font-style: italic;
-    } /* Name.Builtin.Pseudo */
-    #djDebug .highlight .fm {
-        color: #50fa7b;
-    } /* Name.Function.Magic */
-    #djDebug .highlight .vc {
-        color: #8be9fd;
-        font-style: italic;
-    } /* Name.Variable.Class */
-    #djDebug .highlight .vg {
-        color: #8be9fd;
-        font-style: italic;
-    } /* Name.Variable.Global */
-    #djDebug .highlight .vi {
-        color: #8be9fd;
-        font-style: italic;
-    } /* Name.Variable.Instance */
-    #djDebug .highlight .vm {
-        color: #8be9fd;
-        font-style: italic;
-    } /* Name.Variable.Magic */
-    #djDebug .highlight .il {
-        color: #bd93f9;
-    } /* Literal.Number.Integer.Long */
+#djDebug[data-theme="dark"] .highlight {
+    background: #282a36;
+    color: #f8f8f2;
 }
+#djDebug[data-theme="dark"] .highlight .c {
+    color: #6272a4;
+} /* Comment */
+#djDebug[data-theme="dark"] .highlight .err {
+    color: #f8f8f2;
+} /* Error */
+#djDebug[data-theme="dark"] .highlight .g {
+    color: #f8f8f2;
+} /* Generic */
+#djDebug[data-theme="dark"] .highlight .k {
+    color: #ff79c6;
+} /* Keyword */
+#djDebug[data-theme="dark"] .highlight .l {
+    color: #f8f8f2;
+} /* Literal */
+#djDebug[data-theme="dark"] .highlight .n {
+    color: #f8f8f2;
+} /* Name */
+#djDebug[data-theme="dark"] .highlight .o {
+    color: #ff79c6;
+} /* Operator */
+#djDebug[data-theme="dark"] .highlight .x {
+    color: #f8f8f2;
+} /* Other */
+#djDebug[data-theme="dark"] .highlight .p {
+    color: #f8f8f2;
+} /* Punctuation */
+#djDebug[data-theme="dark"] .highlight .ch {
+    color: #6272a4;
+} /* Comment.Hashbang */
+#djDebug[data-theme="dark"] .highlight .cm {
+    color: #6272a4;
+} /* Comment.Multiline */
+#djDebug[data-theme="dark"] .highlight .cp {
+    color: #ff79c6;
+} /* Comment.Preproc */
+#djDebug[data-theme="dark"] .highlight .cpf {
+    color: #6272a4;
+} /* Comment.PreprocFile */
+#djDebug[data-theme="dark"] .highlight .c1 {
+    color: #6272a4;
+} /* Comment.Single */
+#djDebug[data-theme="dark"] .highlight .cs {
+    color: #6272a4;
+} /* Comment.Special */
+#djDebug[data-theme="dark"] .highlight .gd {
+    color: #8b080b;
+} /* Generic.Deleted */
+#djDebug[data-theme="dark"] .highlight .ge {
+    color: #f8f8f2;
+    text-decoration: underline;
+} /* Generic.Emph */
+#djDebug[data-theme="dark"] .highlight .gr {
+    color: #f8f8f2;
+} /* Generic.Error */
+#djDebug[data-theme="dark"] .highlight .gh {
+    color: #f8f8f2;
+    font-weight: bold;
+} /* Generic.Heading */
+#djDebug[data-theme="dark"] .highlight .gi {
+    color: #f8f8f2;
+    font-weight: bold;
+} /* Generic.Inserted */
+#djDebug[data-theme="dark"] .highlight .go {
+    color: #44475a;
+} /* Generic.Output */
+#djDebug[data-theme="dark"] .highlight .gp {
+    color: #f8f8f2;
+} /* Generic.Prompt */
+#djDebug[data-theme="dark"] .highlight .gs {
+    color: #f8f8f2;
+} /* Generic.Strong */
+#djDebug[data-theme="dark"] .highlight .gu {
+    color: #f8f8f2;
+    font-weight: bold;
+} /* Generic.Subheading */
+#djDebug[data-theme="dark"] .highlight .gt {
+    color: #f8f8f2;
+} /* Generic.Traceback */
+#djDebug[data-theme="dark"] .highlight .kc {
+    color: #ff79c6;
+} /* Keyword.Constant */
+#djDebug[data-theme="dark"] .highlight .kd {
+    color: #8be9fd;
+    font-style: italic;
+} /* Keyword.Declaration */
+#djDebug[data-theme="dark"] .highlight .kn {
+    color: #ff79c6;
+} /* Keyword.Namespace */
+#djDebug[data-theme="dark"] .highlight .kp {
+    color: #ff79c6;
+} /* Keyword.Pseudo */
+#djDebug[data-theme="dark"] .highlight .kr {
+    color: #ff79c6;
+} /* Keyword.Reserved */
+#djDebug[data-theme="dark"] .highlight .kt {
+    color: #8be9fd;
+} /* Keyword.Type */
+#djDebug[data-theme="dark"] .highlight .ld {
+    color: #f8f8f2;
+} /* Literal.Date */
+#djDebug[data-theme="dark"] .highlight .m {
+    color: #bd93f9;
+} /* Literal.Number */
+#djDebug[data-theme="dark"] .highlight .s {
+    color: #f1fa8c;
+} /* Literal.String */
+#djDebug[data-theme="dark"] .highlight .na {
+    color: #50fa7b;
+} /* Name.Attribute */
+#djDebug[data-theme="dark"] .highlight .nb {
+    color: #8be9fd;
+    font-style: italic;
+} /* Name.Builtin */
+#djDebug[data-theme="dark"] .highlight .nc {
+    color: #50fa7b;
+} /* Name.Class */
+#djDebug[data-theme="dark"] .highlight .no {
+    color: #f8f8f2;
+} /* Name.Constant */
+#djDebug[data-theme="dark"] .highlight .nd {
+    color: #f8f8f2;
+} /* Name.Decorator */
+#djDebug[data-theme="dark"] .highlight .ni {
+    color: #f8f8f2;
+} /* Name.Entity */
+#djDebug[data-theme="dark"] .highlight .ne {
+    color: #f8f8f2;
+} /* Name.Exception */
+#djDebug[data-theme="dark"] .highlight .nf {
+    color: #50fa7b;
+} /* Name.Function */
+#djDebug[data-theme="dark"] .highlight .nl {
+    color: #8be9fd;
+    font-style: italic;
+} /* Name.Label */
+#djDebug[data-theme="dark"] .highlight .nn {
+    color: #f8f8f2;
+} /* Name.Namespace */
+#djDebug[data-theme="dark"] .highlight .nx {
+    color: #f8f8f2;
+} /* Name.Other */
+#djDebug[data-theme="dark"] .highlight .py {
+    color: #f8f8f2;
+} /* Name.Property */
+#djDebug[data-theme="dark"] .highlight .nt {
+    color: #ff79c6;
+} /* Name.Tag */
+#djDebug[data-theme="dark"] .highlight .nv {
+    color: #8be9fd;
+    font-style: italic;
+} /* Name.Variable */
+#djDebug[data-theme="dark"] .highlight .ow {
+    color: #ff79c6;
+} /* Operator.Word */
+#djDebug[data-theme="dark"] .highlight .w {
+    color: #f8f8f2;
+} /* Text.Whitespace */
+#djDebug[data-theme="dark"] .highlight .mb {
+    color: #bd93f9;
+} /* Literal.Number.Bin */
+#djDebug[data-theme="dark"] .highlight .mf {
+    color: #bd93f9;
+} /* Literal.Number.Float */
+#djDebug[data-theme="dark"] .highlight .mh {
+    color: #bd93f9;
+} /* Literal.Number.Hex */
+#djDebug[data-theme="dark"] .highlight .mi {
+    color: #bd93f9;
+} /* Literal.Number.Integer */
+#djDebug[data-theme="dark"] .highlight .mo {
+    color: #bd93f9;
+} /* Literal.Number.Oct */
+#djDebug[data-theme="dark"] .highlight .sa {
+    color: #f1fa8c;
+} /* Literal.String.Affix */
+#djDebug[data-theme="dark"] .highlight .sb {
+    color: #f1fa8c;
+} /* Literal.String.Backtick */
+#djDebug[data-theme="dark"] .highlight .sc {
+    color: #f1fa8c;
+} /* Literal.String.Char */
+#djDebug[data-theme="dark"] .highlight .dl {
+    color: #f1fa8c;
+} /* Literal.String.Delimiter */
+#djDebug[data-theme="dark"] .highlight .sd {
+    color: #f1fa8c;
+} /* Literal.String.Doc */
+#djDebug[data-theme="dark"] .highlight .s2 {
+    color: #f1fa8c;
+} /* Literal.String.Double */
+#djDebug[data-theme="dark"] .highlight .se {
+    color: #f1fa8c;
+} /* Literal.String.Escape */
+#djDebug[data-theme="dark"] .highlight .sh {
+    color: #f1fa8c;
+} /* Literal.String.Heredoc */
+#djDebug[data-theme="dark"] .highlight .si {
+    color: #f1fa8c;
+} /* Literal.String.Interpol */
+#djDebug[data-theme="dark"] .highlight .sx {
+    color: #f1fa8c;
+} /* Literal.String.Other */
+#djDebug[data-theme="dark"] .highlight .sr {
+    color: #f1fa8c;
+} /* Literal.String.Regex */
+#djDebug[data-theme="dark"] .highlight .s1 {
+    color: #f1fa8c;
+} /* Literal.String.Single */
+#djDebug[data-theme="dark"] .highlight .ss {
+    color: #f1fa8c;
+} /* Literal.String.Symbol */
+#djDebug[data-theme="dark"] .highlight .bp {
+    color: #f8f8f2;
+    font-style: italic;
+} /* Name.Builtin.Pseudo */
+#djDebug[data-theme="dark"] .highlight .fm {
+    color: #50fa7b;
+} /* Name.Function.Magic */
+#djDebug[data-theme="dark"] .highlight .vc {
+    color: #8be9fd;
+    font-style: italic;
+} /* Name.Variable.Class */
+#djDebug[data-theme="dark"] .highlight .vg {
+    color: #8be9fd;
+    font-style: italic;
+} /* Name.Variable.Global */
+#djDebug[data-theme="dark"] .highlight .vi {
+    color: #8be9fd;
+    font-style: italic;
+} /* Name.Variable.Instance */
+#djDebug[data-theme="dark"] .highlight .vm {
+    color: #8be9fd;
+    font-style: italic;
+} /* Name.Variable.Magic */
+#djDebug[data-theme="dark"] .highlight .il {
+    color: #bd93f9;
+} /* Literal.Number.Integer.Long */
 
 #djDebug svg.djDebugLineChart {
     width: 100%;
@@ -1445,9 +1170,9 @@ To regenerate:
 #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 {
+#djDebug[data-user-theme="light"] #djToggleThemeButton svg.theme-light,
+#djDebug[data-user-theme="dark"] #djToggleThemeButton svg.theme-dark,
+#djDebug[data-user-theme="auto"] #djToggleThemeButton svg.theme-auto {
     display: block;
     height: 1rem;
     width: 1rem;
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 077bc930a..19658f76e 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -212,27 +212,30 @@ const djdt = {
             djdt.updateOnAjax();
         }
 
+        const prefersDark = window.matchMedia(
+            "(prefers-color-scheme: dark)"
+        ).matches;
+        const themeList = prefersDark
+            ? ["auto", "light", "dark"]
+            : ["auto", "dark", "light"];
+        const setTheme = (theme) => {
+            djDebug.setAttribute(
+                "data-theme",
+                theme === "auto" ? (prefersDark ? "dark" : "light") : theme
+            );
+            djDebug.setAttribute("data-user-theme", theme);
+        };
+
         // Updates the theme using user settings
-        const userTheme = localStorage.getItem("djdt.user-theme");
-        if (userTheme !== null) {
-            djDebug.setAttribute("data-theme", userTheme);
-        }
+        let userTheme = localStorage.getItem("djdt.user-theme") || "auto";
+        setTheme(userTheme);
+
         // Adds the listener to the Theme Toggle Button
         $$.on(djDebug, "click", "#djToggleThemeButton", () => {
-            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;
-            }
+            const index = themeList.indexOf(userTheme);
+            userTheme = themeList[(index + 1) % themeList.length];
+            localStorage.setItem("djdt.user-theme", userTheme);
+            setTheme(userTheme);
         });
     },
     hidePanels() {
diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index a9983250d..b5c225ac8 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -16,8 +16,7 @@
      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 }}"
-     data-theme="{{ toolbar.config.DEFAULT_THEME }}">
+     {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}  data-update-on-fetch="{{ toolbar.config.UPDATE_ON_FETCH }}">
   <div class="djdt-hidden" id="djDebugToolbar">
     <ul id="djDebugPanelList">
       <li><a id="djHideToolBarButton" href="#" title="{% trans 'Hide toolbar' %}">{% trans "Hide" %} »</a></li>
diff --git a/docs/changes.rst b/docs/changes.rst
index a4a45afc0..92cce4fe6 100644
--- a/docs/changes.rst
+++ b/docs/changes.rst
@@ -6,7 +6,10 @@ Pending
 
 * Added hook to RedirectsPanel for subclass customization.
 * Added feature to sanitize sensitive data in the Request Panel.
-* Fixed dark mode conflict in code block toolbar CSS
+* Fixed dark mode conflict in code block toolbar CSS.
+* Properly allowed overriding the system theme preference by using the theme
+  selector. Removed the ``DEFAULT_THEME`` setting, we should always default to
+  system-level defaults where possible.
 * Added support for using django-template-partials with the template panel's
   source view functionality. The same change possibly adds support for other
   template loaders.
diff --git a/docs/configuration.rst b/docs/configuration.rst
index 7cd6bc11b..d9e7ff342 100644
--- a/docs/configuration.rst
+++ b/docs/configuration.rst
@@ -201,13 +201,6 @@ 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
 ~~~~~~~~~~~~~
diff --git a/tests/test_integration.py b/tests/test_integration.py
index 3cc0b1420..88cd8f9ab 100644
--- a/tests/test_integration.py
+++ b/tests/test_integration.py
@@ -649,6 +649,9 @@ def setUpClass(cls):
         options = Options()
         if os.environ.get("CI"):
             options.add_argument("-headless")
+        # Set the browser preference to light mode for consistent testing
+        options.set_preference("ui.systemUsesDarkTheme", 0)
+        options.set_preference("ui.prefersReducedMotion", 0)
         cls.selenium = webdriver.Firefox(options=options)
 
     @classmethod
@@ -892,26 +895,35 @@ def test_theme_toggle(self):
         toolbar = self.selenium.find_element(By.ID, "djDebug")
 
         # Check that the default theme is auto
-        self.assertEqual(toolbar.get_attribute("data-theme"), "auto")
+        self.assertEqual(toolbar.get_attribute("data-user-theme"), "auto")
 
         # The theme toggle button is shown on the toolbar
         toggle_button = self.selenium.find_element(By.ID, "djToggleThemeButton")
         self.assertTrue(toggle_button.is_displayed())
 
-        # The theme changes when user clicks the button
-        toggle_button.click()
+        # The browser is set to light mode via Firefox preferences
+        # With light mode system preference, the order is: auto -> dark -> light -> auto
+        # Check that auto initially uses light theme
+        self.assertEqual(toolbar.get_attribute("data-user-theme"), "auto")
         self.assertEqual(toolbar.get_attribute("data-theme"), "light")
-        toggle_button.click()
+
+        # The theme changes when user clicks the button
+        toggle_button.click()  # auto -> dark
+        self.assertEqual(toolbar.get_attribute("data-user-theme"), "dark")
         self.assertEqual(toolbar.get_attribute("data-theme"), "dark")
-        toggle_button.click()
-        self.assertEqual(toolbar.get_attribute("data-theme"), "auto")
-        # Switch back to light.
-        toggle_button.click()
+
+        toggle_button.click()  # dark -> light
+        self.assertEqual(toolbar.get_attribute("data-user-theme"), "light")
+        self.assertEqual(toolbar.get_attribute("data-theme"), "light")
+
+        toggle_button.click()  # light -> auto
+        self.assertEqual(toolbar.get_attribute("data-user-theme"), "auto")
         self.assertEqual(toolbar.get_attribute("data-theme"), "light")
 
         # 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-user-theme"), "auto")
         self.assertEqual(toolbar.get_attribute("data-theme"), "light")
 
     def test_async_sql_action(self):