Skip to content

Commit

Permalink
Dark mode support (#1913)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheRealVizard
TheRealVizard committed May 14, 2024
1 parent c1463a5 commit 7271cac
Show file tree
Hide file tree
Showing 8 changed files with 242 additions and 46 deletions.
1 change: 1 addition & 0 deletions debug_toolbar/settings.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"TOOLBAR_LANGUAGE": None,
"IS_RUNNING_TESTS": "test" in sys.argv,
"UPDATE_ON_FETCH": False,
"DEFAULT_THEME": "auto",
}


Expand Down
160 changes: 121 additions & 39 deletions debug_toolbar/static/debug_toolbar/css/toolbar.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* Variable definitions */
:root {
:root,
#djDebug[data-theme="light"] {
/* Font families are the same as in Django admin/css/base.css */
--djdt-font-family-primary: "Segoe UI", system-ui, Roboto, "Helvetica Neue",
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
Expand All @@ -9,12 +10,79 @@
"Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New",
monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";

color-scheme: light;
--djdt-font-color: black;
--djdt-background-color: white;
--djdt-panel-content-background-color: #eee;
--djdt-panel-content-table-background-color: var(--djdt-background-color);
--djdt-panel-title-background-color: #ffc;
--djdt-djdt-panel-content-table-strip-background-color: #f5f5f5;
--djdt--highlighted-background-color: lightgrey;
--djdt-toggle-template-background-color: #bbb;

--djdt-sql-font-color: #333;
--djdt-pre-text-color: #555;
--djdt-path-and-locals: #777;
--djdt-stack-span-color: black;
--djdt-template-highlight-color: #333;

--djdt-table-border-color: #ccc;
--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);
}

@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--djdt-font-color: #8393a7;
--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"] {
color-scheme: dark;
--djdt-font-color: #8393a7;
--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);
}

/* Debug Toolbar CSS Reset, adapted from Eric Meyer's CSS Reset */
#djDebug {
color: #000;
background: #fff;
color: var(--djdt-font-color);
background: var(--djdt-background-color);
}
#djDebug,
#djDebug div,
Expand Down Expand Up @@ -87,7 +155,7 @@
outline: 0;
font-size: 12px;
line-height: 1.5em;
color: #000;
color: var(--djdt-font-color);
vertical-align: baseline;
background-color: transparent;
font-family: var(--djdt-font-family-primary);
Expand All @@ -100,7 +168,7 @@
#djDebug button {
background-color: #eee;
background-image: linear-gradient(to bottom, #eee, #cccccc);
border: 1px solid #ccc;
border: 1px solid var(--djdt-button-border-color);
border-bottom: 1px solid #bbb;
border-radius: 3px;
color: #333;
Expand Down Expand Up @@ -268,10 +336,10 @@

#djDebug pre {
white-space: pre-wrap;
color: #555;
border: 1px solid #ccc;
color: var(--djdt-pre-text-color);
border: 1px solid var(--djdt-pre-border-color);
border-collapse: collapse;
background-color: #fff;
background-color: var(--djdt-background-color);
padding: 2px 3px;
margin-bottom: 3px;
}
Expand All @@ -283,7 +351,7 @@
right: 220px;
bottom: 0;
left: 0px;
background-color: #eee;
background-color: var(--djdt-panel-content-background-color);
color: #666;
z-index: 100000000;
}
Expand All @@ -294,7 +362,7 @@

#djDebug .djDebugPanelTitle {
position: absolute;
background-color: #ffc;
background-color: var(--djdt-panel-title-background-color);
color: #666;
padding-left: 20px;
top: 0;
Expand Down Expand Up @@ -357,16 +425,16 @@
}

#djDebug .djdt-panelContent table {
border: 1px solid #ccc;
border: 1px solid var(--djdt-table-border-color);
border-collapse: collapse;
width: 100%;
background-color: #fff;
background-color: var(--djdt-panel-content-table-background-color);
display: table;
margin-top: 0.8em;
overflow: auto;
}
#djDebug .djdt-panelContent tbody > tr:nth-child(odd):not(.djdt-highlighted) {
background-color: #f5f5f5;
background-color: var(--djdt-panel-content-table-strip-background-color);
}
#djDebug .djdt-panelContent tbody td,
#djDebug .djdt-panelContent tbody th {
Expand All @@ -392,7 +460,7 @@
}

#djDebug .djTemplateContext {
background-color: #fff;
background-color: var(--djdt-background-color);
}

#djDebug .djdt-panelContent .djDebugClose {
Expand Down Expand Up @@ -433,7 +501,7 @@

#djDebug a.toggleTemplate {
padding: 4px;
background-color: #bbb;
background-color: var(--djdt-toggle-template-background-color);
border-radius: 3px;
}

Expand All @@ -445,11 +513,11 @@
}

#djDebug .djDebugCollapsed {
color: #333;
color: var(--djdt-sql-font-color);
}

#djDebug .djDebugUncollapsed {
color: #333;
color: var(--djdt-sql-font-color);
}

#djDebug .djUnselected {
Expand Down Expand Up @@ -483,66 +551,66 @@
}

