From b2d44ba2b2759556b17b867939321a6a3babbdc8 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sat, 11 Jan 2025 14:21:59 +0100
Subject: [PATCH 01/16] Use data-theme dark

---
 src/JavascriptRenderer.php                    |  12 +-
 .../laravel-debugbar-dark-mode-media-end.css  |   1 -
 ...laravel-debugbar-dark-mode-media-start.css |   1 -
 src/Resources/laravel-debugbar-dark-mode.css  | 347 +++++++-----------
 src/Resources/laravel-debugbar.css            |  12 +-
 5 files changed, 147 insertions(+), 226 deletions(-)
 delete mode 100644 src/Resources/laravel-debugbar-dark-mode-media-end.css
 delete mode 100644 src/Resources/laravel-debugbar-dark-mode-media-start.css

diff --git a/src/JavascriptRenderer.php b/src/JavascriptRenderer.php
index 9c8a9c3af..0e4a0aeb6 100644
--- a/src/JavascriptRenderer.php
+++ b/src/JavascriptRenderer.php
@@ -20,19 +20,11 @@ public function __construct(DebugBar $debugBar, $baseUrl = null, $basePath = nul
         parent::__construct($debugBar, $baseUrl, $basePath);
 
         $this->cssFiles['laravel'] = __DIR__ . '/Resources/laravel-debugbar.css';
+        $this->cssFiles['laravel-darkmode'] = __DIR__ . '/Resources/laravel-debugbar-dark-mode.css';
         $this->jsFiles['laravel-cache'] = __DIR__ . '/Resources/cache/widget.js';
         $this->jsFiles['laravel-queries'] = __DIR__ . '/Resources/queries/widget.js';
 
-        $theme = config('debugbar.theme', 'auto');
-        switch ($theme) {
-            case 'dark':
-                $this->cssFiles['laravel-dark'] = __DIR__ . '/Resources/laravel-debugbar-dark-mode.css';
-                break;
-            case 'auto':
-                $this->cssFiles['laravel-dark-0'] = __DIR__ . '/Resources/laravel-debugbar-dark-mode-media-start.css';
-                $this->cssFiles['laravel-dark-1'] = __DIR__ . '/Resources/laravel-debugbar-dark-mode.css';
-                $this->cssFiles['laravel-dark-2'] = __DIR__ . '/Resources/laravel-debugbar-dark-mode-media-end.css';
-        }
+        $this->setDefaultTheme(config('debugbar.theme', 'auto'));
     }
 
     /**
diff --git a/src/Resources/laravel-debugbar-dark-mode-media-end.css b/src/Resources/laravel-debugbar-dark-mode-media-end.css
deleted file mode 100644
index ff30235f0..000000000
--- a/src/Resources/laravel-debugbar-dark-mode-media-end.css
+++ /dev/null
@@ -1 +0,0 @@
-}
\ No newline at end of file
diff --git a/src/Resources/laravel-debugbar-dark-mode-media-start.css b/src/Resources/laravel-debugbar-dark-mode-media-start.css
deleted file mode 100644
index 5b1a64706..000000000
--- a/src/Resources/laravel-debugbar-dark-mode-media-start.css
+++ /dev/null
@@ -1 +0,0 @@
-@media (prefers-color-scheme: dark) {
\ No newline at end of file
diff --git a/src/Resources/laravel-debugbar-dark-mode.css b/src/Resources/laravel-debugbar-dark-mode.css
index 47fb52085..d457aa38c 100644
--- a/src/Resources/laravel-debugbar-dark-mode.css
+++ b/src/Resources/laravel-debugbar-dark-mode.css
@@ -1,7 +1,8 @@
 /* Dark mode */
 
