diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index ee54d2d5d..852048216 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -14,10 +14,15 @@ repos: hooks: - id: doc8 - repo: https://github.com/adamchainz/django-upgrade - rev: 1.23.1 + rev: 1.24.0 hooks: - id: django-upgrade args: [--target-version, "4.2"] +- repo: https://github.com/adamchainz/djade-pre-commit + rev: "1.4.0" + hooks: + - id: djade + args: [--target-version, "4.2"] - repo: https://github.com/pre-commit/pygrep-hooks rev: v1.10.0 hooks: @@ -29,7 +34,7 @@ repos: - id: biome-check verbose: true - repo: https://github.com/astral-sh/ruff-pre-commit - rev: 'v0.11.0' + rev: 'v0.11.7' hooks: - id: ruff args: [--fix, --exit-non-zero-on-fix] @@ -39,6 +44,6 @@ repos: hooks: - id: pyproject-fmt - repo: https://github.com/abravalheri/validate-pyproject - rev: v0.24 + rev: v0.24.1 hooks: - id: validate-pyproject diff --git a/README.rst b/README.rst index 3c831efa7..6c7da3615 100644 --- a/README.rst +++ b/README.rst @@ -40,7 +40,7 @@ Here's a screenshot of the toolbar in action: In addition to the built-in panels, a number of third-party panels are contributed by the community. -The current stable version of the Debug Toolbar is 5.1.0. It works on +The current stable version of the Debug Toolbar is 5.2.0. It works on Django ≥ 4.2.0. The Debug Toolbar has experimental support for `Django's asynchronous views diff --git a/debug_toolbar/__init__.py b/debug_toolbar/__init__.py index 5bdaa2dd1..770c5eeed 100644 --- a/debug_toolbar/__init__.py +++ b/debug_toolbar/__init__.py @@ -4,7 +4,7 @@ # Do not use pkg_resources to find the version but set it here directly! # see issue #1446 -VERSION = "5.1.0" +VERSION = "5.2.0" # Code that discovers files or modules in INSTALLED_APPS imports this module. urls = "debug_toolbar.urls", APP_NAME diff --git a/debug_toolbar/panels/redirects.py b/debug_toolbar/panels/redirects.py index 27cce4c17..8055c67ad 100644 --- a/debug_toolbar/panels/redirects.py +++ b/debug_toolbar/panels/redirects.py @@ -22,20 +22,8 @@ def _process_response(self, response): Common response processing logic. """ if 300 <= response.status_code < 400: - redirect_to = response.get("Location") - if redirect_to: - status_line = f"{response.status_code} {response.reason_phrase}" - cookies = response.cookies - context = { - "redirect_to": redirect_to, - "status_line": status_line, - "toolbar": self.toolbar, - } - # Using SimpleTemplateResponse avoids running global context processors. - response = SimpleTemplateResponse( - "debug_toolbar/redirect.html", context - ) - response.cookies = cookies + if redirect_to := response.get("Location"): + response = self.get_interception_response(response, redirect_to) response.render() return response @@ -53,3 +41,22 @@ def process_request(self, request): if iscoroutine(response): return self.aprocess_request(request, response) return self._process_response(response) + + def get_interception_response(self, response, redirect_to): + """ + Hook method to allow subclasses to customize the interception response. + """ + status_line = f"{response.status_code} {response.reason_phrase}" + cookies = response.cookies + original_response = response + context = { + "redirect_to": redirect_to, + "status_line": status_line, + "toolbar": self.toolbar, + "original_response": original_response, + } + # Using SimpleTemplateResponse avoids running global context processors. + response = SimpleTemplateResponse("debug_toolbar/redirect.html", context) + response.cookies = cookies + response.original_response = original_response + return response diff --git a/debug_toolbar/panels/request.py b/debug_toolbar/panels/request.py index b77788637..5a24d6179 100644 --- a/debug_toolbar/panels/request.py +++ b/debug_toolbar/panels/request.py @@ -3,7 +3,7 @@ from django.utils.translation import gettext_lazy as _ from debug_toolbar.panels import Panel -from debug_toolbar.utils import get_name_from_obj, get_sorted_request_variable +from debug_toolbar.utils import get_name_from_obj, sanitize_and_sort_request_vars class RequestPanel(Panel): @@ -26,9 +26,9 @@ def nav_subtitle(self): def generate_stats(self, request, response): self.record_stats( { - "get": get_sorted_request_variable(request.GET), - "post": get_sorted_request_variable(request.POST), - "cookies": get_sorted_request_variable(request.COOKIES), + "get": sanitize_and_sort_request_vars(request.GET), + "post": sanitize_and_sort_request_vars(request.POST), + "cookies": sanitize_and_sort_request_vars(request.COOKIES), } ) @@ -59,13 +59,5 @@ def generate_stats(self, request, response): self.record_stats(view_info) if hasattr(request, "session"): - try: - session_list = [ - (k, request.session.get(k)) for k in sorted(request.session.keys()) - ] - except TypeError: - session_list = [ - (k, request.session.get(k)) - for k in request.session.keys() # (it's not a dict) - ] - self.record_stats({"session": {"list": session_list}}) + session_data = dict(request.session) + self.record_stats({"session": sanitize_and_sort_request_vars(session_data)}) diff --git a/debug_toolbar/panels/templates/views.py b/debug_toolbar/panels/templates/views.py index 898639c54..b8a0a376f 100644 --- a/debug_toolbar/panels/templates/views.py +++ b/debug_toolbar/panels/templates/views.py @@ -27,15 +27,18 @@ def template_source(request): template_name = request.GET.get("template", template_origin_name) final_loaders = [] - loaders = Engine.get_default().template_loaders + loaders = list(Engine.get_default().template_loaders) + + while loaders: + loader = loaders.pop(0) - for loader in loaders: if loader is not None: - # When the loader has loaders associated with it, - # append those loaders to the list. This occurs with - # django.template.loaders.cached.Loader + # Recursively unwrap loaders until we get to loaders which do not + # themselves wrap other loaders. This adds support for + # django.template.loaders.cached.Loader and the + # django-template-partials loader (possibly among others) if hasattr(loader, "loaders"): - final_loaders += loader.loaders + loaders.extend(loader.loaders) else: final_loaders.append(loader) 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 3d0d34e6c..f147bcdff 100644 --- a/debug_toolbar/static/debug_toolbar/css/toolbar.css +++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css @@ -35,31 +35,8 @@ --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: #8393a7; + --djdt-font-color: #f8f8f2; --djdt-background-color: #1e293bff; --djdt-panel-content-background-color: #0f1729ff; --djdt-panel-content-table-background-color: var(--djdt-background-color); @@ -150,8 +127,10 @@ #djDebug button { margin: 0; padding: 0; - min-width: 0; + min-width: auto; width: auto; + min-height: auto; + height: auto; border: 0; outline: 0; font-size: 12px; @@ -569,266 +548,512 @@ 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 */ +#djDebug[data-theme="dark"] .highlight .hll { + background-color: #f1fa8c; +} +#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%; height: 1.5em; @@ -947,9 +1172,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/static/debug_toolbar/js/utils.js b/debug_toolbar/static/debug_toolbar/js/utils.js index c42963fe3..0cfa80474 100644 --- a/debug_toolbar/static/debug_toolbar/js/utils.js +++ b/debug_toolbar/static/debug_toolbar/js/utils.js @@ -90,7 +90,7 @@ function ajax(url, init) { }) .catch((error) => { const win = document.getElementById("djDebugWindow"); - win.innerHTML = `