Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add theming support #1760

Merged
merged 13 commits into from
May 9, 2023
Merged

Add theming support #1760

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4f3f38f
Add theming support
GergelyKalmar Apr 10, 2023
868d368
Update changes
GergelyKalmar Apr 10, 2023
d2abc8b
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Apr 10, 2023
de811a7
Merge branch 'add-theming-support' of github.com:GergelyKalmar/django…
GergelyKalmar Apr 10, 2023
a09c55c
Update formatting
GergelyKalmar Apr 10, 2023
7a60eff
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Apr 10, 2023
09757db
Update wording
GergelyKalmar Apr 10, 2023
c29878d
Merge branch 'add-theming-support' of github.com:GergelyKalmar/django…
GergelyKalmar Apr 10, 2023
8257c9c
Add documentation
GergelyKalmar May 8, 2023
a44c907
Apply suggestions from code review
GergelyKalmar May 8, 2023
c82da8d
Add prefix to CSS variables
GergelyKalmar May 8, 2023
a6ab036
Add new words to wordlist
GergelyKalmar May 9, 2023
81e3a70
Merge branch 'main' into add-theming-support
GergelyKalmar May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 17 additions & 9 deletions debug_toolbar/static/debug_toolbar/css/toolbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
/* Varible definitions */
GergelyKalmar marked this conversation as resolved.
Show resolved Hide resolved
:root {
/* Font families are the same as in Django admin/css/base.css */
--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";
--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;
Expand Down Expand Up @@ -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(--font-family-primary);
text-align: left;
text-shadow: none;
white-space: normal;
Expand Down Expand Up @@ -179,7 +191,7 @@

#djDebug #djDebugToolbar li.djdt-active:before {
content: "▶";
font-family: sans-serif;
font-family: var(--font-family-primary);
position: absolute;
left: 0;
top: 50%;
Expand Down Expand Up @@ -244,11 +256,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(--font-family-monospace);
overflow: auto;
}

Expand Down
1 change: 1 addition & 0 deletions debug_toolbar/templates/debug_toolbar/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<link rel="stylesheet" href="{% static 'debug_toolbar/css/print.css' %}" media="print">
<link rel="stylesheet" href="{% static 'debug_toolbar/css/toolbar.css' %}">
{% endblock %}
{% block extrastyle %}{% endblock %}
GergelyKalmar marked this conversation as resolved.
Show resolved Hide resolved
{% block js %}
<script type="module" src="{% static 'debug_toolbar/js/toolbar.js' %}" async></script>
{% endblock %}
Expand Down
1 change: 1 addition & 0 deletions docs/changes.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

4.0.0 (2023-04-03)
------------------
Expand Down
23 changes: 23 additions & 0 deletions docs/configuration.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 extrastyle %}{{ block.super }}
GergelyKalmar marked this conversation as resolved.
Show resolved Hide resolved
<style>
:root {
--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>`_