Skip to content

Commit a529211

Browse files
ekvedarasbarryvdh
ekvedaras
and
barryvdh
authored
Add dark mode (barryvdh#1074)
* Add dark mode * Add a new config option to control dark mode. Supported modes: auto, dark, light Optimize dark mode css * Implement dark mode using multiple css files * Add Dracula theme for HighlighJS Based on https://github.com/dracula/highlightjs/blob/master/dracula.css * Update laravel-debugbar-dark-mode.css Co-authored-by: Barry vd. Heuvel <barryvdh@gmail.com>
1 parent 31f660f commit a529211

6 files changed

+290
-3
lines changed

‎config/debugbar.php

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,4 +202,14 @@
202202
| To override default domain, specify it as a non-empty value.
203203
*/
204204
'route_domain' => null,
205+
206+
/*
207+
|--------------------------------------------------------------------------
208+
| DebugBar theme
209+
|--------------------------------------------------------------------------
210+
|
211+
| Switches between light and dark theme. If set to auto it will respect system preferences
212+
| Possible values: auto, light, dark
213+
*/
214+
'theme' => 'auto',
205215
];

‎src/JavascriptRenderer.php

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,17 @@ public function __construct(DebugBar $debugBar, $baseUrl = null, $basePath = nul
2121
$this->cssVendors['fontawesome'] = __DIR__ . '/Resources/vendor/font-awesome/style.css';
2222
$this->jsFiles['laravel-sql'] = __DIR__ . '/Resources/sqlqueries/widget.js';
2323
$this->jsFiles['laravel-cache'] = __DIR__ . '/Resources/cache/widget.js';
24+
25+
$theme = config('debugbar.theme', 'auto');
26+
switch ($theme) {
27+
case 'dark':
28+
$this->cssFiles['laravel-dark'] = __DIR__ . '/Resources/laravel-debugbar-dark-mode.css';
29+
break;
30+
case 'auto':
31+
$this->cssFiles['laravel-dark-0'] = __DIR__ . '/Resources/laravel-debugbar-dark-mode-media-start.css';
32+
$this->cssFiles['laravel-dark-1'] = __DIR__ . '/Resources/laravel-debugbar-dark-mode.css';
33+
$this->cssFiles['laravel-dark-2'] = __DIR__ . '/Resources/laravel-debugbar-dark-mode-media-end.css';
34+
}
2435
}
2536

