Skip to content

Commit 9f119d1

Browse files
barryvdhbarryvdh
committed
Remove text-shadow, use variables for dark mode
1 parent 23e40a2 commit 9f119d1

File tree

3 files changed

+47
-76
lines changed

3 files changed

+47
-76
lines changed

‎src/JavascriptRenderer.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ public function __construct(DebugBar $debugBar, $baseUrl = null, $basePath = nul
2020
parent::__construct($debugBar, $baseUrl, $basePath);
2121

2222
$this->cssFiles['laravel'] = __DIR__ . '/Resources/laravel-debugbar.css';
23-
$this->cssFiles['laravel-darkmode'] = __DIR__ . '/Resources/laravel-debugbar-dark-mode.css';
2423
$this->jsFiles['laravel-cache'] = __DIR__ . '/Resources/cache/widget.js';
2524
$this->jsFiles['laravel-queries'] = __DIR__ . '/Resources/queries/widget.js';
2625

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

Lines changed: 0 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1 @@
1-
/* Dark mode */
2-
div.phpdebugbar[data-theme='dark'],
3-
div.phpdebugbar-openhandler[data-theme='dark'] {
4-
--color-gray-100: #F7FAFC;
5-
--color-gray-200: #EDF2F7;
6-
--color-gray-300: #E2E8F0;
7-
--color-gray-400: #CBD5E0;
8-
--color-gray-500: #A0AEC0;
9-
--color-gray-600: #718096;
10-
--color-gray-700: #4A5568;
11-
--color-gray-800: #252a37;
12-
--color-gray-900: #18181b;
13-
--color-red-vivid: #eb4432;
14-
15-
--color-background: var(--color-gray-800);
16-
--color-text: var(--color-gray-100);
17-
--color-text-muted: var(--color-gray-600);
18-
--color-border: var(--color-gray-600);
19-
20-
--color-header:var(--color-gray-900);
21-
--color-header-text: var(--color-gray-200);
22-
--color-header-border: var(--color-gray-800);
23-
24-
/*--color-active: #444;*/
25-
/*--color-active-text: #e0e0e0;*/
26-
27-
--color-icons: var(--color-header-text);
28-
--color-badge: #fff;
29-
--color-badge-text: var(--color-red-vivid);
30-
31-
--color-badge-active: var(--color-red-vivid);
32-
--color-badge-active-text: #fff;
33-
34-
--color-link: var(--color-gray-500);
35-
--color-hover: var(--color-gray-400);
36-
--color-hover-bg: var(--color-gray-300);
37-
38-
--color-header-hover: var(--color-gray-700);
39-
--color-background-alt: var(--color-gray-900);
40-
}
41-
42-
div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label {
43-
text-shadow: 1px 1px #000;
44-
}
45-
46-
div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before,
47-
div.phpdebugbar-openhandler[data-theme="dark"] table th,
48-
div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > a,
49-
div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions button,
50-
div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form input,
51-
div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form select {
52-
text-shadow: 1px 1px var(--color-gray-700);
53-
}
54-
55-
div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header {
56-
text-shadow: none;
57-
}
58-
59-
div.phpdebugbar-openhandler[data-theme="dark"] {
60-
border-top-color: var(--color-red-vivid);
61-
}
621

‎src/Resources/laravel-debugbar.css‎

Lines changed: 47 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ div.phpdebugbar-openhandler {
1818
--color-badge: #fff;
1919
--color-badge-text: var(--color-red-vivid);
2020

21-
/*--color-badge-active: #555;*/
22-
/*--color-badge-active-text: #fff;*/
21+
--color-badge-active: var(--color-red-vivid);
22+
--color-badge-active-text: #fff;
2323

2424
/*--color-link: #888;*/
2525
/*--color-hover: #aaa;*/
@@ -29,6 +29,49 @@ div.phpdebugbar-openhandler {
2929
--color-background-alt: #f5f5f5;
3030
}
3131

32+
/* Dark mode */
33+
div.phpdebugbar[data-theme='dark'],
34+
div.phpdebugbar-openhandler[data-theme='dark'] {
35+
--color-white: #FFFFFF;
36+
--color-gray-100: #F7FAFC;
37+
--color-gray-200: #EDF2F7;
38+
--color-gray-300: #E2E8F0;
39+
--color-gray-400: #CBD5E0;
40+
--color-gray-500: #A0AEC0;
41+
--color-gray-600: #718096;
42+
--color-gray-700: #4A5568;
43+
--color-gray-800: #252a37;
44+
--color-gray-900: #18181b;
45+
--color-red-vivid: #eb4432;
46+
47+
--color-background: var(--color-gray-800);
48+
--color-text: var(--color-gray-100);
49+
--color-text-muted: var(--color-gray-600);
50+
--color-border: var(--color-gray-600);
51+
52+
--color-header:var(--color-gray-900);
53+
--color-header-text: var(--color-gray-200);
54+
--color-header-border: var(--color-gray-800);
55+
56+
--color-active: var(--color-gray-800);
57+
--color-active-text: var(--color-gray-100);
58+
59+
--color-icons: var(--color-header-text);
60+
--color-badge: var(--color-white);
61+
--color-badge-text: var(--color-red-vivid);
62+
63+
--color-badge-active: var(--color-red-vivid);
64+
--color-badge-active-text: var(--color-white);
65+
66+
--color-link: var(--color-gray-500);
67+
--color-hover: var(--color-gray-400);
68+
--color-hover-bg: var(--color-gray-300);
69+
70+
--color-header-hover: var(--color-gray-700);
71+
--color-background-alt: var(--color-gray-900);
72+
}
73+
74+
3275

3376
/* Force Laravel Whoops exception handler to be displayed under the debug bar */
3477
.Whoops.container {
@@ -64,7 +107,6 @@ div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button {
64107
border: 1px solid var(--color-border);
65108
background-color: var(--color-header);
66109
color: var(--color-header-text);
67-
text-shadow: 1px 1px #fff;
68110
font-size: 13px;
69111
}
70112

@@ -134,7 +176,6 @@ div.phpdebugbar-openhandler table th {
134176
}
135177

136178
div.phpdebugbar-openhandler table th {
137-
text-shadow: 1px 1px #fff;
138179
font-size: 12px;
139180
text-transform: uppercase;
140181
padding: 5px 8px;
@@ -233,7 +274,6 @@ div.phpdebugbar-body {
233274
div.phpdebugbar-header {
234275
min-height: 30px;
235276
line-height: 20px;
236-
text-shadow: 1px 1px #FFF;
237277
}
238278

239279
div.phpdebugbar-header span.phpdebugbar-text, div.phpdebugbar-header > div > span > span, div.phpdebugbar-header > div > span > i{
@@ -365,7 +405,6 @@ ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-collector {
365405

366406
ul.phpdebugbar-widgets-timeline li .phpdebugbar-widgets-value span.phpdebugbar-widgets-label {
367407
color: #fff;
368-
text-shadow: 1px 1px #000;
369408
}
370409

371410
ul.phpdebugbar-widgets-timeline table.phpdebugbar-widgets-params {
@@ -432,7 +471,6 @@ div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-w
432471
padding: 5px 8px 4px;
433472
text-transform: uppercase;
434473
font-size: 10px;
435-
text-shadow: 1px 1px #585858;
436474
transition: background-color .25s linear 0s, color .25s linear 0s;
437475
color: #FFF;
438476

@@ -507,13 +545,11 @@ a.phpdebugbar-tab.phpdebugbar-active {
507545
background: var(--color-red-vivid);
508546
background-image: none;
509547
color: #fff !important;
510-
text-shadow: 1px 1px #bf3039;
511548
}
512549

513550
a.phpdebugbar-tab.phpdebugbar-active span.phpdebugbar-badge {
514551
background-color: var(--color-badge);
515552
color: var(--color-badge-text);
516-
text-shadow: 1px 1px #ebebeb;
517553
}
518554

519555
a.phpdebugbar-tab span.phpdebugbar-badge {
@@ -523,8 +559,7 @@ a.phpdebugbar-tab span.phpdebugbar-badge {
523559
background: var(--color-red-vivid);
524560
font-size: 11px;
525561
font-family: monospace;
526-
color: #fff;
527-
text-shadow: 1px 1px #bf3039;
562+
color: var(--color-badge-active-text);
528563
border-radius: 10px;
529564
position: relative;
530565
}
@@ -542,7 +577,6 @@ div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text {
542577
width: auto;
543578
white-space: nowrap;
544579
padding: 2px 18px;
545-
text-shadow: none;
546580

547581
-webkit-touch-callout: none;
548582
-webkit-user-select: none;
@@ -734,7 +768,6 @@ div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before {
734768
font-family: PhpDebugbarFontAwesome;
735769
content: "\f05a";
736770
color: var(--color-icons);
737-
text-shadow: 1px 1px #fff;
738771
font-size: 14px;
739772
position: relative;
740773
top: 1px;
@@ -865,7 +898,7 @@ div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-param-count:before {
865898
}
866899

867900
div.phpdebugbar dl.phpdebugbar-widgets-kvlist > :nth-child(4n)::before {
868-
background-color: #f5f5f5;
901+
background-color: var(--background-color-alt);
869902
}
870903

871904
dt.phpdebugbar-widgets-key {

0 commit comments

Comments
 (0)