Add theming support (#1760)

Author: GergelyKalmar

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -1,3 +1,17 @@
+/* Variable definitions */
+:root {
+    /* Font families are the same as in Django admin/css/base.css */
+    --djdt-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI",
+        system-ui, Roboto, "Helvetica Neue", Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+        "Noto Color Emoji";
+    --djdt-font-family-monospace: ui-monospace, Menlo, Monaco, "Cascadia Mono",
+        "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
+        "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New",
+        monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+        "Noto Color Emoji";
+}
+
 /* Debug Toolbar CSS Reset, adapted from Eric Meyer's CSS Reset */
 #djDebug {
     color: #000;
@@ -77,9 +91,7 @@
     color: #000;
     vertical-align: baseline;
     background-color: transparent;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
-        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
-        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: var(--djdt-font-family-primary);
     text-align: left;
     text-shadow: none;
     white-space: normal;
@@ -181,7 +193,7 @@
 
 #djDebug #djDebugToolbar li.djdt-active:before {
     content: "▶";
-    font-family: sans-serif;
+    font-family: var(--djdt-font-family-primary);
     position: absolute;
     left: 0;
     top: 50%;
@@ -246,11 +258,7 @@
 #djDebug pre,
 #djDebug code {
     display: block;
-    font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
-        "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
-        "Fira Mono", "Droid Sans Mono", "Courier New", monospace,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
+    font-family: var(--djdt-font-family-monospace);
     overflow: auto;
 }
 

docs/changes.rst

@@ -8,6 +8,7 @@ Pending
   indentation of ``CASE`` statements and stopped simplifying ``.count()``
   queries.
 * Added support for the new STORAGES setting in Django 4.2 for static files.
+* Added support for theme overrides.
 * Reworked the cache panel instrumentation code to no longer attempt to undo
   monkey patching of cache methods, as that turned out to be fragile in the
   presence of other code which also monkey patches those methods.

docs/configuration.rst

@@ -338,3 +338,26 @@ Here's what a slightly customized toolbar configuration might look like::
         # Panel options
         'SQL_WARNING_THRESHOLD': 100,   # milliseconds
     }
+
+Theming support
+---------------
+The debug toolbar uses CSS variables to define fonts. This allows changing
+fonts without having to override many individual CSS rules. For example, if
+you preferred Roboto instead of the default list of fonts you could add a
+**debug_toolbar/base.html** template override to your project:
+
+.. code-block:: django
+
+    {% extends 'debug_toolbar/base.html' %}
+
+    {% block css %}{{ block.super }}
+    <style>
+        :root {
+            --djdt-font-family-primary: 'Roboto', sans-serif;
+        }
+    </style>
+    {% endblock %}
+
+The list of CSS variables are defined at
+`debug_toolbar/static/debug_toolbar/css/toolbar.css
+<https://github.com/jazzband/django-debug-toolbar/blob/main/debug_toolbar/static/debug_toolbar/css/toolbar.css>`_

docs/spelling_wordlist.txt

@@ -40,12 +40,14 @@ Pympler
 querysets
 refactoring
 resizing
+Roboto
 spellchecking
 spooler
 stacktrace
 stacktraces
 startup
 timeline
+theming
 tox
 Transifex
 unhashable