-div.phpdebugbar,
-div.phpdebugbar-openhandler {
+
+div.phpdebugbar[data-theme='dark'],
+div.phpdebugbar-openhandler[data-theme='dark'] {
     --color-gray-100: #F7FAFC;
     --color-gray-200: #EDF2F7;
     --color-gray-300: #E2E8F0;
@@ -12,338 +13,263 @@ div.phpdebugbar-openhandler {
     --color-gray-800: #252a37;
     --color-gray-900: #18181b;
     --color-red-vivid: #eb4432;
+
+    --color-background: var(--color-gray-800);
+    --color-text: var(--color-gray-200);
+  
 }
 
-div.phpdebugbar,
-div.phpdebugbar-widgets-dataset-history .phpdebugbar-widgets-dataset-actions,
-div.phpdebugbar-openhandler {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-dataset-history .phpdebugbar-widgets-dataset-actions,
+div.phpdebugbar-openhandler[data-theme="dark"] {
     background: var(--color-gray-800);
 }
 
-div.phpdebugbar,
-div.phpdebugbar-openhandler,
-div.phpdebugbar div.phpdebugbar-header > div > *,
-div.phpdebugbar ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label,
-div.phpdebugbar ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-collector,
-div.phpdebugbar ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item,
-div.phpdebugbar ul.phpdebugbar-widgets-list li span.phpdebugbar-widgets-label,
-div.phpdebugbar code.phpdebugbar-widgets-sql span.hljs-keyword,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-header,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-header a,
-div.phpdebugbar-panel .phpdebugbar-widgets-dataset-actions select {
+div.phpdebugbar[data-theme="dark"],
+div.phpdebugbar-openhandler[data-theme="dark"],
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header > div > *,
+div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label,
+div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-collector,
+div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item,
+div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li span.phpdebugbar-widgets-label,
+div.phpdebugbar[data-theme="dark"] code.phpdebugbar-widgets-sql span.hljs-keyword,
+div.phpdebugbar-openhandler[data-theme="dark"] .php debugbar-openhandler-header,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-header a,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel .phpdebugbar-widgets-dataset-actions select {
     color: var(--color-gray-200);
 }
 
-div.phpdebugbar ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label {
+div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label {
     text-shadow: 1px 1px #000;
 }
 
-div.phpdebugbar-openhandler,
-div.phpdebugbar div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar,
-div.phpdebugbar div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item pre.phpdebugbar-widgets-file,
-div.phpdebugbar ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > a,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form input,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select,
-div.phpdebugbar-panel .phpdebugbar-widgets-dataset-actions select {
+div.phpdebugbar-openhandler[data-theme="dark"],
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item pre.phpdebugbar-widgets-file,
+div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > a,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions button,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form input,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form select,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel .phpdebugbar-widgets-dataset-actions select {
     border-color: var(--color-gray-600);
 }
 
-div.phpdebugbar div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before,
-div.phpdebugbar-openhandler table th,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > a,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form input,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before,
+div.phpdebugbar-openhandler[data-theme="dark"] table th,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > a,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions button,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form input,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form select {
     text-shadow: 1px 1px var(--color-gray-700);
 }
 
-div.phpdebugbar div.phpdebugbar-header {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header {
     text-shadow: none;
 }
 
-div.phpdebugbar-header-right > * {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header-right > * {
     border-right-color: var(--color-gray-800);
 }
 
-div.phpdebugbar div.phpdebugbar-header > div > select,
-div.phpdebugbar ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form input,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select,
-div.phpdebugbar-panel .phpdebugbar-widgets-dataset-actions select,
-div.phpdebugbar input[type='text'],
-div.phpdebugbar input[type='password'] {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header > div > select,
+div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form input,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form select,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel .phpdebugbar-widgets-dataset-actions select,
+div.phpdebugbar[data-theme="dark"] input[type='text'],
+div.phpdebugbar[data-theme="dark"] input[type='password'] {
     background-color: var(--color-gray-800);
 }
 
-div.phpdebugbar div.phpdebugbar-header,
-div.phpdebugbar a.phpdebugbar-restore-btn,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-header,
-div.phpdebugbar dl.phpdebugbar-widgets-kvlist > :nth-child(4n-1),
-div.phpdebugbar dl.phpdebugbar-widgets-kvlist > :nth-child(4n),
-div.phpdebugbar ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:nth-child(even),
-div.phpdebugbar .hljs,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params th,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > a,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button,
-div.phpdebugbar div.phpdebugbar-widgets-templates table.phpdebugbar-widgets-params th {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header,
+div.phpdebugbar[data-theme="dark"] a.phpdebugbar-restore-btn,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-header,
+div.phpdebugbar[data-theme="dark"] dl.phpdebugbar-widgets-kvlist > :nth-child(4n-1),
+div.phpdebugbar[data-theme="dark"] dl.phpdebugbar-widgets-kvlist > :nth-child(4n),
+div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:nth-child(even),
+div.phpdebugbar[data-theme="dark"] .hljs,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params th,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > a,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions button,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates table.phpdebugbar-widgets-params th {
     background-color: var(--color-gray-900);
 }
 
-div.phpdebugbar .phpdebugbar-widgets-mails ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item .phpdebugbar-widgets-headers,
-div.phpdebugbar ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params {
+div.phpdebugbar[data-theme="dark"] .phpdebugbar-widgets-mails ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item .phpdebugbar-widgets-headers,
+div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params {
     border-left-color: var(--color-gray-600);
 }
 
-div.phpdebugbar a.phpdebugbar-tab:hover,
-div.phpdebugbar span.phpdebugbar-indicator:hover,
-div.phpdebugbar a.phpdebugbar-indicator:hover,
-div.phpdebugbar a.phpdebugbar-close-btn:hover,
-div.phpdebugbar a.phpdebugbar-minimize-btn:hover,
-div.phpdebugbar a.phpdebugbar-maximize-btn:hover,
-div.phpdebugbar a.phpdebugbar-open-btn:hover,
-div.phpdebugbar-openhandler table th,
-div.phpdebugbar-openhandler table tr:nth-child(2n),
-div.phpdebugbar div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
+div.phpdebugbar[data-theme="dark"] a.phpdebugbar-tab:hover,
+div.phpdebugbar[data-theme="dark"] span.phpdebugbar-indicator:hover,
+div.phpdebugbar[data-theme="dark"] a.phpdebugbar-indicator:hover,
+div.phpdebugbar[data-theme="dark"] a.phpdebugbar-close-btn:hover,
+div.phpdebugbar[data-theme="dark"] a.phpdebugbar-minimize-btn:hover,
+div.phpdebugbar[data-theme="dark"] a.phpdebugbar-maximize-btn:hover,
+div.phpdebugbar[data-theme="dark"] a.phpdebugbar-open-btn:hover,
+div.phpdebugbar-openhandler[data-theme="dark"] table th,
+div.phpdebugbar-openhandler[data-theme="dark"] table tr:nth-child(2n),
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
     background-color: var(--color-gray-700);
 }
 
-div.phpdebugbar a.phpdebugbar-tab.phpdebugbar-active:hover {
+div.phpdebugbar[data-theme="dark"] a.phpdebugbar-tab.phpdebugbar-active:hover {
     background-color: var(--color-red-vivid);
 }
 
-div.phpdebugbar .phpdebugbar-indicator span.phpdebugbar-tooltip,
-div.phpdebugbar div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text,
-div.phpdebugbar pre.sf-dump,
-div.phpdebugbar .hljs,
-div.phpdebugbar code.phpdebugbar-widgets-sql span.hljs-operator {
+div.phpdebugbar[data-theme="dark"] .phpdebugbar-indicator span.phpdebugbar-tooltip,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text,
+div.phpdebugbar[data-theme="dark"] pre.sf-dump,
+div.phpdebugbar[data-theme="dark"] .hljs,
+div.phpdebugbar[data-theme="dark"] code.phpdebugbar-widgets-sql span.hljs-operator {
     color: var(--color-gray-100);
 }
 
-div.phpdebugbar pre.sf-dump .sf-dump-public,
-div.phpdebugbar pre.sf-dump .sf-dump-protected,
-div.phpdebugbar pre.sf-dump .sf-dump-private {
+div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-public,
+div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-protected,
+div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-private {
     color: var(--color-gray-100) !important;
 }
 
-div.phpdebugbar div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before,
-div.phpdebugbar-openhandler a {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-openhandler[data-theme="dark"] a {
     color: var(--color-gray-500);
 }
 
-div.phpdebugbar .phpdebugbar-indicator span.phpdebugbar-tooltip,
-div.phpdebugbar div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text {
+div.phpdebugbar[data-theme="dark"] .phpdebugbar-indicator span.phpdebugbar-tooltip,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text {
     background: var(--color-gray-900);
 }
 
-div.phpdebugbar .hljs-tag .hljs-value,
-div.phpdebugbar .hljs-phpdoc,
-div.phpdebugbar .tex .hljs-formula,
-div.phpdebugbar div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-message {
+div.phpdebugbar[data-theme="dark"] .hljs-tag .hljs-value,
+div.phpdebugbar[data-theme="dark"] .hljs-phpdoc,
+div.phpdebugbar[data-theme="dark"] .tex .hljs-formula,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-message {
     color: var(--color-red-vivid);
 }
 
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-database,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-duration,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-memory,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-row-count,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-copy-clipboard,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-stmt-id,
-div.phpdebugbar .phpdebugbar-widgets-callgraph pre,
-div.phpdebugbar .phpdebugbar-text-muted,
-div.phpdebugbar-openhandler .phpdebugbar-text-muted
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-database,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-duration,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-memory,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-row-count,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-copy-clipboard,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-stmt-id,
+div.phpdebugbar[data-theme="dark"] .phpdebugbar-widgets-callgraph pre,
+div.phpdebugbar[data-theme="dark"] .phpdebugbar-text-muted,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-text-muted
 {
     color: var(--color-gray-600);
 }
 
-li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-filename,
-li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-filename a.phpdebugbar-widgets-editor-link
+div.phpdebugbar[data-theme="dark"] li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-filename,
+div.phpdebugbar[data-theme="dark"] li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-filename a.phpdebugbar-widgets-editor-link
 {
     color: #ddd;
 }
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate {
     background-color: #473e00;
 }
 
-div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value:before {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value:before {
     color: #7B7B7B;
 }
 
-div.phpdebugbar pre.sf-dump .sf-dump-note {
+div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-note {
     color: #8be9fd;
 }
 
-div.phpdebugbar pre.sf-dump .sf-dump-num,
-div.phpdebugbar pre.sf-dump .sf-dump-const,
-div.phpdebugbar pre.sf-dump .sf-dump-index {
+div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-num,
+div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-const,
+div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-index {
     color: #bd93f9;
 }
 
-div.phpdebugbar pre.sf-dump .sf-dump-key,
-div.phpdebugbar pre.sf-dump .sf-dump-str {
+div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-key,
+div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-str {
     color: #f1fa8c;
 }
 
-div.phpdebugbar-openhandler {
+div.phpdebugbar-openhandler[data-theme="dark"] {
     border-top-color: var(--color-red-vivid);
 }
 
-div.phpdebugbar div.phpdebugbar-header .phpdebugbar-tab {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header .phpdebugbar-tab {
     border-color: var(--color-gray-800);
 }
 
-div.phpdebugbar div.phpdebugbar-body {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-body {
     border-top-color: var(--color-gray-800);
 }
 
-div.phpdebugbar a.phpdebugbar-restore-btn {
+div.phpdebugbar[data-theme="dark"] a.phpdebugbar-restore-btn {
     border-right-color: var(--color-gray-800) !important;
 }
 
-div.phpdebugbar div.phpdebugbar-panel div.phpdebugbar-widgets-status {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel div.phpdebugbar-widgets-status {
     background-color: var(--color-gray-900) !important;
     border-bottom-color: var(--color-gray-800) !important;
 }
 
-div.phpdebugbar div.phpdebugbar-widgets-templates div.phpdebugbar-widgets-status {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates div.phpdebugbar-widgets-status {
     background: var(--color-gray-900) !important;
 }
 
-div.phpdebugbar div.phpdebugbar-panel div.phpdebugbar-widgets-status > * {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel div.phpdebugbar-widgets-status > * {
     color: var(--color-gray-200) !important;
 }
 
-div.phpdebugbar div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-render-time,
-div.phpdebugbar div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-memory,
-div.phpdebugbar div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-param-count,
-div.phpdebugbar div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-type {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-render-time,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-memory,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-param-count,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-type {
     color: var(--color-gray-600) !important;
 }
 
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td {
     border-color: var(--color-gray-600) !important;
 }
 
-div.phpdebugbar code,
-div.phpdebugbar pre {
+div.phpdebugbar[data-theme="dark"] code,
+div.phpdebugbar[data-theme="dark"] pre {
     color: #f1fa8c;
 }
 
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > a,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form input,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select,
-div.phpdebugbar input[type='text'],
-div.phpdebugbar input[type='password'] {
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > a,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions button,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form input,
+div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form select,
+div.phpdebugbar[data-theme="dark"] input[type='text'],
+div.phpdebugbar[data-theme="dark"] input[type='password'] {
     color: var(--color-gray-300);
 }
 
-div.phpdebugbar div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-filename,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-database,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-duration,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-memory,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-row-count,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-copy-clipboard,
-div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-stmt-id {
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-filename,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-database,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-duration,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-memory,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-row-count,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-copy-clipboard,
+div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-stmt-id {
     color: var(--color-gray-500);
 }
 
-div.phpdebugbar dl.phpdebugbar-widgets-kvlist > :nth-child(4n)::before {
+div.phpdebugbar[data-theme="dark"] dl.phpdebugbar-widgets-kvlist > :nth-child(4n)::before {
     background-color: var(--color-gray-900);
 }
 
-dt.phpdebugbar-widgets-key {
+div.phpdebugbar[data-theme="dark"] dt.phpdebugbar-widgets-key {
     background: var(--color-gray-800);
 }
 
-a.phpdebugbar-minimize-btn {
-    background:url(data:image/svg+xml,%3Csvg%20viewBox=%220%200%201792%201792%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d=%22m1683%20653.5-742%20741c-12.667%2012.67-27.667%2019-45%2019s-32.333-6.33-45-19l-742-741c-12.667-12.667-19-27.833-19-45.5s6.333-32.833%2019-45.5l166-165c12.667-12.667%2027.667-19%2045-19s32.333%206.333%2045%2019l531%20531%20531-531c12.67-12.667%2027.67-19%2045-19s32.33%206.333%2045%2019l166%20165c12.67%2012.667%2019%2027.833%2019%2045.5s-6.33%2032.833-19%2045.5Z%22%20fill=%22%23EDF2F7%22%2F%3E%3C%2Fsvg%3E) no-repeat center / 14px 14px;
-}
-
-a.phpdebugbar-maximize-btn {
-    background: url(data:image/svg+xml,%3Csvg%20viewBox=%220%200%201792%201792%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d=%22m1683%201229.5-166%20165c-12.67%2012.67-27.67%2019-45%2019s-32.33-6.33-45-19l-531-531-531%20531c-12.667%2012.67-27.667%2019-45%2019s-32.333-6.33-45-19l-166-165c-12.667-12.67-19-27.83-19-45.5s6.333-32.83%2019-45.5l742-741c12.667-12.667%2027.667-19%2045-19s32.333%206.333%2045%2019l742%20741c12.67%2012.67%2019%2027.83%2019%2045.5s-6.33%2032.83-19%2045.5Z%22%20fill=%22%23EDF2F7%22%2F%3E%3C%2Fsvg%3E) no-repeat center / 14px 14px;
-}
-
-a.phpdebugbar-close-btn {
-    background: url(data:image/svg+xml,%3Csvg%20viewBox=%220%200%201792%201792%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d=%22M1490%201258c0%2026.67-9.33%2049.33-28%2068l-136%20136c-18.67%2018.67-41.33%2028-68%2028s-49.33-9.33-68-28l-294-294-294%20294c-18.667%2018.67-41.333%2028-68%2028s-49.333-9.33-68-28l-136-136c-18.667-18.67-28-41.33-28-68s9.333-49.33%2028-68l294-294-294-294c-18.667-18.667-28-41.333-28-68s9.333-49.333%2028-68l136-136c18.667-18.667%2041.333-28%2068-28s49.333%209.333%2068%2028l294%20294%20294-294c18.67-18.667%2041.33-28%2068-28s49.33%209.333%2068%2028l136%20136c18.67%2018.667%2028%2041.333%2028%2068s-9.33%2049.333-28%2068l-294%20294%20294%20294c18.67%2018.67%2028%2041.33%2028%2068Z%22%20fill=%22%23EDF2F7%22%2F%3E%3C%2Fsvg%3E) no-repeat center / 14px 14px;
-}
-
-a.phpdebugbar-open-btn {
-    background: url(data:image/svg+xml,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1646%20991.797c0%2016.493-8.25%2034.063-24.75%2052.683l-268.22%20316.13c-22.89%2027.14-54.95%2050.16-96.2%2069.05S1177.4%201458%201142.27%201458H273.728c-18.095%200-34.194-3.46-48.297-10.38-14.104-6.92-21.155-18.36-21.155-34.32%200-16.5%208.249-34.06%2024.747-52.69l268.228-316.13c22.884-27.14%2054.949-50.155%2096.194-69.048%2041.246-18.893%2079.431-28.34%20114.556-28.34h868.549c18.09%200%2034.19%203.458%2048.3%2010.377%2014.1%206.918%2021.15%2018.362%2021.15%2034.328Zm-273.82-274.615V844.91H708.001c-50.027%200-102.448%2012.639-157.264%2037.918-54.817%2025.28-98.457%2057.078-130.921%2095.397L150.79%201294.35l-3.992%204.79c0-2.13-.133-5.46-.399-9.98-.266-4.52-.399-7.85-.399-9.98V512.818c0-48.962%2017.563-91.005%2052.688-126.13C233.813%20351.562%20275.856%20334%20324.819%20334h255.455c48.962%200%2091.005%2017.562%20126.13%2052.688%2035.126%2035.125%2052.688%2077.168%2052.688%20126.13v25.545h434.278c48.96%200%2091%2017.564%20126.13%2052.689%2035.12%2035.125%2052.68%2077.168%2052.68%20126.13Z%22%20fill%3D%22%23EDF2F7%22/%3E%3C/svg%3E) no-repeat center / 14px 14px;
-}
-
-div.phpdebugbar code.language-php,
-div.phpdebugbar pre.language-php {
+div.phpdebugbar[data-theme="dark"] code.language-php,
+div.phpdebugbar[data-theme="dark"] pre.language-php {
     color: #FFF;
 }
 
-pre.phpdebugbar-widgets-code-block ul {
+div.phpdebugbar[data-theme="dark"] pre.phpdebugbar-widgets-code-block ul {
     background: none;
 }
 
-/* Dracula Theme v1.2.5
- *
- * https://github.com/dracula/highlightjs
- *
- * Copyright 2016-present, All rights reserved
- *
- * Code licensed under the MIT license
- *
- * @author Denis Ciccale <dciccale@gmail.com>
- * @author Zeno Rocha <hi@zenorocha.com>
- */
-
-div.phpdebugbar .hljs-built_in,
-div.phpdebugbar .hljs-selector-tag,
-div.phpdebugbar .hljs-section,
-div.phpdebugbar .hljs-link {
-    color: #8be9fd;
-}
-
-div.phpdebugbar .hljs-keyword {
-    color: #ff79c6;
-}
-
-div.phpdebugbar .hljs,
-div.phpdebugbar .hljs-subst {
-    color: #f8f8f2;
-}
-
-div.phpdebugbar .hljs-title,
-div.phpdebugbar .hljs-meta-keyword {
-    color: #50fa7b;
-}
-
-div.phpdebugbar .hljs-string,
-div.phpdebugbar .hljs-meta,
-div.phpdebugbar .hljs-name,
-div.phpdebugbar .hljs-type,
-div.phpdebugbar .hljs-attr,
-div.phpdebugbar .hljs-symbol,
-div.phpdebugbar .hljs-bullet,
-div.phpdebugbar .hljs-addition,
-div.phpdebugbar .hljs-variable,
-div.phpdebugbar .hljs-template-tag,
-div.phpdebugbar .hljs-template-variable {
-    color: #f1fa8c;
-}
-
-div.phpdebugbar .hljs-comment,
-div.phpdebugbar .hljs-quote,
-div.phpdebugbar .hljs-deletion {
-    color: #6272a4;
-}
-
-div.phpdebugbar .hljs-strong {
-    font-weight: bold;
-}
-
-div.phpdebugbar .hljs-literal,
-div.phpdebugbar .hljs-number {
-    color: #bd93f9;
-}
-
 .phpdebugbar-widgets-dataset-history table tr.phpdebugbar-widgets-active {
     background-color: var(--color-gray-700);
     color: white;
@@ -357,4 +283,3 @@ div.phpdebugbar .hljs-number {
 ul.phpdebugbar-widgets-timeline table.phpdebugbar-widgets-params td {
     border-color: var(--color-gray-700);
 }
-
diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index ac3245fb7..482be7a6f 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -2,6 +2,7 @@
 .Whoops.container {
     z-index: 5999999;
 }
+
 div.phpdebugbar,
 div.phpdebugbar-openhandler {
     --color-red-vivid: #eb4432;
@@ -236,7 +237,7 @@ div.phpdebugbar-header > div > span > i.phpdebugbar-fa-code{
     transform: translateY(-1px) !important;
 }
 
-a.phpdebugbar-restore-btn {
+a.phpdebugbar-restore-btn:after {
     background: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M47.973%2010.859a.74.74%200%200%201%20.027.196v10.303a.735.735%200%200%201-.104.377.763.763%200%200%201-.285.275l-8.902%204.979v9.868a.75.75%200%200%201-.387.652L19.74%2047.9c-.043.023-.09.038-.135.054-.018.006-.034.016-.053.021a.801.801%200%200%201-.396%200c-.021-.006-.04-.017-.061-.024-.043-.015-.087-.029-.128-.051L.39%2037.509a.763.763%200%200%201-.285-.276.736.736%200%200%201-.104-.376V5.947c0-.067.01-.133.027-.196.006-.022.02-.042.027-.063.015-.04.028-.08.05-.117.014-.024.035-.044.053-.067.022-.03.042-.06.068-.087.022-.021.051-.037.077-.056.028-.023.053-.047.085-.065L9.677.1a.793.793%200%200%201%20.774%200l9.29%205.196h.002c.03.019.057.042.085.064.025.019.053.036.075.056.027.027.047.058.07.088.016.023.038.043.052.067.022.038.035.077.05.117.008.021.021.04.027.063a.74.74%200%200%201%20.027.197v19.305l7.742-4.33v-9.869c0-.066.01-.132.027-.195.006-.023.019-.042.027-.064.015-.04.029-.08.05-.116.014-.025.036-.045.052-.067.023-.03.043-.061.07-.087.022-.022.05-.038.075-.057.03-.022.054-.047.085-.065l9.292-5.195a.792.792%200%200%201%20.773%200l9.29%205.195c.033.02.058.043.087.064.025.02.053.036.075.057.027.027.046.058.07.088.017.022.038.042.052.067.022.036.034.077.05.116.009.022.021.041.027.064ZM46.45%2020.923v-8.567l-3.25%201.818-4.492%202.512v8.567l7.743-4.33Zm-9.29%2015.5v-8.574l-4.417%202.45-12.616%206.995v8.654l17.033-9.526ZM1.55%207.247v29.174l17.03%209.525v-8.653l-8.897-4.89-.003-.003-.003-.002c-.03-.017-.056-.041-.084-.062-.024-.018-.052-.033-.073-.054l-.002-.003c-.025-.023-.042-.053-.064-.079-.02-.025-.042-.047-.058-.073v-.003c-.018-.028-.029-.062-.041-.094-.013-.028-.03-.054-.037-.084-.01-.036-.012-.075-.016-.111-.003-.028-.011-.056-.011-.085V11.58L4.8%209.064%201.549%207.248Zm8.516-5.628-7.74%204.328%207.738%204.328%207.74-4.33-7.74-4.326h.002Zm4.026%2027.01%204.49-2.51V7.247L15.33%209.066l-4.492%202.512V30.45l3.253-1.819ZM37.935%206.727l-7.74%204.328%207.74%204.328%207.738-4.329-7.738-4.327Zm-.775%209.959-4.49-2.512-3.252-1.818v8.567l4.49%202.511%203.252%201.82v-8.568ZM19.353%2035.993l11.352-6.295%205.674-3.146-7.733-4.325-8.904%204.98-8.116%204.538%207.727%204.248Z%22%20fill%3D%22%23FF2D20%22/%3E%3C/svg%3E) no-repeat 11px center / 20px 20px !important;
 }
 
@@ -489,7 +490,12 @@ a.phpdebugbar-open-btn:hover {
     /* transition: background-color .25s linear 0s, color .25s linear 0s; */
 }
 
-a.phpdebugbar-close-btn, a.phpdebugbar-open-btn, a.phpdebugbar-minimize-btn , a.phpdebugbar-maximize-btn, a.phpdebugbar-tab.phpdebugbar-tab-history {
+a.phpdebugbar-close-btn,
+a.phpdebugbar-open-btn,
+a.phpdebugbar-minimize-btn ,
+a.phpdebugbar-maximize-btn,
+a.phpdebugbar-tab.phpdebugbar-tab-history,
+a.phpdebugbar-tab.phpdebugbar-tab-settings {
   min-width: 14px;
   height: 20px;
 }
@@ -870,7 +876,7 @@ dt.phpdebugbar-widgets-key {
 
 dt.phpdebugbar-widgets-key {
     position: relative;
-    background: white;
+    /*background: white;*/
     z-index: 1;
 }
 

From 23e40a20422e28ba8ba8dd279dbc6ff728028a13 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sun, 12 Jan 2025 15:24:04 +0100
Subject: [PATCH 02/16] Replace more colors

---
 src/Resources/laravel-debugbar-dark-mode.css | 267 ++-----------------
 src/Resources/laravel-debugbar.css           | 143 +++++-----
 2 files changed, 87 insertions(+), 323 deletions(-)

diff --git a/src/Resources/laravel-debugbar-dark-mode.css b/src/Resources/laravel-debugbar-dark-mode.css
index d457aa38c..968fdf6d2 100644
--- a/src/Resources/laravel-debugbar-dark-mode.css
+++ b/src/Resources/laravel-debugbar-dark-mode.css
@@ -1,6 +1,4 @@
 /* Dark mode */
-
-
 div.phpdebugbar[data-theme='dark'],
 div.phpdebugbar-openhandler[data-theme='dark'] {
     --color-gray-100: #F7FAFC;
@@ -15,45 +13,36 @@ div.phpdebugbar-openhandler[data-theme='dark'] {
     --color-red-vivid: #eb4432;
 
     --color-background: var(--color-gray-800);
-    --color-text: var(--color-gray-200);
-  
-}
+    --color-text: var(--color-gray-100);
+    --color-text-muted: var(--color-gray-600);
+    --color-border: var(--color-gray-600);
 
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-dataset-history .phpdebugbar-widgets-dataset-actions,
-div.phpdebugbar-openhandler[data-theme="dark"] {
-    background: var(--color-gray-800);
-}
+    --color-header:var(--color-gray-900);
+    --color-header-text: var(--color-gray-200);
+    --color-header-border: var(--color-gray-800);
+
+    /*--color-active: #444;*/
+    /*--color-active-text: #e0e0e0;*/
 
-div.phpdebugbar[data-theme="dark"],
-div.phpdebugbar-openhandler[data-theme="dark"],
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header > div > *,
-div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label,
-div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-collector,
-div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item,
-div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li span.phpdebugbar-widgets-label,
-div.phpdebugbar[data-theme="dark"] code.phpdebugbar-widgets-sql span.hljs-keyword,
-div.phpdebugbar-openhandler[data-theme="dark"] .php debugbar-openhandler-header,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-header a,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel .phpdebugbar-widgets-dataset-actions select {
-    color: var(--color-gray-200);
+    --color-icons: var(--color-header-text);
+    --color-badge: #fff;
+    --color-badge-text: var(--color-red-vivid);
+
+    --color-badge-active: var(--color-red-vivid);
+    --color-badge-active-text: #fff;
+
+    --color-link: var(--color-gray-500);
+    --color-hover: var(--color-gray-400);
+    --color-hover-bg: var(--color-gray-300);
+
+    --color-header-hover: var(--color-gray-700);
+    --color-background-alt: var(--color-gray-900);
 }
 
 div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label {
     text-shadow: 1px 1px #000;
 }
 
-div.phpdebugbar-openhandler[data-theme="dark"],
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item pre.phpdebugbar-widgets-file,
-div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > a,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions button,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form input,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form select,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel .phpdebugbar-widgets-dataset-actions select {
-    border-color: var(--color-gray-600);
-}
-
 div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before,
 div.phpdebugbar-openhandler[data-theme="dark"] table th,
 div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > a,
@@ -67,219 +56,7 @@ div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header {
     text-shadow: none;
 }
 
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header-right > * {
-    border-right-color: var(--color-gray-800);
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header > div > select,
-div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form input,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form select,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel .phpdebugbar-widgets-dataset-actions select,
-div.phpdebugbar[data-theme="dark"] input[type='text'],
-div.phpdebugbar[data-theme="dark"] input[type='password'] {
-    background-color: var(--color-gray-800);
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header,
-div.phpdebugbar[data-theme="dark"] a.phpdebugbar-restore-btn,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-header,
-div.phpdebugbar[data-theme="dark"] dl.phpdebugbar-widgets-kvlist > :nth-child(4n-1),
-div.phpdebugbar[data-theme="dark"] dl.phpdebugbar-widgets-kvlist > :nth-child(4n),
-div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:nth-child(even),
-div.phpdebugbar[data-theme="dark"] .hljs,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params th,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > a,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions button,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates table.phpdebugbar-widgets-params th {
-    background-color: var(--color-gray-900);
-}
-
-div.phpdebugbar[data-theme="dark"] .phpdebugbar-widgets-mails ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item .phpdebugbar-widgets-headers,
-div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params {
-    border-left-color: var(--color-gray-600);
-}
-
-div.phpdebugbar[data-theme="dark"] a.phpdebugbar-tab:hover,
-div.phpdebugbar[data-theme="dark"] span.phpdebugbar-indicator:hover,
-div.phpdebugbar[data-theme="dark"] a.phpdebugbar-indicator:hover,
-div.phpdebugbar[data-theme="dark"] a.phpdebugbar-close-btn:hover,
-div.phpdebugbar[data-theme="dark"] a.phpdebugbar-minimize-btn:hover,
-div.phpdebugbar[data-theme="dark"] a.phpdebugbar-maximize-btn:hover,
-div.phpdebugbar[data-theme="dark"] a.phpdebugbar-open-btn:hover,
-div.phpdebugbar-openhandler[data-theme="dark"] table th,
-div.phpdebugbar-openhandler[data-theme="dark"] table tr:nth-child(2n),
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
-    background-color: var(--color-gray-700);
-}
-
-div.phpdebugbar[data-theme="dark"] a.phpdebugbar-tab.phpdebugbar-active:hover {
-    background-color: var(--color-red-vivid);
-}
-
-div.phpdebugbar[data-theme="dark"] .phpdebugbar-indicator span.phpdebugbar-tooltip,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text,
-div.phpdebugbar[data-theme="dark"] pre.sf-dump,
-div.phpdebugbar[data-theme="dark"] .hljs,
-div.phpdebugbar[data-theme="dark"] code.phpdebugbar-widgets-sql span.hljs-operator {
-    color: var(--color-gray-100);
-}
-
-div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-public,
-div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-protected,
-div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-private {
-    color: var(--color-gray-100) !important;
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-openhandler[data-theme="dark"] a {
-    color: var(--color-gray-500);
-}
-
-div.phpdebugbar[data-theme="dark"] .phpdebugbar-indicator span.phpdebugbar-tooltip,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text {
-    background: var(--color-gray-900);
-}
-
-div.phpdebugbar[data-theme="dark"] .hljs-tag .hljs-value,
-div.phpdebugbar[data-theme="dark"] .hljs-phpdoc,
-div.phpdebugbar[data-theme="dark"] .tex .hljs-formula,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-message {
-    color: var(--color-red-vivid);
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-database,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-duration,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-memory,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-row-count,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-copy-clipboard,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-stmt-id,
-div.phpdebugbar[data-theme="dark"] .phpdebugbar-widgets-callgraph pre,
-div.phpdebugbar[data-theme="dark"] .phpdebugbar-text-muted,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-text-muted
-{
-    color: var(--color-gray-600);
-}
-
-div.phpdebugbar[data-theme="dark"] li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-filename,
-div.phpdebugbar[data-theme="dark"] li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-filename a.phpdebugbar-widgets-editor-link
-{
-    color: #ddd;
-}
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate {
-    background-color: #473e00;
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value:before {
-    color: #7B7B7B;
-}
-
-div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-note {
-    color: #8be9fd;
-}
-
-div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-num,
-div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-const,
-div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-index {
-    color: #bd93f9;
-}
-
-div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-key,
-div.phpdebugbar[data-theme="dark"] pre.sf-dump .sf-dump-str {
-    color: #f1fa8c;
-}
-
 div.phpdebugbar-openhandler[data-theme="dark"] {
     border-top-color: var(--color-red-vivid);
 }
 
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header .phpdebugbar-tab {
-    border-color: var(--color-gray-800);
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-body {
-    border-top-color: var(--color-gray-800);
-}
-
-div.phpdebugbar[data-theme="dark"] a.phpdebugbar-restore-btn {
-    border-right-color: var(--color-gray-800) !important;
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel div.phpdebugbar-widgets-status {
-    background-color: var(--color-gray-900) !important;
-    border-bottom-color: var(--color-gray-800) !important;
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates div.phpdebugbar-widgets-status {
-    background: var(--color-gray-900) !important;
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel div.phpdebugbar-widgets-status > * {
-    color: var(--color-gray-200) !important;
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-render-time,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-memory,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-param-count,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-type {
-    color: var(--color-gray-600) !important;
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td {
-    border-color: var(--color-gray-600) !important;
-}
-
-div.phpdebugbar[data-theme="dark"] code,
-div.phpdebugbar[data-theme="dark"] pre {
-    color: #f1fa8c;
-}
-
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > a,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions button,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form input,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form select,
-div.phpdebugbar[data-theme="dark"] input[type='text'],
-div.phpdebugbar[data-theme="dark"] input[type='password'] {
-    color: var(--color-gray-300);
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-filename,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-database,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-duration,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-memory,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-row-count,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-copy-clipboard,
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate span.phpdebugbar-widgets-stmt-id {
-    color: var(--color-gray-500);
-}
-
-div.phpdebugbar[data-theme="dark"] dl.phpdebugbar-widgets-kvlist > :nth-child(4n)::before {
-    background-color: var(--color-gray-900);
-}
-
-div.phpdebugbar[data-theme="dark"] dt.phpdebugbar-widgets-key {
-    background: var(--color-gray-800);
-}
-
-div.phpdebugbar[data-theme="dark"] code.language-php,
-div.phpdebugbar[data-theme="dark"] pre.language-php {
-    color: #FFF;
-}
-
-div.phpdebugbar[data-theme="dark"] pre.phpdebugbar-widgets-code-block ul {
-    background: none;
-}
-
-.phpdebugbar-widgets-dataset-history table tr.phpdebugbar-widgets-active {
-    background-color: var(--color-gray-700);
-    color: white;
-}
-
-.phpdebugbar-widgets-dataset-history table th,
-.phpdebugbar-widgets-dataset-history table td {
-    border-color: var(--color-gray-600);
-}
-
-ul.phpdebugbar-widgets-timeline table.phpdebugbar-widgets-params td {
-    border-color: var(--color-gray-700);
-}
diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index 482be7a6f..f3966a81f 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -1,37 +1,53 @@
-/* Force Laravel Whoops exception handler to be displayed under the debug bar */
-.Whoops.container {
-    z-index: 5999999;
-}
-
 div.phpdebugbar,
 div.phpdebugbar-openhandler {
     --color-red-vivid: #eb4432;
+
+    /*--color-background: #fff;*/
+    --color-text: #222;
+    /*--color-text-muted: #888;*/
+    --color-border: #bbb;
+
+    --color-header: #efefef;
+    --color-header-text: #555;
+    /*--color-header-border: #ddd;*/
+
+    /*--color-active: #ccc;*/
+    /*--color-active-text: #666;*/
+
+    --color-icons: var(--color-header-text);
+    --color-badge: #fff;
+    --color-badge-text: var(--color-red-vivid);
+
+    /*--color-badge-active: #555;*/
+    /*--color-badge-active-text: #fff;*/
+
+    /*--color-link: #888;*/
+    /*--color-hover: #aaa;*/
+    /*--color-hover-bg: #fafafa;*/
+
+    --color-header-hover: #ebebeb;
+    --color-background-alt: #f5f5f5;
+}
+
+
+/* Force Laravel Whoops exception handler to be displayed under the debug bar */
+.Whoops.container {
+    z-index: 5999999;
 }
 
 div.phpdebugbar {
     font-size: 13px;
-    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-    direction: ltr;
-    text-align: left;
     z-index: 6000000;
 }
 
-div.phpdebugbar * {
-    direction: ltr;
-
-    text-align: left;
-}
-
 div.phpdebugbar-openhandler-overlay {
     z-index: 6000001;
     cursor: pointer;
 }
 
 div.phpdebugbar-openhandler {
-    border: 1px solid #aaa;
+    border: 1px solid var(--color-border);
     border-top: 3px solid var(--color-red-vivid);
-    width: 80%;
-    height: 70%;
     padding: 10px;
     border-radius: 5px;
     overflow-y: scroll;
@@ -45,10 +61,9 @@ div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button {
     cursor: pointer;
     margin: 5px;
     padding: 0px 12px 2px;
-    border-radius: 3px;
-    border: 1px solid #ddd;
-    background-color: #f5f5f5;
-    color: #000;
+    border: 1px solid var(--color-border);
+    background-color: var(--color-header);
+    color: var(--color-header-text);
     text-shadow: 1px 1px #fff;
     font-size: 13px;
 }
@@ -71,8 +86,7 @@ div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form > b {
 div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form input,
 div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select {
     margin: 0px 10px 10px 2px;
-    border: 1px solid #aaa;
-    border-radius: 3px;
+    border: 1px solid var(--color-border);
     padding: 3px 6px 2px;
     line-height: 16px;
 }
@@ -114,7 +128,7 @@ div.phpdebugbar-openhandler table td,
 div.phpdebugbar-openhandler table th {
     width: auto!important;
     text-align: left;
-    border: 0px solid #bbb;
+    border: 0px solid var(--color-border);
     padding: 2px 8px;
     font-size: 14px;
 }
@@ -128,7 +142,7 @@ div.phpdebugbar-openhandler table th {
 
 div.phpdebugbar-openhandler table th,
 div.phpdebugbar-openhandler table tr:nth-child(2n) {
-    background-color: #efefef;
+    background-color: var(--color-background-alt);
 }
 
 div.phpdebugbar-openhandler table th:nth-child(1), div.phpdebugbar-openhandler table td:nth-child(1), /* Date */
@@ -175,12 +189,11 @@ div.phpdebugbar-resize-handle {
 
 div.phpdebugbar-closed,
 div.phpdebugbar-minimized {
-    border-top-color: #ddd;
+    border-top-color: var(--color-border);
 }
 
 div.phpdebugbar code, div.phpdebugbar pre, div.phpdebugbar samp {
     background: none !important;
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
     font-size: 1em;
     border: 0 !important;
     padding: 0 !important;
@@ -196,30 +209,25 @@ div.phpdebugbar .phpdebugbar-widgets-messages .hljs > code {
 }
 
 div.phpdebugbar code, div.phpdebugbar pre {
-    color: #000;
+    color: var(--color-text);
 }
 
 div.phpdebugbar-widgets-exceptions .phpdebugbar-widgets-filename {
     margin-top: 4px;
 }
 
-div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item pre.phpdebugbar-widgets-file {
-    border: 1px solid #d2d2d2;
-    border-left: 2px solid #d2d2d2;
-}
-
 div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item pre.phpdebugbar-widgets-file[style="display: block;"] ~ div {
     display: block;
 }
 
 div.phpdebugbar pre.sf-dump {
-    color: #000;
+    color: var(--color-text);
     outline: none;
     padding-left: 0px;
 }
 
 div.phpdebugbar-body {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--color-header-border);
 }
 
 div.phpdebugbar-header {
@@ -259,12 +267,11 @@ div.phpdebugbar-openhandler-header {
 }
 
 a.phpdebugbar-restore-btn {
-    border-right-color: #ddd!important;
+    border-right-color: var(--color-border) !important;
     height: 20px;
     width: 24px;
     background-position: center;
     background-size: 21px;
-    background-color: white;
 }
 
 .phpdebugbar:not(.phpdebugbar-closed) a.phpdebugbar-restore-btn {
@@ -278,7 +285,7 @@ div.phpdebugbar-header > div > * {
 }
 
 div.phpdebugbar-header .phpdebugbar-tab {
-    border-left: 1px solid #ddd;
+    border-left: 1px solid var(--color-header-border);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -376,14 +383,12 @@ ul.phpdebugbar-widgets-timeline table.phpdebugbar-widgets-params td:first-child
 }
 
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
-    width: calc(100% - 20px);
-    margin-left: 10px;
+    width: 100%;
     padding: 4px 0px 4px;
     height: 20px;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--color-border);
     border-bottom: 0px;
-    background-color: #e8e8e8;
-    border-radius: 5px 5px 0px 0px;
+    background-color: var(--color-header);
 }
 
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter, div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter.phpdebugbar-widgets-excluded {
@@ -391,7 +396,7 @@ div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-w
 }
 
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar input {
-    width: calc(100% - 48px);
+    width: calc(100% - 58px);
     margin-left: 0px;
     border-radius: 3px;
     padding: 2px 6px;
@@ -404,12 +409,10 @@ div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugb
     margin: 0px;
     text-transform: uppercase;
     font-style: normal;
-    color: #333;
 }
 
 div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-collector {
     text-transform: none;
-    color: #888;
 }
 
 .phpdebugbar-widgets-toolbar i.phpdebugbar-fa.phpdebugbar-fa-search {
@@ -421,7 +424,7 @@ div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugb
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter,
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter.phpdebugbar-widgets-excluded {
     position: relative;
-    top: -48px;
+    top: -52px;
     display: inline-block;
     background-color: #6d6d6d;
     margin-left: 3px;
@@ -486,7 +489,7 @@ a.phpdebugbar-restore-btn:hover,
 a.phpdebugbar-minimize-btn:hover,
 a.phpdebugbar-maximize-btn:hover,
 a.phpdebugbar-open-btn:hover {
-    background-color: #ebebeb;
+    background-color: var(--color-header-hover);
     /* transition: background-color .25s linear 0s, color .25s linear 0s; */
 }
 
@@ -508,8 +511,8 @@ a.phpdebugbar-tab.phpdebugbar-active {
 }
 
 a.phpdebugbar-tab.phpdebugbar-active span.phpdebugbar-badge {
-    background-color: white;
-    color: var(--color-red-vivid);
+    background-color: var(--color-badge);
+    color: var(--color-badge-text);
     text-shadow: 1px 1px #ebebeb;
 }
 
@@ -534,7 +537,7 @@ a.phpdebugbar-tab span.phpdebugbar-badge {
 div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text {
     border: none;
     border-radius: 5px;
-    background: #f5f5f5;
+    background: var(--color-background-alt);
     font-size: 12px;
     width: auto;
     white-space: nowrap;
@@ -557,7 +560,6 @@ div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text {
 .phpdebugbar-widgets-toolbar > .fa {
     width: 25px;
     font-size: 15px;
-    color: #555;
     text-align: center;
 }
 
@@ -599,7 +601,7 @@ ul.phpdebugbar-widgets-timeline li:hover {
 .phpdebugbar-widgets-mails ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item .phpdebugbar-widgets-headers {
     margin: 10px 0px;
     padding: 7px 10px;
-    border-left: 2px solid #ddd;
+    border-left: 2px solid var(--color-header);
     line-height: 17px;
 }
 
@@ -634,10 +636,9 @@ ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item .phpdebugbar-widget
 }
 
 ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params {
-    background-color: #fdfdfd;
     margin: 10px 0px;
     font-size: 12px;
-    border-left: 2px solid #cecece;
+    border-left: 2px solid var(--color-border);
 }
 
 div.phpdebugbar-widgets-templates table.phpdebugbar-widgets-params th,
@@ -661,7 +662,7 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td.phpdebugb
 }
 
 ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:nth-child(even) {
-    background-color: #f5f5f5;
+    background-color: var(--color-background-alt);
 }
 
 div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value {
@@ -721,18 +722,18 @@ div.phpdebugbar-panel div.phpdebugbar-widgets-status {
     margin-top: 0px !important;
     line-height: 11px!important;
     font-weight: bold!important;
-    background: #f5f5f5!important;
-    border-bottom: 1px solid #cecece!important;
+    background: var(--color-background-alt) !important;
+    border-bottom: 1px solid var(--color-border) !important;
 }
 
 div.phpdebugbar-panel div.phpdebugbar-widgets-status > * {
-    color: #383838!important;
+    color: var(--color-header-text)!important;
 }
 
 div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before {
     font-family: PhpDebugbarFontAwesome;
     content: "\f05a";
-    color: #737373;
+    color: var(--color-icons);
     text-shadow: 1px 1px #fff;
     font-size: 14px;
     position: relative;
@@ -746,7 +747,7 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td {
 }
 
 div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params th {
-    background-color: #efefef;
+    background-color: var(--color-header);
 }
 
 div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td.phpdebugbar-widgets-name {
@@ -768,9 +769,6 @@ ul.phpdebugbar-widgets-list ul.phpdebugbar-widgets-table-list {
     line-height: 150%;
 }
 
-.phpdebugbar-text-muted {
-    color: #888;
-}
 
 ul.phpdebugbar-widgets-cache a.phpdebugbar-widgets-forget {
     float: right;
@@ -796,7 +794,7 @@ div.phpdebugbar-header-right {
 }
 
 div.phpdebugbar-header-right > * {
-    border-right: 1px solid #ddd;
+    border-right: 1px solid var(--color-header);
 }
 
 div.phpdebugbar-header-right > *:first-child {
@@ -822,7 +820,7 @@ div.phpdebugbar-panel table .phpdebugbar-widgets-name {
 
 dl.phpdebugbar-widgets-kvlist > :nth-child(4n-1),
 dl.phpdebugbar-widgets-kvlist > :nth-child(4n) {
-    background-color: #f5f5f5;
+    background-color: var(--color-background-alt);
 }
 
 .phpdebugbar pre.sf-dump:after {
@@ -917,16 +915,6 @@ pre.phpdebugbar-widgets-code-block ul.phpdebugbar-widgets-numbered-code li {
     line-height: 20px;
 }
 
-@media (prefers-color-scheme: dark) {
-    div.phpdebugbar .phpdebugbar-indicator span.phpdebugbar-tooltip,
-    div.phpdebugbar div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text,
-    div.phpdebugbar pre.sf-dump,
-    div.phpdebugbar .hljs,
-    div.phpdebugbar code.phpdebugbar-widgets-sql span.hljs-operator {
-        color: var(--color-gray-100) !important;
-    }
-}
-
 .phpdebugbar-widgets-bg-measure .phpdebugbar-widgets-value {
     height: 2px !important;
 }
@@ -963,7 +951,7 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-explain {
 }
 
 div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-explain th {
-    border: 1px solid #ddd;
+    border: 1px solid var(--color-header);
     text-align: center;
 }
 
@@ -975,7 +963,6 @@ div.phpdebugbar-widgets-sqlqueries a.phpdebugbar-widgets-visual-explain {
 }
 
 div.phpdebugbar-widgets-sqlqueries a.phpdebugbar-widgets-visual-link {
-    color: #888;
     margin-left: 6px;
 }
 

From 9f119d1d9660ec327033be7fce9b5f38befe0aba Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sun, 12 Jan 2025 15:32:49 +0100
Subject: [PATCH 03/16] Remove text-shadow, use variables for dark mode

---
 src/JavascriptRenderer.php                   |  1 -
 src/Resources/laravel-debugbar-dark-mode.css | 61 --------------------
 src/Resources/laravel-debugbar.css           | 61 +++++++++++++++-----
 3 files changed, 47 insertions(+), 76 deletions(-)

diff --git a/src/JavascriptRenderer.php b/src/JavascriptRenderer.php
index 0e4a0aeb6..29915b8b7 100644
--- a/src/JavascriptRenderer.php
+++ b/src/JavascriptRenderer.php
@@ -20,7 +20,6 @@ public function __construct(DebugBar $debugBar, $baseUrl = null, $basePath = nul
         parent::__construct($debugBar, $baseUrl, $basePath);
 
         $this->cssFiles['laravel'] = __DIR__ . '/Resources/laravel-debugbar.css';
-        $this->cssFiles['laravel-darkmode'] = __DIR__ . '/Resources/laravel-debugbar-dark-mode.css';
         $this->jsFiles['laravel-cache'] = __DIR__ . '/Resources/cache/widget.js';
         $this->jsFiles['laravel-queries'] = __DIR__ . '/Resources/queries/widget.js';
 
diff --git a/src/Resources/laravel-debugbar-dark-mode.css b/src/Resources/laravel-debugbar-dark-mode.css
index 968fdf6d2..8b1378917 100644
--- a/src/Resources/laravel-debugbar-dark-mode.css
+++ b/src/Resources/laravel-debugbar-dark-mode.css
@@ -1,62 +1 @@
-/* Dark mode */
-div.phpdebugbar[data-theme='dark'],
-div.phpdebugbar-openhandler[data-theme='dark'] {
-    --color-gray-100: #F7FAFC;
-    --color-gray-200: #EDF2F7;
-    --color-gray-300: #E2E8F0;
-    --color-gray-400: #CBD5E0;
-    --color-gray-500: #A0AEC0;
-    --color-gray-600: #718096;
-    --color-gray-700: #4A5568;
-    --color-gray-800: #252a37;
-    --color-gray-900: #18181b;
-    --color-red-vivid: #eb4432;
-
-    --color-background: var(--color-gray-800);
-    --color-text: var(--color-gray-100);
-    --color-text-muted: var(--color-gray-600);
-    --color-border: var(--color-gray-600);
-
-    --color-header:var(--color-gray-900);
-    --color-header-text: var(--color-gray-200);
-    --color-header-border: var(--color-gray-800);
-
-    /*--color-active: #444;*/
-    /*--color-active-text: #e0e0e0;*/
-
-    --color-icons: var(--color-header-text);
-    --color-badge: #fff;
-    --color-badge-text: var(--color-red-vivid);
-
-    --color-badge-active: var(--color-red-vivid);
-    --color-badge-active-text: #fff;
-
-    --color-link: var(--color-gray-500);
-    --color-hover: var(--color-gray-400);
-    --color-hover-bg: var(--color-gray-300);
-
-    --color-header-hover: var(--color-gray-700);
-    --color-background-alt: var(--color-gray-900);
-}
-
-div.phpdebugbar[data-theme="dark"] ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label {
-    text-shadow: 1px 1px #000;
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before,
-div.phpdebugbar-openhandler[data-theme="dark"] table th,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > a,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions button,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form input,
-div.phpdebugbar-openhandler[data-theme="dark"] .phpdebugbar-openhandler-actions > form select {
-    text-shadow: 1px 1px var(--color-gray-700);
-}
-
-div.phpdebugbar[data-theme="dark"] div.phpdebugbar-header {
-    text-shadow: none;
-}
-
-div.phpdebugbar-openhandler[data-theme="dark"] {
-    border-top-color: var(--color-red-vivid);
-}
 
diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index f3966a81f..3021aac5a 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -18,8 +18,8 @@ div.phpdebugbar-openhandler {
     --color-badge: #fff;
     --color-badge-text: var(--color-red-vivid);
 
-    /*--color-badge-active: #555;*/
-    /*--color-badge-active-text: #fff;*/
+    --color-badge-active: var(--color-red-vivid);
+    --color-badge-active-text: #fff;
 
     /*--color-link: #888;*/
     /*--color-hover: #aaa;*/
@@ -29,6 +29,49 @@ div.phpdebugbar-openhandler {
     --color-background-alt: #f5f5f5;
 }
 
+/* Dark mode */
+div.phpdebugbar[data-theme='dark'],
+div.phpdebugbar-openhandler[data-theme='dark'] {
+    --color-white: #FFFFFF;
+    --color-gray-100: #F7FAFC;
+    --color-gray-200: #EDF2F7;
+    --color-gray-300: #E2E8F0;
+    --color-gray-400: #CBD5E0;
+    --color-gray-500: #A0AEC0;
+    --color-gray-600: #718096;
+    --color-gray-700: #4A5568;
+    --color-gray-800: #252a37;
+    --color-gray-900: #18181b;
+    --color-red-vivid: #eb4432;
+
+    --color-background: var(--color-gray-800);
+    --color-text: var(--color-gray-100);
+    --color-text-muted: var(--color-gray-600);
+    --color-border: var(--color-gray-600);
+
+    --color-header:var(--color-gray-900);
+    --color-header-text: var(--color-gray-200);
+    --color-header-border: var(--color-gray-800);
+
+    --color-active: var(--color-gray-800);
+    --color-active-text: var(--color-gray-100);
+
+    --color-icons: var(--color-header-text);
+    --color-badge: var(--color-white);
+    --color-badge-text: var(--color-red-vivid);
+
+    --color-badge-active: var(--color-red-vivid);
+    --color-badge-active-text: var(--color-white);
+
+    --color-link: var(--color-gray-500);
+    --color-hover: var(--color-gray-400);
+    --color-hover-bg: var(--color-gray-300);
+
+    --color-header-hover: var(--color-gray-700);
+    --color-background-alt: var(--color-gray-900);
+}
+
+
 
 /* Force Laravel Whoops exception handler to be displayed under the debug bar */
 .Whoops.container {
@@ -64,7 +107,6 @@ div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button {
     border: 1px solid var(--color-border);
     background-color: var(--color-header);
     color: var(--color-header-text);
-    text-shadow: 1px 1px #fff;
     font-size: 13px;
 }
 
@@ -134,7 +176,6 @@ div.phpdebugbar-openhandler table th {
 }
 
 div.phpdebugbar-openhandler table th {
-    text-shadow: 1px 1px #fff;
     font-size: 12px;
     text-transform: uppercase;
     padding: 5px 8px;
@@ -233,7 +274,6 @@ div.phpdebugbar-body {
 div.phpdebugbar-header {
     min-height: 30px;
     line-height: 20px;
-    text-shadow: 1px 1px #FFF;
 }
 
 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 {
 
 ul.phpdebugbar-widgets-timeline li .phpdebugbar-widgets-value span.phpdebugbar-widgets-label {
     color: #fff;
-    text-shadow: 1px 1px #000;
 }
 
 ul.phpdebugbar-widgets-timeline table.phpdebugbar-widgets-params {
@@ -432,7 +471,6 @@ div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-w
     padding: 5px 8px 4px;
     text-transform: uppercase;
     font-size: 10px;
-    text-shadow: 1px 1px #585858;
     transition: background-color .25s linear 0s, color .25s linear 0s;
     color: #FFF;
 
@@ -507,13 +545,11 @@ a.phpdebugbar-tab.phpdebugbar-active {
     background: var(--color-red-vivid);
     background-image: none;
     color: #fff !important;
-    text-shadow: 1px 1px #bf3039;
 }
 
 a.phpdebugbar-tab.phpdebugbar-active span.phpdebugbar-badge {
     background-color: var(--color-badge);
     color: var(--color-badge-text);
-    text-shadow: 1px 1px #ebebeb;
 }
 
 a.phpdebugbar-tab span.phpdebugbar-badge {
@@ -523,8 +559,7 @@ a.phpdebugbar-tab span.phpdebugbar-badge {
     background: var(--color-red-vivid);
     font-size: 11px;
     font-family: monospace;
-    color: #fff;
-    text-shadow: 1px 1px #bf3039;
+    color: var(--color-badge-active-text);
     border-radius: 10px;
     position: relative;
 }
@@ -542,7 +577,6 @@ div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text {
     width: auto;
     white-space: nowrap;
     padding: 2px 18px;
-    text-shadow: none;
 
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -734,7 +768,6 @@ div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before {
     font-family: PhpDebugbarFontAwesome;
     content: "\f05a";
     color: var(--color-icons);
-    text-shadow: 1px 1px #fff;
     font-size: 14px;
     position: relative;
     top: 1px;
@@ -865,7 +898,7 @@ div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-param-count:before {
 }
 
 div.phpdebugbar dl.phpdebugbar-widgets-kvlist > :nth-child(4n)::before {
-background-color: #f5f5f5;
+background-color: var(--background-color-alt);
 }
 
 dt.phpdebugbar-widgets-key {

From b8c5d8a8696a7974346e9ae99868f755957e3d73 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sun, 12 Jan 2025 16:32:43 +0100
Subject: [PATCH 04/16] TWeak timeline

---
 src/Resources/laravel-debugbar-dark-mode.css |  1 -
 src/Resources/laravel-debugbar.css           | 47 +-------------------
 2 files changed, 1 insertion(+), 47 deletions(-)
 delete mode 100644 src/Resources/laravel-debugbar-dark-mode.css

diff --git a/src/Resources/laravel-debugbar-dark-mode.css b/src/Resources/laravel-debugbar-dark-mode.css
deleted file mode 100644
index 8b1378917..000000000
--- a/src/Resources/laravel-debugbar-dark-mode.css
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index 3021aac5a..1906f781d 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -376,51 +376,6 @@ dl.phpdebugbar-widgets-kvlist dd {
     margin-left: 25%;
 }
 
-ul.phpdebugbar-widgets-timeline li .phpdebugbar-widgets-measure {
-    margin: 0 6px !important;
-    height: 28px;
-    line-height: 28px;
-    border: none;
-}
-
-ul.phpdebugbar-widgets-timeline li > .phpdebugbar-widgets-measure {
-    height: 20px;
-}
-
-ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-value {
-    height: 16px;
-    background-color: #63abca;
-    border-bottom: 2px solid #477e96;
-}
-
-ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label,
-ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-collector {
-    top: 0px;
-    color: #000;
-    font-size: 11px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 90%;
-}
-
-ul.phpdebugbar-widgets-timeline li .phpdebugbar-widgets-value span.phpdebugbar-widgets-label {
-    color: #fff;
-}
-
-ul.phpdebugbar-widgets-timeline table.phpdebugbar-widgets-params {
-    font-size: 11px;
-    margin-top: 20px !important;
-}
-
-ul.phpdebugbar-widgets-timeline table.phpdebugbar-widgets-params td {
-    border-left: none ;
-    border-right: none;
-}
-
-ul.phpdebugbar-widgets-timeline table.phpdebugbar-widgets-params td:first-child {
-    padding: 0 10px;
-}
-
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
     width: 100%;
     padding: 4px 0px 4px;
@@ -558,7 +513,7 @@ a.phpdebugbar-tab span.phpdebugbar-badge {
     text-align: center;
     background: var(--color-red-vivid);
     font-size: 11px;
-    font-family: monospace;
+    font-family: var(--font-mono);
     color: var(--color-badge-active-text);
     border-radius: 10px;
     position: relative;

From 694e72f56e51347244677c354eb2be0ab33fcda4 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sun, 12 Jan 2025 16:49:39 +0100
Subject: [PATCH 05/16] Fix exceptions

---
 src/Resources/laravel-debugbar.css | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index 1906f781d..22c1777de 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -233,14 +233,6 @@ div.phpdebugbar-minimized {
     border-top-color: var(--color-border);
 }
 
-div.phpdebugbar code, div.phpdebugbar pre, div.phpdebugbar samp {
-    background: none !important;
-    font-size: 1em;
-    border: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
 div.phpdebugbar .hljs {
     padding: 0;
 }
@@ -897,12 +889,6 @@ ul.phpdebugbar-widgets-table-list li:last-child {
     margin-bottom: 0;
 }
 
-
-pre.phpdebugbar-widgets-code-block ul.phpdebugbar-widgets-numbered-code li {
-    padding-top: 0;
-    line-height: 20px;
-}
-
 .phpdebugbar-widgets-bg-measure .phpdebugbar-widgets-value {
     height: 2px !important;
 }

From a6cb063a63d9e712e7b0319c83d343c566736830 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sun, 12 Jan 2025 18:34:16 +0100
Subject: [PATCH 06/16] Remove open handler

---
 src/Resources/laravel-debugbar.css | 56 +++---------------------------
 1 file changed, 4 insertions(+), 52 deletions(-)

diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index 22c1777de..d745b1eb9 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -98,65 +98,17 @@ div.phpdebugbar-openhandler {
     cursor: default;
 }
 
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > a,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button {
-    display: inline-block;
-    cursor: pointer;
-    margin: 5px;
-    padding: 0px 12px 2px;
-    border: 1px solid var(--color-border);
-    background-color: var(--color-header);
-    color: var(--color-header-text);
-    font-size: 13px;
-}
 
 div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form {
     margin: 15px 0px 5px;
-    text-transform: uppercase;
     font-size: 13px;
     font-weight: bold;
 }
 
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form br {
-    display: none;
-}
-
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form > b {
-    display: none;
-}
-
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form input,
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select {
-    margin: 0px 10px 10px 2px;
-    border: 1px solid var(--color-border);
-    padding: 3px 6px 2px;
-    line-height: 16px;
-}
-
-@media (max-width: 720px) {
-    div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select + br,
-    div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form input[name="uri"] + br {
-        display: block;
-    }
-}
-
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions > form select {
-    padding: 2px 5px 1px;
-}
-
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions input[name="uri"] {
-    width: 200px;
-}
-
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions input[name="ip"] {
-    width: 90px;
-}
-
-div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button {
-    outline: none;
-    margin: 0px 0px 10px 2px;
-    padding: 5px 15px 4px;
-    line-height: 12px;
+div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions button,
+div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions select,
+div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions input {
+   height: 24px;
 }
 
 div.phpdebugbar-openhandler table {

From 51cf3bf2cf6d6340206362e786c8364185369033 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sun, 12 Jan 2025 19:06:06 +0100
Subject: [PATCH 07/16] Tweak hover

---
 src/Resources/laravel-debugbar.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index d745b1eb9..9bb29d48a 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -65,7 +65,7 @@ div.phpdebugbar-openhandler[data-theme='dark'] {
 
     --color-link: var(--color-gray-500);
     --color-hover: var(--color-gray-400);
-    --color-hover-bg: var(--color-gray-300);
+    --color-hover-bg: var(--color-gray-700);
 
     --color-header-hover: var(--color-gray-700);
     --color-background-alt: var(--color-gray-900);
@@ -507,10 +507,6 @@ ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item .phpdebugbar-widget
     line-height: 20px;
 }
 
-ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:hover,
-ul.phpdebugbar-widgets-timeline li:hover {
-    background-color: initial;
-}
 
 .phpdebugbar-widgets-templates ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item {
     display: block;
@@ -597,6 +593,9 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td.phpdebugb
 ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:nth-child(even) {
     background-color: var(--color-background-alt);
 }
+ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:nth-child(even):hover {
+    background-color: var(--color-hover-bg);
+}
 
 div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value {
     display: inline-flex;

From 547548414e80a18e47e7e87708c6f07a0bf2cfc5 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sun, 12 Jan 2025 19:09:18 +0100
Subject: [PATCH 08/16] Remove padding

---
 src/Resources/laravel-debugbar.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index 9bb29d48a..db35d1545 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -91,7 +91,6 @@ div.phpdebugbar-openhandler-overlay {
 div.phpdebugbar-openhandler {
     border: 1px solid var(--color-border);
     border-top: 3px solid var(--color-red-vivid);
-    padding: 10px;
     border-radius: 5px;
     overflow-y: scroll;
     z-index: 6000002;

From 6d586b22c759bb70c2aefd6034fa51a965ddf8e5 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sun, 12 Jan 2025 19:31:08 +0100
Subject: [PATCH 09/16] Tweak toolbar

---
 src/Resources/laravel-debugbar.css | 27 ++-------------------------
 1 file changed, 2 insertions(+), 25 deletions(-)

diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index db35d1545..eb74ae13d 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -319,31 +319,10 @@ dl.phpdebugbar-widgets-kvlist dd {
     margin-left: 25%;
 }
 
-div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
-    width: 100%;
-    padding: 4px 0px 4px;
-    height: 20px;
-    border-top: 1px solid var(--color-border);
-    border-bottom: 0px;
-    background-color: var(--color-header);
-}
-
-div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter, div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter.phpdebugbar-widgets-excluded {
-    right: 3px;
-}
-
-div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar input {
-    width: calc(100% - 58px);
-    margin-left: 0px;
-    border-radius: 3px;
-    padding: 2px 6px;
-    height: 15px;
-}
 
 div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-label,
 div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-collector {
-    padding: 1px 0px 0px 10px;
-    margin: 0px;
+
     text-transform: uppercase;
     font-style: normal;
 }
@@ -360,13 +339,11 @@ div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugb
 
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter,
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter.phpdebugbar-widgets-excluded {
-    position: relative;
-    top: -52px;
+
     display: inline-block;
     background-color: #6d6d6d;
     margin-left: 3px;
     border-radius: 3px;
-    padding: 5px 8px 4px;
     text-transform: uppercase;
     font-size: 10px;
     transition: background-color .25s linear 0s, color .25s linear 0s;

From 432c2a3bb978ba2372266617be0e8e92ab1c6e58 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Wed, 15 Jan 2025 11:00:49 +0100
Subject: [PATCH 10/16] TWeak theme, remove height

---
 src/JavascriptRenderer.php         |  2 +-
 src/Resources/laravel-debugbar.css | 22 ----------------------
 2 files changed, 1 insertion(+), 23 deletions(-)

diff --git a/src/JavascriptRenderer.php b/src/JavascriptRenderer.php
index 29915b8b7..d02032e4b 100644
--- a/src/JavascriptRenderer.php
+++ b/src/JavascriptRenderer.php
@@ -23,7 +23,7 @@ public function __construct(DebugBar $debugBar, $baseUrl = null, $basePath = nul
         $this->jsFiles['laravel-cache'] = __DIR__ . '/Resources/cache/widget.js';
         $this->jsFiles['laravel-queries'] = __DIR__ . '/Resources/queries/widget.js';
 
-        $this->setDefaultTheme(config('debugbar.theme', 'auto'));
+        $this->setTheme(config('debugbar.theme', 'auto'));
     }
 
     /**
diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index eb74ae13d..0bbc5354d 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -71,8 +71,6 @@ div.phpdebugbar-openhandler[data-theme='dark'] {
     --color-background-alt: var(--color-gray-900);
 }
 
-
-
 /* Force Laravel Whoops exception handler to be displayed under the debug bar */
 .Whoops.container {
     z-index: 5999999;
@@ -214,11 +212,6 @@ div.phpdebugbar-body {
     border-top: 1px solid var(--color-header-border);
 }
 
-div.phpdebugbar-header {
-    min-height: 30px;
-    line-height: 20px;
-}
-
 div.phpdebugbar-header  span.phpdebugbar-text, div.phpdebugbar-header > div > span > span,  div.phpdebugbar-header > div > span > i{
     display: inline-block;
     transform: translateY(-0.5px) !important;
@@ -261,11 +254,6 @@ a.phpdebugbar-restore-btn {
     border-right: none;
 }
 
-div.phpdebugbar-header > div > * {
-    padding: 5px 8px;
-    font-size: 13px;
-    height: 20px;
-}
 
 div.phpdebugbar-header .phpdebugbar-tab {
     border-left: 1px solid var(--color-header-border);
@@ -406,16 +394,6 @@ a.phpdebugbar-open-btn:hover {
     /* transition: background-color .25s linear 0s, color .25s linear 0s; */
 }
 
-a.phpdebugbar-close-btn,
-a.phpdebugbar-open-btn,
-a.phpdebugbar-minimize-btn ,
-a.phpdebugbar-maximize-btn,
-a.phpdebugbar-tab.phpdebugbar-tab-history,
-a.phpdebugbar-tab.phpdebugbar-tab-settings {
-  min-width: 14px;
-  height: 20px;
-}
-
 a.phpdebugbar-tab.phpdebugbar-active {
     background: var(--color-red-vivid);
     background-image: none;

From d51878ea3715804831e459f7b167a8fb017f190b Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Fri, 17 Jan 2025 16:55:10 +0100
Subject: [PATCH 11/16] PRefix var

---
 src/Resources/laravel-debugbar.css | 182 +++++++++++++----------------
 1 file changed, 82 insertions(+), 100 deletions(-)

diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index 0bbc5354d..e8b25e049 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -1,74 +1,74 @@
 div.phpdebugbar,
 div.phpdebugbar-openhandler {
-    --color-red-vivid: #eb4432;
+    --debugbar-red-vivid: #eb4432;
 
-    /*--color-background: #fff;*/
-    --color-text: #222;
-    /*--color-text-muted: #888;*/
-    --color-border: #bbb;
+    /*--debugbar-background: #fff;*/
+    --debugbar-text: #222;
+    /*--debugbar-text-muted: #888;*/
+    --debugbar-border: #bbb;
 
-    --color-header: #efefef;
-    --color-header-text: #555;
-    /*--color-header-border: #ddd;*/
+    --debugbar-header: #fff;
+    --debugbar-header-text: #555;
+    /*--debugbar-header-border: #ddd;*/
 
-    /*--color-active: #ccc;*/
-    /*--color-active-text: #666;*/
+    /*--debugbar-active: #ccc;*/
+    /*--debugbar-active-text: #666;*/
 
-    --color-icons: var(--color-header-text);
-    --color-badge: #fff;
-    --color-badge-text: var(--color-red-vivid);
+    --debugbar-icons: var(--debugbar-header-text);
+    --debugbar-badge: #fff;
+    --debugbar-badge-text: var(--debugbar-red-vivid);
 
-    --color-badge-active: var(--color-red-vivid);
-    --color-badge-active-text: #fff;
+    --debugbar-badge-active: var(--debugbar-red-vivid);
+    --debugbar-badge-active-text: #fff;
 
-    /*--color-link: #888;*/
-    /*--color-hover: #aaa;*/
-    /*--color-hover-bg: #fafafa;*/
+    /*--debugbar-link: #888;*/
+    /*--debugbar-hover: #aaa;*/
+    /*--debugbar-hover-bg: #fafafa;*/
 
-    --color-header-hover: #ebebeb;
-    --color-background-alt: #f5f5f5;
+    --debugbar-header-hover: #ebebeb;
+    --debugbar-background-alt: #f5f5f5;
 }
 
 /* Dark mode */
 div.phpdebugbar[data-theme='dark'],
 div.phpdebugbar-openhandler[data-theme='dark'] {
-    --color-white: #FFFFFF;
-    --color-gray-100: #F7FAFC;
-    --color-gray-200: #EDF2F7;
-    --color-gray-300: #E2E8F0;
-    --color-gray-400: #CBD5E0;
-    --color-gray-500: #A0AEC0;
-    --color-gray-600: #718096;
-    --color-gray-700: #4A5568;
-    --color-gray-800: #252a37;
-    --color-gray-900: #18181b;
-    --color-red-vivid: #eb4432;
+    --debugbar-white: #FFFFFF;
+    --debugbar-gray-100: #F7FAFC;
+    --debugbar-gray-200: #EDF2F7;
+    --debugbar-gray-300: #E2E8F0;
+    --debugbar-gray-400: #CBD5E0;
+    --debugbar-gray-500: #A0AEC0;
+    --debugbar-gray-600: #718096;
+    --debugbar-gray-700: #4A5568;
+    --debugbar-gray-800: #252a37;
+    --debugbar-gray-900: #18181b;
+    --debugbar-red-vivid: #eb4432;
 
-    --color-background: var(--color-gray-800);
-    --color-text: var(--color-gray-100);
-    --color-text-muted: var(--color-gray-600);
-    --color-border: var(--color-gray-600);
+    --debugbar-background: var(--debugbar-gray-800);
+    --debugbar-text: var(--debugbar-gray-100);
+    --debugbar-text-muted: var(--debugbar-gray-600);
+    --debugbar-border: var(--debugbar-gray-600);
 
-    --color-header:var(--color-gray-900);
-    --color-header-text: var(--color-gray-200);
-    --color-header-border: var(--color-gray-800);
+    --debugbar-header:var(--debugbar-gray-900);
+    --debugbar-header-text: var(--debugbar-gray-200);
+    --debugbar-header-border: var(--debugbar-gray-800);
 
-    --color-active: var(--color-gray-800);
-    --color-active-text: var(--color-gray-100);
+    --debugbar-active: var(--debugbar-gray-800);
+    --debugbar-active-text: var(--debugbar-gray-100);
 
-    --color-icons: var(--color-header-text);
-    --color-badge: var(--color-white);
-    --color-badge-text: var(--color-red-vivid);
+    --debugbar-icons: var(--debugbar-header-text);
+    --debugbar-badge: var(--debugbar-white);
+    --debugbar-badge-text: var(--debugbar-red-vivid);
 
-    --color-badge-active: var(--color-red-vivid);
-    --color-badge-active-text: var(--color-white);
+    --debugbar-badge-active: var(--debugbar-red-vivid);
+    --debugbar-badge-active-text: var(--debugbar-white);
 
-    --color-link: var(--color-gray-500);
-    --color-hover: var(--color-gray-400);
-    --color-hover-bg: var(--color-gray-700);
+    --debugbar-link: var(--debugbar-gray-500);
+    --debugbar-hover: var(--debugbar-gray-400);
+    --debugbar-hover-bg: var(--debugbar-gray-700);
 
-    --color-header-hover: var(--color-gray-700);
-    --color-background-alt: var(--color-gray-900);
+    --debugbar-header-hover: var(--debugbar-gray-700);
+    --debugbar-background-alt: var(--debugbar-gray-900);
 }
 
 /* Force Laravel Whoops exception handler to be displayed under the debug bar */
@@ -87,8 +87,8 @@ div.phpdebugbar-openhandler-overlay {
 }
 
 div.phpdebugbar-openhandler {
-    border: 1px solid var(--color-border);
-    border-top: 3px solid var(--color-red-vivid);
+    border: 1px solid var(--debugbar-border);
+    border-top: 3px solid var(--debugbar-red-vivid);
     border-radius: 5px;
     overflow-y: scroll;
     z-index: 6000002;
@@ -119,7 +119,7 @@ div.phpdebugbar-openhandler table td,
 div.phpdebugbar-openhandler table th {
     width: auto!important;
     text-align: left;
-    border: 0px solid var(--color-border);
+    border: 0px solid var(--debugbar-border);
     padding: 2px 8px;
     font-size: 14px;
 }
@@ -132,7 +132,7 @@ div.phpdebugbar-openhandler table th {
 
 div.phpdebugbar-openhandler table th,
 div.phpdebugbar-openhandler table tr:nth-child(2n) {
-    background-color: var(--color-background-alt);
+    background-color: var(--debugbar-background-alt);
 }
 
 div.phpdebugbar-openhandler table th:nth-child(1), div.phpdebugbar-openhandler table td:nth-child(1), /* Date */
@@ -170,7 +170,7 @@ div.phpdebugbar-resize-handle {
     cursor: ns-resize;
     border-top: none;
     border-bottom: 0px;
-    background-color: var(--color-red-vivid);
+    background-color: var(--debugbar-red-vivid);
 }
 
 .phpdebugbar.phpdebugbar-minimized div.phpdebugbar-resize-handle {
@@ -179,7 +179,7 @@ div.phpdebugbar-resize-handle {
 
 div.phpdebugbar-closed,
 div.phpdebugbar-minimized {
-    border-top-color: var(--color-border);
+    border-top-color: var(--debugbar-border);
 }
 
 div.phpdebugbar .hljs {
@@ -191,7 +191,7 @@ div.phpdebugbar .phpdebugbar-widgets-messages .hljs > code {
 }
 
 div.phpdebugbar code, div.phpdebugbar pre {
-    color: var(--color-text);
+    color: var(--debugbar-text);
 }
 
 div.phpdebugbar-widgets-exceptions .phpdebugbar-widgets-filename {
@@ -203,13 +203,13 @@ div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item pre.phpdebug
 }
 
 div.phpdebugbar pre.sf-dump {
-    color: var(--color-text);
+    color: var(--debugbar-text);
     outline: none;
     padding-left: 0px;
 }
 
 div.phpdebugbar-body {
-    border-top: 1px solid var(--color-header-border);
+    border-top: 1px solid var(--debugbar-header-border);
 }
 
 div.phpdebugbar-header  span.phpdebugbar-text, div.phpdebugbar-header > div > span > span,  div.phpdebugbar-header > div > span > i{
@@ -243,7 +243,7 @@ div.phpdebugbar-openhandler-header {
 }
 
 a.phpdebugbar-restore-btn {
-    border-right-color: var(--color-border) !important;
+    border-right-color: var(--debugbar-border) !important;
     height: 20px;
     width: 24px;
     background-position: center;
@@ -256,7 +256,7 @@ a.phpdebugbar-restore-btn {
 
 
 div.phpdebugbar-header .phpdebugbar-tab {
-    border-left: 1px solid var(--color-header-border);
+    border-left: 1px solid var(--debugbar-header-border);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -363,7 +363,7 @@ div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-w
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter.phpdebugbar-widgets-excluded[rel="critical"],
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter[rel="error"],
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter.phpdebugbar-widgets-excluded[rel="error"] {
-    background-color: var(--color-red-vivid);
+    background-color: var(--debugbar-red-vivid);
 }
 
 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter[rel="notice"],
@@ -390,29 +390,29 @@ a.phpdebugbar-restore-btn:hover,
 a.phpdebugbar-minimize-btn:hover,
 a.phpdebugbar-maximize-btn:hover,
 a.phpdebugbar-open-btn:hover {
-    background-color: var(--color-header-hover);
+    background-color: var(--debugbar-header-hover);
     /* transition: background-color .25s linear 0s, color .25s linear 0s; */
 }
 
 a.phpdebugbar-tab.phpdebugbar-active {
-    background: var(--color-red-vivid);
+    background: var(--debugbar-red-vivid);
     background-image: none;
     color: #fff !important;
 }
 
 a.phpdebugbar-tab.phpdebugbar-active span.phpdebugbar-badge {
-    background-color: var(--color-badge);
-    color: var(--color-badge-text);
+    background-color: var(--debugbar-badge);
+    color: var(--debugbar-badge-text);
 }
 
 a.phpdebugbar-tab span.phpdebugbar-badge {
     vertical-align: 0px;
     padding: 2px 8px;
     text-align: center;
-    background: var(--color-red-vivid);
+    background: var(--debugbar-red-vivid);
     font-size: 11px;
     font-family: var(--font-mono);
-    color: var(--color-badge-active-text);
+    color: var(--debugbar-badge-active-text);
     border-radius: 10px;
     position: relative;
 }
@@ -421,24 +421,6 @@ a.phpdebugbar-tab span.phpdebugbar-badge {
     cursor: text;
 }
 
-.phpdebugbar-indicator span.phpdebugbar-tooltip,
-div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text {
-    border: none;
-    border-radius: 5px;
-    background: var(--color-background-alt);
-    font-size: 12px;
-    width: auto;
-    white-space: nowrap;
-    padding: 2px 18px;
-
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
 div.phpdebugbar-mini-design a.phpdebugbar-tab:hover span.phpdebugbar-text {
     left: 0px;
     right: auto;
@@ -484,7 +466,7 @@ ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item .phpdebugbar-widget
 .phpdebugbar-widgets-mails ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item .phpdebugbar-widgets-headers {
     margin: 10px 0px;
     padding: 7px 10px;
-    border-left: 2px solid var(--color-header);
+    border-left: 2px solid var(--debugbar-header);
     line-height: 17px;
 }
 
@@ -521,7 +503,7 @@ ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item .phpdebugbar-widget
 ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item table.phpdebugbar-widgets-params {
     margin: 10px 0px;
     font-size: 12px;
-    border-left: 2px solid var(--color-border);
+    border-left: 2px solid var(--debugbar-border);
 }
 
 div.phpdebugbar-widgets-templates table.phpdebugbar-widgets-params th,
@@ -545,10 +527,10 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td.phpdebugb
 }
 
 ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:nth-child(even) {
-    background-color: var(--color-background-alt);
+    background-color: var(--debugbar-background-alt);
 }
 ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:nth-child(even):hover {
-    background-color: var(--color-hover-bg);
+    background-color: var(--debugbar-hover-bg);
 }
 
 div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value {
@@ -583,7 +565,7 @@ div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugb
 }
 
 div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value.phpdebugbar-widgets-error:before {
-    color: var(--color-red-vivid);
+    color: var(--debugbar-red-vivid);
 }
 
 div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value.phpdebugbar-widgets-warning:before,
@@ -608,18 +590,18 @@ div.phpdebugbar-panel div.phpdebugbar-widgets-status {
     margin-top: 0px !important;
     line-height: 11px!important;
     font-weight: bold!important;
-    background: var(--color-background-alt) !important;
-    border-bottom: 1px solid var(--color-border) !important;
+    background: var(--debugbar-background-alt) !important;
+    border-bottom: 1px solid var(--debugbar-border) !important;
 }
 
 div.phpdebugbar-panel div.phpdebugbar-widgets-status > * {
-    color: var(--color-header-text)!important;
+    color: var(--debugbar-header-text)!important;
 }
 
 div.phpdebugbar-panel div.phpdebugbar-widgets-status > span:first-child:before {
     font-family: PhpDebugbarFontAwesome;
     content: "\f05a";
-    color: var(--color-icons);
+    color: var(--debugbar-icons);
     font-size: 14px;
     position: relative;
     top: 1px;
@@ -632,7 +614,7 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td {
 }
 
 div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params th {
-    background-color: var(--color-header);
+    background-color: var(--debugbar-header);
 }
 
 div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td.phpdebugbar-widgets-name {
@@ -659,7 +641,7 @@ ul.phpdebugbar-widgets-cache a.phpdebugbar-widgets-forget {
     float: right;
     font-size: 12px;
     padding: 0 4px;
-    background: var(--color-red-vivid);
+    background: var(--debugbar-red-vivid);
     margin: 0 2px;
     border-radius: 4px;
     color: #fff;
@@ -679,7 +661,7 @@ div.phpdebugbar-header-right {
 }
 
 div.phpdebugbar-header-right > * {
-    border-right: 1px solid var(--color-header);
+    border-right: 1px solid var(--debugbar-header);
 }
 
 div.phpdebugbar-header-right > *:first-child {
@@ -705,7 +687,7 @@ div.phpdebugbar-panel table .phpdebugbar-widgets-name {
 
 dl.phpdebugbar-widgets-kvlist > :nth-child(4n-1),
 dl.phpdebugbar-widgets-kvlist > :nth-child(4n) {
-    background-color: var(--color-background-alt);
+    background-color: var(--debugbar-background-alt);
 }
 
 .phpdebugbar pre.sf-dump:after {
@@ -830,7 +812,7 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-explain {
 }
 
 div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-explain th {
-    border: 1px solid var(--color-header);
+    border: 1px solid var(--debugbar-header);
     text-align: center;
 }
 

From 454deeddbf1140814ca8a74fa6c5eadfc7f740b9 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sat, 18 Jan 2025 15:34:00 +0100
Subject: [PATCH 12/16] Tweak hover/translate

---
 src/Resources/laravel-debugbar.css | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index e8b25e049..0540f538b 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -214,11 +214,6 @@ div.phpdebugbar-body {
 
 div.phpdebugbar-header  span.phpdebugbar-text, div.phpdebugbar-header > div > span > span,  div.phpdebugbar-header > div > span > i{
     display: inline-block;
-    transform: translateY(-0.5px) !important;
-}
-
-div.phpdebugbar-header > div > span > i.phpdebugbar-fa-code{
-    transform: translateY(-1px) !important;
 }
 
 a.phpdebugbar-restore-btn:after {
@@ -382,17 +377,6 @@ div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-w
     opacity: 0.45;
 }
 
-a.phpdebugbar-tab:hover,
-span.phpdebugbar-indicator:hover,
-a.phpdebugbar-indicator:hover,
-a.phpdebugbar-close-btn:hover,
-a.phpdebugbar-restore-btn:hover,
-a.phpdebugbar-minimize-btn:hover,
-a.phpdebugbar-maximize-btn:hover,
-a.phpdebugbar-open-btn:hover {
-    background-color: var(--debugbar-header-hover);
-    /* transition: background-color .25s linear 0s, color .25s linear 0s; */
-}
 
 a.phpdebugbar-tab.phpdebugbar-active {
     background: var(--debugbar-red-vivid);
@@ -529,9 +513,6 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td.phpdebugb
 ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:nth-child(even) {
     background-color: var(--debugbar-background-alt);
 }
-ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:nth-child(even):hover {
-    background-color: var(--debugbar-hover-bg);
-}
 
 div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value {
     display: inline-flex;

From 0370ceceeecc4dac8061a519489dc15ac2639bcf Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sat, 18 Jan 2025 16:10:41 +0100
Subject: [PATCH 13/16] use base for measure, tweak hover

---
 src/Resources/laravel-debugbar.css | 30 +++---------------------------
 1 file changed, 3 insertions(+), 27 deletions(-)

diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index 0540f538b..32b646cbf 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -3,6 +3,7 @@ div.phpdebugbar-openhandler {
     --debugbar-red-vivid: #eb4432;
 
     /*--debugbar-background: #fff;*/
+    --debugbar-background-alt: #f5f5f5;
     --debugbar-text: #222;
     /*--debugbar-text-muted: #888;*/
     --debugbar-border: #bbb;
@@ -23,10 +24,8 @@ div.phpdebugbar-openhandler {
 
     /*--debugbar-link: #888;*/
     /*--debugbar-hover: #aaa;*/
-    /*--debugbar-hover-bg: #fafafa;*/
 
     --debugbar-header-hover: #ebebeb;
-    --debugbar-background-alt: #f5f5f5;
 }
 
 /* Dark mode */
@@ -45,6 +44,7 @@ div.phpdebugbar-openhandler[data-theme='dark'] {
     --debugbar-red-vivid: #eb4432;
 
     --debugbar-background: var(--debugbar-gray-800);
+    --debugbar-background-alt: var(--debugbar-gray-900);
     --debugbar-text: var(--debugbar-gray-100);
     --debugbar-text-muted: var(--debugbar-gray-600);
     --debugbar-border: var(--debugbar-gray-600);
@@ -52,6 +52,7 @@ div.phpdebugbar-openhandler[data-theme='dark'] {
     --debugbar-header:var(--debugbar-gray-900);
     --debugbar-header-text: var(--debugbar-gray-200);
     --debugbar-header-border: var(--debugbar-gray-800);
+    --debugbar-header-hover: var(--debugbar-gray-700);
 
     --debugbar-active: var(--debugbar-gray-800);
     --debugbar-active-text: var(--debugbar-gray-100);
@@ -66,9 +67,6 @@ div.phpdebugbar-openhandler[data-theme='dark'] {
     --debugbar-link: var(--debugbar-gray-500);
     --debugbar-hover: var(--debugbar-gray-400);
     --debugbar-hover-bg: var(--debugbar-gray-700);
-
-    --debugbar-header-hover: var(--debugbar-gray-700);
-    --debugbar-background-alt: var(--debugbar-gray-900);
 }
 
 /* Force Laravel Whoops exception handler to be displayed under the debug bar */
@@ -694,24 +692,6 @@ div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-param-count:before {
     margin-right: 6px!important;
 }
 
-.phpdebugbar-widgets-list-item .phpdebugbar-widgets-bg-measure {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    pointer-events: none;
-}
-
-.phpdebugbar-widgets-bg-measure .phpdebugbar-widgets-value {
-    position: absolute;
-    height: 1px !important;
-    opacity: 1 !important;
-    bottom: 0;
-    background: #63abca !important;
-}
-
 div.phpdebugbar dl.phpdebugbar-widgets-kvlist > :nth-child(4n)::before {
 background-color: var(--background-color-alt);
 }
@@ -757,10 +737,6 @@ ul.phpdebugbar-widgets-table-list li:last-child {
     margin-bottom: 0;
 }
 
-.phpdebugbar-widgets-bg-measure .phpdebugbar-widgets-value {
-    height: 2px !important;
-}
-
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-copy-clipboard {
     margin-left: 8px !important;
 }

From c8cbb1d4ea0e2e3d6b0c02ed7f56a28c2a5e91b1 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sun, 26 Jan 2025 15:57:39 +0100
Subject: [PATCH 14/16] Update to 2.x

---
 composer.json                      | 2 +-
 src/JavascriptRenderer.php         | 1 -
 src/Resources/laravel-debugbar.css | 4 ----
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/composer.json b/composer.json
index f916caced..684f8fcb2 100644
--- a/composer.json
+++ b/composer.json
@@ -18,7 +18,7 @@
     ],
     "require": {
         "php": "^8.0",
-        "maximebf/debugbar": "~1.23.0|~1.24.0",
+        "php-debugbar/php-debugbar": "2.0.x",
         "illuminate/routing": "^9|^10|^11",
         "illuminate/session": "^9|^10|^11",
         "illuminate/support": "^9|^10|^11",
diff --git a/src/JavascriptRenderer.php b/src/JavascriptRenderer.php
index d02032e4b..bfd2544b7 100644
--- a/src/JavascriptRenderer.php
+++ b/src/JavascriptRenderer.php
@@ -43,7 +43,6 @@ public function renderHead()
     {
         $cssRoute = preg_replace('/\Ahttps?:\/\/[^\/]+/', '', route('debugbar.assets.css', [
             'v' => $this->getModifiedTime('css'),
-            'theme' => config('debugbar.theme', 'auto'),
         ]));
 
         $jsRoute = preg_replace('/\Ahttps?:\/\/[^\/]+/', '', route('debugbar.assets.js', [
diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index 32b646cbf..6ed185926 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -673,10 +673,6 @@ dl.phpdebugbar-widgets-kvlist > :nth-child(4n) {
     clear: none!important;
 }
 
-div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-message {
-    color: #dd1044;
-}
-
 div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item > div {
     display: none;
 }

From a463e194b68dbdd2f784d6e34e749ac6d88fb591 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sun, 26 Jan 2025 16:16:13 +0100
Subject: [PATCH 15/16] Tweak link colors

---
 src/Resources/laravel-debugbar.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index 6ed185926..281c909e7 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -22,8 +22,8 @@ div.phpdebugbar-openhandler {
     --debugbar-badge-active: var(--debugbar-red-vivid);
     --debugbar-badge-active-text: #fff;
 
-    /*--debugbar-link: #888;*/
-    /*--debugbar-hover: #aaa;*/
+    --debugbar-link: #777;
+    --debugbar-hover: #666;
 
     --debugbar-header-hover: #ebebeb;
 }
@@ -64,8 +64,8 @@ div.phpdebugbar-openhandler[data-theme='dark'] {
     --debugbar-badge-active: var(--debugbar-red-vivid);
     --debugbar-badge-active-text: var(--debugbar-white);
 
-    --debugbar-link: var(--debugbar-gray-500);
-    --debugbar-hover: var(--debugbar-gray-400);
+    --debugbar-link: var(--debugbar-gray-300);
+    --debugbar-hover: var(--debugbar-gray-100);
     --debugbar-hover-bg: var(--debugbar-gray-700);
 }
 

From 94adc431707a5309140b3ce56d9f2d6e52c12800 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barry@fruitcake.nl>
Date: Sun, 26 Jan 2025 18:51:04 +0100
Subject: [PATCH 16/16] Tweak border

---
 src/Resources/laravel-debugbar.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Resources/laravel-debugbar.css b/src/Resources/laravel-debugbar.css
index 281c909e7..03e2a9fe6 100644
--- a/src/Resources/laravel-debugbar.css
+++ b/src/Resources/laravel-debugbar.css
@@ -647,7 +647,7 @@ div.phpdebugbar-header-right > *:first-child {
     border-right: 0;
 }
 
-div.phpdebugbar-header-right a.phpdebugbar-tab.phpdebugbar-tab-history  {
+div.phpdebugbar-header-right a.phpdebugbar-tab.phpdebugbar-tab-settings {
     border-left: 0;
 }