From 7d76af6910447ad69d4eb05a8ea7a3bd76079564 Mon Sep 17 00:00:00 2001
From: Matthias Kestenholz
Date: Mon, 31 Mar 2025 22:33:00 +0200
Subject: [PATCH 1/2] Refs #2096: The theme selector now controls all colors
Previously, if the system preference was dark mode and the user
explicitly selected the light theme, the @media block still interferred
with the styling. This is fixed by only evaluating the color scheme
preference when initializing the toolbar and later only looking at our
own selected theme.
Also, removed the DEFAULT_THEME setting; falling back to system defaults
seems much better to me.
---
debug_toolbar/settings.py | 1 -
.../static/debug_toolbar/css/toolbar.css | 915 ++++++------------
.../static/debug_toolbar/js/toolbar.js | 39 +-
.../templates/debug_toolbar/base.html | 3 +-
docs/changes.rst | 5 +-
docs/configuration.rst | 7 -
tests/test_integration.py | 9 +-
7 files changed, 352 insertions(+), 627 deletions(-)
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 }}">