2637
/**

‎src/Resources/laravel-debugbar-dark-mode-media-end.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
}

‎src/Resources/laravel-debugbar-dark-mode-media-start.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@media (prefers-color-scheme: dark) {

‎src/Resources/laravel-debugbar-dark-mode.css

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
/* Dark mode */
2+
3+
div.phpdebugbar,
4+
div.phpdebugbar-openhandler {
5+
--color-gray-100: #F7FAFC;
6+
--color-gray-200: #EDF2F7;
7+
--color-gray-300: #E2E8F0;
8+
--color-gray-400: #CBD5E0;
9+
--color-gray-500: #A0AEC0;
10+
--color-gray-600: #718096;
11+
--color-gray-700: #4A5568;
12+
--color-gray-800: #2D3748;
13+
--color-gray-900: #1A202C;
14+
--color-red-vivid: #FF0040;
15+
}
16+
17+
div.phpdebugbar,
18+
div.phpdebugbar-openhandler {
19+
background: var(--color-gray-800);
20+
}
21+
22+
div.phpdebugbar,
23+
div.phpdebugbar-openhandler,
24+
div.phpdebugbar div.phpdebugbar-header > div > *,
25+
div.phpdebugbar ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label,
26+
div.phpdebugbar ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-collector,
27+
div.phpdebugbar code.phpdebugbar-widgets-sql span.hljs-keyword,
28+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-header,
29+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-header a {
30+
color: var(--color-gray-200);
31+
}
32+
33+
div.phpdebugbar-openhandler,
34+
div.phpdebugbar div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar,
35+
div.phpdebugbar div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item pre.phpdebugbar-widgets-file,
36+
div.phpdebugbar ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params,
37+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > a,
38+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button,
39+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form input,
40+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select {
41+
border-color: var(--color-gray-600);
42+
}
43+
44+
div.phpdebugbar div.phpdebugbar-header,
45+
div.phpdebugbar div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before,
46+
div.phpdebugbar-openhandler table th,
47+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > a,
48+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button,
49+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form input,
50+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select {
51+
text-shadow: 1px 1px var(--color-gray-700);
52+
}
53+
54+
div.phpdebugbar div.phpdebugbar-header > div > select,
55+
div.phpdebugbar ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params,
56+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form input,
57+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select,
58+
div.phpdebugbar input[type='text'],
59+
div.phpdebugbar input[type='password'] {
60+
background-color: var(--color-gray-800);
61+
}
62+
63+
div.phpdebugbar div.phpdebugbar-header,
64+
div.phpdebugbar a.phpdebugbar-restore-btn,
65+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-header,
66+
div.phpdebugbar dl.phpdebugbar-widgets-kvlist > :nth-child(4n-1),
67+
div.phpdebugbar dl.phpdebugbar-widgets-kvlist > :nth-child(4n),
68+
div.phpdebugbar ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:nth-child(even),
69+
div.phpdebugbar .hljs,
70+
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params th,
71+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > a,
72+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button,
73+
div.phpdebugbar div.phpdebugbar-widgets-templates table.phpdebugbar-widgets-params th {
74+
background-color: var(--color-gray-900);
75+
}
76+
77+
div.phpdebugbar .phpdebugbar-widgets-mails ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item .phpdebugbar-widgets-headers,
78+
div.phpdebugbar ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params {
79+
border-left-color: var(--color-gray-600);
80+
}
81+
82+
div.phpdebugbar a.phpdebugbar-tab:hover,
83+
div.phpdebugbar span.phpdebugbar-indicator:hover,
84+
div.phpdebugbar a.phpdebugbar-indicator:hover,
85+
div.phpdebugbar a.phpdebugbar-close-btn:hover,
86+
div.phpdebugbar a.phpdebugbar-minimize-btn:hover,
87+
div.phpdebugbar a.phpdebugbar-maximize-btn:hover,
88+
div.phpdebugbar a.phpdebugbar-open-btn:hover,
89+
div.phpdebugbar-openhandler table th,
90+
div.phpdebugbar-openhandler table tr:nth-child(2n),
91+
div.phpdebugbar div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
92+
background-color: var(--color-gray-700);
93+
}
94+
95+
div.phpdebugbar .phpdebugbar-indicator span.phpdebugbar-tooltip,
96+
div.phpdebugbar div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text,
97+
div.phpdebugbar pre.sf-dump,
98+
div.phpdebugbar .hljs,
99+
div.phpdebugbar code.phpdebugbar-widgets-sql span.hljs-operator {
100+
color: var(--color-gray-100);
101+
}
102+
103+
div.phpdebugbar div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before,
104+
div.phpdebugbar-openhandler a {
105+
color: var(--color-gray-500);
106+
}
107+
108+
div.phpdebugbar .phpdebugbar-indicator span.phpdebugbar-tooltip,
109+
div.phpdebugbar div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text {
110+
background: var(--color-gray-900);
111+
}
112+
113+
div.phpdebugbar .hljs-tag .hljs-value,
114+
div.phpdebugbar .hljs-phpdoc,
115+
div.phpdebugbar .tex .hljs-formula,
116+
div.phpdebugbar div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-message {
117+
color: var(--color-red-vivid);
118+
}
119+
120+
div.phpdebugbar div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-filename,
121+
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-database,
122+
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-duration,
123+
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-memory,
124+
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-row-count,
125+
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-copy-clipboard,
126+
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-stmt-id,
127+
div.phpdebugbar .phpdebugbar-text-muted,
128+
div.phpdebugbar-openhandler .phpdebugbar-text-muted
129+
{
130+
color: var(--color-gray-600);
131+
}
132+
133+
div.phpdebugbar-openhandler {
134+
border-top-color: #fa5661;
135+
}
136+
137+
div.phpdebugbar div.phpdebugbar-header .phpdebugbar-tab {
138+
border-left-color: var(--color-gray-800);
139+
}
140+
141+
div.phpdebugbar div.phpdebugbar-body {
142+
border-top-color: var(--color-gray-800);
143+
}
144+
145+
div.phpdebugbar a.phpdebugbar-restore-btn {
146+
border-right-color: var(--color-gray-800) !important;
147+
}
148+
149+
div.phpdebugbar span.phpdebugbar-indicator,
150+
div.phpdebugbar a.phpdebugbar-indicator,
151+
div.phpdebugbar a.phpdebugbar-close-btn {
152+
border-right-color: var(--color-gray-800);
153+
}
154+
155+
div.phpdebugbar div.phpdebugbar-panel div.phpdebugbar-widgets-status {
156+
background-color: var(--color-gray-900) !important;
157+
border-bottom-color: var(--color-gray-800) !important;
158+
}
159+
160+
div.phpdebugbar div.phpdebugbar-widgets-templates div.phpdebugbar-widgets-status {
161+
background: var(--color-gray-900) !important;
162+
}
163+
164+
div.phpdebugbar div.phpdebugbar-panel div.phpdebugbar-widgets-status > * {
165+
color: var(--color-gray-200) !important;
166+
}
167+
168+
div.phpdebugbar div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-render-time,
169+
div.phpdebugbar div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-memory,
170+
div.phpdebugbar div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-param-count,
171+
div.phpdebugbar div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-type {
172+
color: var(--color-gray-600) !important;
173+
}
174+
175+
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td {
176+
border-color: var(--color-gray-600) !important;
177+
}
178+
179+
div.phpdebugbar code,
180+
div.phpdebugbar pre {
181+
color: #FFF;
182+
}
183+
184+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > a,
185+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button,
186+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form input,
187+
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select,
188+
div.phpdebugbar input[type='text'],
189+
div.phpdebugbar input[type='password'] {
190+
color: var(--color-gray-300);
191+
}
192+
193+
div.phpdebugbar a.phpdebugbar-minimize-btn {
194+
background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201792%201792%22%20id%3D%22chevron-down%22%3E%3Cpath%20d%3D%22M1683%20808l-742%20741q-19%2019-45%2019t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19%2045-19t45%2019l531%20531%20531-531q19-19%2045-19t45%2019l166%20165q19%2019%2019%2045.5t-19%2045.5z%22%20style%3D%22fill%3A%20%23EDF2F7%22%2F%3E%3C%2Fsvg%3E) no-repeat 6px 6px / 14px 14px;
195+
}
196+
197+
div.phpdebugbar a.phpdebugbar-maximize-btn {
198+
background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201792%201792%22%20id%3D%22chevron-up%22%3E%3Cpath%20d%3D%22M1683%201331l-166%20165q-19%2019-45%2019t-45-19l-531-531-531%20531q-19%2019-45%2019t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19%2045-19t45%2019l742%20741q19%2019%2019%2045.5t-19%2045.5z%22%20style%3D%22fill%3A%20%23EDF2F7%22%2F%3E%3C%2Fsvg%3E) no-repeat 6px 6px / 14px 14px;
199+
}
200+
201+
div.phpdebugbar a.phpdebugbar-open-btn {
202+
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAYAAADJ7fe0AAABL0lEQVQ4T63RvWqEQBAA4LkjdX46WQh5hoDpFnyAgGzKWKQJdgFfIT8vIKSwCSEQHyJN4AptomAlZMXAVRuxWAwibqMGBUVygdtAplmWmf1mmVnAP8RiNDjne0KINQDsz9wCIXSwrc+AMMa6tm0hz3PozzGWyyUoirJhIISm5n1yuIRh2G3rNs+rqvo7IoTIMMbnkthqXjf9JAiCO0LIR9d1T5JQXzbMbEA8z/vEGB9TSt/KsjyURZIkeTQM43JAHMe5JYS8Zlm2appG1gDXdbFt2/44IIVS+lCW5amswBh70XX9DADEuOIjzvlaCCFrgO/7F5ZlPU8rTtP0viiKK1mhqqpU07STfrATEsfxV13Xu7JIFEU3pmlej/XjTDAA7MgiAPAOANlP5A/vN0u/AXUIgA+u4l6FAAAAAElFTkSuQmCC) no-repeat 8px 6px;
203+
}
204+
205+
div.phpdebugbar a.phpdebugbar-close-btn {
206+
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABUElEQVQ4T52SMUsDMRTH3xUPChHCxeko3YrUqeFGEexym3boJ9DBufhJpLODfoIbTrcuFcSxxMki3Uq5yZRAAweRVp70HdfWQZolb3i/l/x/iQd7Lm9PDjbA2Wz24HmerFarbSGEwaFaa57n+XC1WqlarXZNBxUgQsaYK+ccCCHeGWPn2GStfdFat3zfB875I8EFOBqNPpbLZRObsQnh9YktHIarUqmMoyg6wboApZTtfr9/zxhrEIw7QdbaSa/Xu1FKDTdAADiQUp6VYcpTgl4B4HsbhCRJjsIwfPN9/7hs2zn3mWXZabfb/dqRg/ZIBF2PmigzCiPbRcbpdKrQXjkTguXMKKxer8uNqw4Gg6cgCC7WT/ArAuty5vl8/hzH8eV2xmaapnec88baHooAEmaMmXQ6nVsAGO/IAQB8x0MAUGQPbSMPAAuC/gL//XV/ALsvnQ+MsaHgAAAAAElFTkSuQmCC) no-repeat 9px 6px;
207+
}
208+
209+
210+
/* Dracula Theme v1.2.5
211+
*
212+
* https://github.com/dracula/highlightjs
213+
*
214+
* Copyright 2016-present, All rights reserved
215+
*
216+
* Code licensed under the MIT license
217+
*
218+
* @author Denis Ciccale <dciccale@gmail.com>
219+
* @author Zeno Rocha <hi@zenorocha.com>
220+
*/
221+
222+
div.phpdebugbar .hljs-built_in,
223+
div.phpdebugbar .hljs-selector-tag,
224+
div.phpdebugbar .hljs-section,
225+
div.phpdebugbar .hljs-link {
226+
color: #8be9fd;
227+
}
228+
229+
div.phpdebugbar .hljs-keyword {
230+
color: #ff79c6;
231+
}
232+
233+
div.phpdebugbar .hljs,
234+
div.phpdebugbar .hljs-subst {
235+
color: #f8f8f2;
236+
}
237+
238+
div.phpdebugbar .hljs-title {
239+
color: #50fa7b;
240+
}
241+
242+
div.phpdebugbar .hljs-string,
243+
div.phpdebugbar .hljs-meta,
244+
div.phpdebugbar .hljs-name,
245+
div.phpdebugbar .hljs-type,
246+
div.phpdebugbar .hljs-attr,
247+
div.phpdebugbar .hljs-symbol,
248+
div.phpdebugbar .hljs-bullet,
249+
div.phpdebugbar .hljs-addition,
250+
div.phpdebugbar .hljs-variable,
251+
div.phpdebugbar .hljs-template-tag,
252+
div.phpdebugbar .hljs-template-variable {
253+
color: #f1fa8c;
254+
}
255+
256+
div.phpdebugbar .hljs-comment,
257+
div.phpdebugbar .hljs-quote,
258+
div.phpdebugbar .hljs-deletion {
259+
color: #6272a4;
260+
}
261+
262+
div.phpdebugbar .hljs-literal,
263+
div.phpdebugbar .hljs-number {
264+
color: #bd93f9;
265+
}

‎src/Resources/laravel-debugbar.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
/* Force Laravel Whoops exception handler to be displayed under the debug bar */
32
.Whoops.container {
43
z-index: 5999999;
@@ -383,7 +382,7 @@ div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-w
383382
text-shadow: 1px 1px #585858;
384383
transition: background-color .25s linear 0s, color .25s linear 0s;
385384
color: #FFF;
386-
385+
387386
-webkit-touch-callout: none;
388387
-webkit-user-select: none;
389388
-khtml-user-select: none;
@@ -473,7 +472,7 @@ div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text {
473472
white-space: nowrap;
474473
padding: 2px 18px;
475474
text-shadow: none;
476-
475+
477476
-webkit-touch-callout: none;
478477
-webkit-user-select: none;
479478
-khtml-user-select: none;

0 commit comments

Comments
 (0)