diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index 154aaafa5..4adb0abb5 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/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;
}
diff --git a/docs/changes.rst b/docs/changes.rst
index 6844b5ce8..2dc3f2528 100644
--- a/docs/changes.rst
+++ b/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.
diff --git a/docs/configuration.rst b/docs/configuration.rst
index 86cb65ce4..887608c6e 100644
--- a/docs/configuration.rst
+++ b/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 }}
+
+ {% endblock %}
+
+The list of CSS variables are defined at
+`debug_toolbar/static/debug_toolbar/css/toolbar.css
+`_
diff --git a/docs/spelling_wordlist.txt b/docs/spelling_wordlist.txt
index 1741b405b..d5aa73afe 100644
--- a/docs/spelling_wordlist.txt
+++ b/docs/spelling_wordlist.txt
@@ -40,12 +40,14 @@ Pympler
querysets
refactoring
resizing
+Roboto
spellchecking
spooler
stacktrace
stacktraces
startup
timeline
+theming
tox
Transifex
unhashable