#djDebug .highlight {
color: #000;
color: var(--djdt-font-color);
}
#djDebug .highlight .err {
color: #000;
color: var(--djdt-font-color);
} /* Error */
#djDebug .highlight .g {
color: #000;
color: var(--djdt-font-color);
} /* Generic */
#djDebug .highlight .k {
color: #000;
color: var(--djdt-font-color);
font-weight: bold;
} /* Keyword */
#djDebug .highlight .o {
color: #000;
color: var(--djdt-font-color);
} /* Operator */
#djDebug .highlight .n {
color: #000;
color: var(--djdt-font-color);
} /* Name */
#djDebug .highlight .mi {
color: #000;
color: var(--djdt-font-color);
font-weight: bold;
} /* Literal.Number.Integer */
#djDebug .highlight .l {
color: #000;
color: var(--djdt-font-color);
} /* Literal */
#djDebug .highlight .x {
color: #000;
color: var(--djdt-font-color);
} /* Other */
#djDebug .highlight .p {
color: #000;
color: var(--djdt-font-color);
} /* Punctuation */
#djDebug .highlight .m {
color: #000;
color: var(--djdt-font-color);
font-weight: bold;
} /* Literal.Number */
#djDebug .highlight .s {
color: #333;
color: var(--djdt-template-highlight-color);
} /* Literal.String */
#djDebug .highlight .w {
color: #888888;
} /* Text.Whitespace */
#djDebug .highlight .il {
color: #000;
color: var(--djdt-font-color);
font-weight: bold;
} /* Literal.Number.Integer.Long */
#djDebug .highlight .na {
color: #333;
color: var(--djdt-template-highlight-color);
} /* Name.Attribute */
#djDebug .highlight .nt {
color: #000;
color: var(--djdt-font-color);
font-weight: bold;
} /* Name.Tag */
#djDebug .highlight .nv {
color: #333;
color: var(--djdt-template-highlight-color);
} /* Name.Variable */
#djDebug .highlight .s2 {
color: #333;
color: var(--djdt-template-highlight-color);
} /* Literal.String.Double */
#djDebug .highlight .cp {
color: #333;
color: var(--djdt-template-highlight-color);
} /* Comment.Preproc */

#djDebug svg.djDebugLineChart {
Expand Down Expand Up @@ -595,13 +663,13 @@
}

#djDebug .djdt-stack span {
color: #000;
color: var(--djdt-stack-span-color);
font-weight: bold;
}
#djDebug .djdt-stack span.djdt-path,
#djDebug .djdt-stack pre.djdt-locals,
#djDebug .djdt-stack pre.djdt-locals span {
color: #777;
color: var(--djdt-path-and-locals);
font-weight: normal;
}
#djDebug .djdt-stack span.djdt-code {
Expand All @@ -612,7 +680,7 @@
}
#djDebug .djdt-raw {
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid var(--djdt-raw-border-color);
margin-top: 0.8em;
padding: 5px;
white-space: pre-wrap;
Expand All @@ -631,7 +699,7 @@
max-height: 100%;
}
#djDebug .djdt-highlighted {
background-color: lightgrey;
background-color: var(--djdt--highlighted-background-color);
}
#djDebug tr.djdt-highlighted.djdt-profile-row {
background-color: #ffc;
Expand All @@ -654,3 +722,17 @@
.djdt-hidden {
display: none;
}

#djDebug #djDebugToolbar a#djToggleThemeButton {
display: flex;
align-items: center;
cursor: pointer;
}
#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 {
display: block;
}
27 changes: 25 additions & 2 deletions debug_toolbar/static/debug_toolbar/js/toolbar.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { $$, ajax, replaceToolbarState, debounce } from "./utils.js";
import { $$, ajax, debounce, replaceToolbarState } from "./utils.js";

function onKeyDown(event) {
if (event.keyCode === 27) {
Expand Down Expand Up @@ -213,6 +213,29 @@ const djdt = {
if (djDebug.dataset.sidebarUrl !== undefined) {
djdt.updateOnAjax();
}

// Updates the theme using user settings
const userTheme = localStorage.getItem("djdt.user-theme");
if (userTheme !== null) {
djDebug.setAttribute("data-theme", userTheme);
}
// Adds the listener to the Theme Toggle Button
$$.on(djDebug, "click", "#djToggleThemeButton", function () {
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;
}
});
},
hidePanels() {
const djDebug = getDebugElement();
Expand Down Expand Up @@ -276,7 +299,7 @@ const djdt = {
storeId = encodeURIComponent(storeId);
const dest = `${sidebarUrl}?store_id=${storeId}`;
slowjax(dest).then(function (data) {
if (djdt.needUpdateOnFetch){
if (djdt.needUpdateOnFetch) {
replaceToolbarState(storeId, data);
}
});
Expand Down
8 changes: 7 additions & 1 deletion debug_toolbar/templates/debug_toolbar/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,16 @@
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 }}">
{{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }} data-update-on-fetch="{{ toolbar.config.UPDATE_ON_FETCH }}"
data-theme="{{ toolbar.config.DEFAULT_THEME }}">
<div class="djdt-hidden" id="djDebugToolbar">
<ul id="djDebugPanelList">
<li><a id="djHideToolBarButton" href="#" title="{% trans 'Hide toolbar' %}">{% trans "Hide" %} »</a></li>
<li>
<a id="djToggleThemeButton" href="#" title="{% trans 'Toggle Theme' %}">
{% trans "Toggle Theme" %} {% include "debug_toolbar/includes/theme_selector.html" %}
</a>
</li>
{% for panel in toolbar.panels %}
{% include "debug_toolbar/includes/panel_button.html" %}
{% endfor %}
Expand Down

0 comments on commit 7271cac

Please sign in to comment.