diff --git a/build/build-assets.php b/build/build-assets.php
index 6086c68f..ad043db6 100644
--- a/build/build-assets.php
+++ b/build/build-assets.php
@@ -6,10 +6,19 @@
 
 use DebugBar\StandardDebugBar;
 use DebugBar\DataCollector\DataCollector;
+use DebugBar\DataFormatter\HtmlDataFormatter;
 use DebugBar\DataFormatter\JsonDataFormatter;
+use DebugBar\DataFormatter\VarDumper\DebugBarHtmlDumper;
 
 DataCollector::setDefaultDataFormatter(new JsonDataFormatter());
 
+// Generate vardumper.css from Sfdump CSS + dark theme
+$dumper = new DebugBarHtmlDumper();
+$dumper->setStyles(HtmlDataFormatter::getDefaultStyles());
+$css = $dumper->getDumpCss();
+file_put_contents(__DIR__ . '/../resources/vardumper.css', $css);
+
+// Generate dist bundles
 $debugbar = new \DebugBar\DebugBar();
 $debugbarRenderer = $debugbar->getJavascriptRenderer();
 
diff --git a/resources/dist/debugbar.min.css b/resources/dist/debugbar.min.css
index e5dbbed4..87599f83 100644
--- a/resources/dist/debugbar.min.css
+++ b/resources/dist/debugbar.min.css
@@ -16,4 +16,4 @@
 
   Outdated base version: https://github.com/primer/github-syntax-dark
   Current colors taken from GitHub's CSS
-*/[data-theme=dark] .phpdebugbar-hljs-doctag,[data-theme=dark] .phpdebugbar-hljs-keyword,[data-theme=dark] .phpdebugbar-hljs-meta [data-theme=dark] .phpdebugbar-hljs-keyword,[data-theme=dark] .phpdebugbar-hljs-template-tag,[data-theme=dark] .phpdebugbar-hljs-template-variable,[data-theme=dark] .phpdebugbar-hljs-type,[data-theme=dark] .phpdebugbar-hljs-variable.language_{color:#ff7b72}[data-theme=dark] .phpdebugbar-hljs-title,[data-theme=dark] .phpdebugbar-hljs-title.class_,[data-theme=dark] .phpdebugbar-hljs-title.class_.inherited__,[data-theme=dark] .phpdebugbar-hljs-title.function_{color:#d2a8ff}[data-theme=dark] .phpdebugbar-hljs-attr,[data-theme=dark] .phpdebugbar-hljs-attribute,[data-theme=dark] .phpdebugbar-hljs-literal,[data-theme=dark] .phpdebugbar-hljs-meta,[data-theme=dark] .phpdebugbar-hljs-number,[data-theme=dark] .phpdebugbar-hljs-operator,[data-theme=dark] .phpdebugbar-hljs-variable,[data-theme=dark] .phpdebugbar-hljs-selector-attr,[data-theme=dark] .phpdebugbar-hljs-selector-class,[data-theme=dark] .phpdebugbar-hljs-selector-id{color:#79c0ff}[data-theme=dark] .phpdebugbar-hljs-regexp,[data-theme=dark] .phpdebugbar-hljs-string,[data-theme=dark] .phpdebugbar-hljs-meta [data-theme=dark] .phpdebugbar-hljs-string{color:#a5d6ff}[data-theme=dark] .phpdebugbar-hljs-built_in,[data-theme=dark] .phpdebugbar-hljs-symbol{color:#ffa657}[data-theme=dark] .phpdebugbar-hljs-comment,[data-theme=dark] .phpdebugbar-hljs-code,[data-theme=dark] .phpdebugbar-hljs-formula{color:#8b949e}[data-theme=dark] .phpdebugbar-hljs-name,[data-theme=dark] .phpdebugbar-hljs-quote,[data-theme=dark] .phpdebugbar-hljs-selector-tag,[data-theme=dark] .phpdebugbar-hljs-selector-pseudo{color:#7ee787}[data-theme=dark] .phpdebugbar-hljs-subst{color:#c9d1d9}[data-theme=dark] .phpdebugbar-hljs-section{color:#1f6feb;font-weight:700}[data-theme=dark] .phpdebugbar-hljs-bullet{color:#f2cc60}[data-theme=dark] .phpdebugbar-hljs-emphasis{color:#c9d1d9;font-style:italic}[data-theme=dark] .phpdebugbar-hljs-strong{color:#c9d1d9;font-weight:700}[data-theme=dark] .phpdebugbar-hljs-addition{color:#aff5b4;background-color:#033a16}[data-theme=dark] .phpdebugbar-hljs-deletion{color:#ffdcd7;background-color:#67060c}
+*/[data-theme=dark] .phpdebugbar-hljs-doctag,[data-theme=dark] .phpdebugbar-hljs-keyword,[data-theme=dark] .phpdebugbar-hljs-meta [data-theme=dark] .phpdebugbar-hljs-keyword,[data-theme=dark] .phpdebugbar-hljs-template-tag,[data-theme=dark] .phpdebugbar-hljs-template-variable,[data-theme=dark] .phpdebugbar-hljs-type,[data-theme=dark] .phpdebugbar-hljs-variable.language_{color:#ff7b72}[data-theme=dark] .phpdebugbar-hljs-title,[data-theme=dark] .phpdebugbar-hljs-title.class_,[data-theme=dark] .phpdebugbar-hljs-title.class_.inherited__,[data-theme=dark] .phpdebugbar-hljs-title.function_{color:#d2a8ff}[data-theme=dark] .phpdebugbar-hljs-attr,[data-theme=dark] .phpdebugbar-hljs-attribute,[data-theme=dark] .phpdebugbar-hljs-literal,[data-theme=dark] .phpdebugbar-hljs-meta,[data-theme=dark] .phpdebugbar-hljs-number,[data-theme=dark] .phpdebugbar-hljs-operator,[data-theme=dark] .phpdebugbar-hljs-variable,[data-theme=dark] .phpdebugbar-hljs-selector-attr,[data-theme=dark] .phpdebugbar-hljs-selector-class,[data-theme=dark] .phpdebugbar-hljs-selector-id{color:#79c0ff}[data-theme=dark] .phpdebugbar-hljs-regexp,[data-theme=dark] .phpdebugbar-hljs-string,[data-theme=dark] .phpdebugbar-hljs-meta [data-theme=dark] .phpdebugbar-hljs-string{color:#a5d6ff}[data-theme=dark] .phpdebugbar-hljs-built_in,[data-theme=dark] .phpdebugbar-hljs-symbol{color:#ffa657}[data-theme=dark] .phpdebugbar-hljs-comment,[data-theme=dark] .phpdebugbar-hljs-code,[data-theme=dark] .phpdebugbar-hljs-formula{color:#8b949e}[data-theme=dark] .phpdebugbar-hljs-name,[data-theme=dark] .phpdebugbar-hljs-quote,[data-theme=dark] .phpdebugbar-hljs-selector-tag,[data-theme=dark] .phpdebugbar-hljs-selector-pseudo{color:#7ee787}[data-theme=dark] .phpdebugbar-hljs-subst{color:#c9d1d9}[data-theme=dark] .phpdebugbar-hljs-section{color:#1f6feb;font-weight:700}[data-theme=dark] .phpdebugbar-hljs-bullet{color:#f2cc60}[data-theme=dark] .phpdebugbar-hljs-emphasis{color:#c9d1d9;font-style:italic}[data-theme=dark] .phpdebugbar-hljs-strong{color:#c9d1d9;font-weight:700}[data-theme=dark] .phpdebugbar-hljs-addition{color:#aff5b4;background-color:#033a16}[data-theme=dark] .phpdebugbar-hljs-deletion{color:#ffdcd7;background-color:#67060c}.sf-js-enabled .phpdebugbar pre.sf-dump .sf-dump-compact,.sf-js-enabled .sf-dump-str-collapse .sf-dump-str-collapse,.sf-js-enabled .sf-dump-str-expand .sf-dump-str-expand{display:none}.sf-dump-hover:hover{background-color:#b729d9;color:#fff!important;border-radius:2px}.phpdebugbar pre.sf-dump{display:block;white-space:pre;padding:5px;overflow:initial!important}.phpdebugbar pre.sf-dump:after{content:"";visibility:hidden;display:block;height:0;clear:both}.phpdebugbar pre.sf-dump .sf-dump-ellipsization{display:inline-flex}.phpdebugbar pre.sf-dump a{text-decoration:none;cursor:pointer;border:0;outline:none;color:inherit}.phpdebugbar pre.sf-dump img{max-width:50em;max-height:50em;margin:.5em 0 0;padding:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAHUlEQVQY02O8zAABilCaiQEN0EeA8QuUcX9g3QEAAjcC5piyhyEAAAAASUVORK5CYII=) #d3d3d3}.phpdebugbar pre.sf-dump .sf-dump-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.phpdebugbar pre.sf-dump .sf-dump-ellipsis-tail{flex-shrink:0}.phpdebugbar pre.sf-dump code{display:inline;padding:0;background:none}.sf-dump-public.sf-dump-highlight,.sf-dump-protected.sf-dump-highlight,.sf-dump-private.sf-dump-highlight,.sf-dump-str.sf-dump-highlight,.sf-dump-key.sf-dump-highlight{background:#6faccc4d;border:1px solid #7DA0B1;border-radius:3px}.sf-dump-public.sf-dump-highlight-active,.sf-dump-protected.sf-dump-highlight-active,.sf-dump-private.sf-dump-highlight-active,.sf-dump-str.sf-dump-highlight-active,.sf-dump-key.sf-dump-highlight-active{background:#fdaf0066;border:1px solid #ffa500;border-radius:3px}.phpdebugbar pre.sf-dump .sf-dump-search-hidden{display:none!important}.phpdebugbar pre.sf-dump .sf-dump-search-wrapper{font-size:0;white-space:nowrap;margin-bottom:5px;display:flex;position:-webkit-sticky;position:sticky;top:5px}.phpdebugbar pre.sf-dump .sf-dump-search-wrapper>*{vertical-align:top;box-sizing:border-box;height:21px;font-weight:400;border-radius:0;background:#fff;color:#757575;border:1px solid #BBB}.phpdebugbar pre.sf-dump .sf-dump-search-wrapper>input.sf-dump-search-input{padding:3px;height:21px;font-size:12px;border-right:none;border-top-left-radius:3px;border-bottom-left-radius:3px;color:#000;min-width:15px;width:100%}.phpdebugbar pre.sf-dump .sf-dump-search-wrapper>.sf-dump-search-input-next,.phpdebugbar pre.sf-dump .sf-dump-search-wrapper>.sf-dump-search-input-previous{background:#f2f2f2;outline:none;border-left:none;font-size:0;line-height:0}.phpdebugbar pre.sf-dump .sf-dump-search-wrapper>.sf-dump-search-input-next{border-top-right-radius:3px;border-bottom-right-radius:3px}.phpdebugbar pre.sf-dump .sf-dump-search-wrapper>.sf-dump-search-input-next>svg,.phpdebugbar pre.sf-dump .sf-dump-search-wrapper>.sf-dump-search-input-previous>svg{pointer-events:none;width:12px;height:12px}.phpdebugbar pre.sf-dump .sf-dump-search-wrapper>.sf-dump-search-count{display:inline-block;padding:0 5px;margin:0;border-left:none;line-height:21px;font-size:12px}.phpdebugbar pre.sf-dump,.phpdebugbar pre.sf-dump .sf-dump-default{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.phpdebugbar pre.sf-dump .sf-dump-num{font-weight:700;color:#1299da}.phpdebugbar pre.sf-dump .sf-dump-const{font-weight:700}.phpdebugbar pre.sf-dump .sf-dump-str{font-weight:700;color:#3a9b26}.phpdebugbar pre.sf-dump .sf-dump-note{color:#1299da}.phpdebugbar pre.sf-dump .sf-dump-ref{color:#7b7b7b}.phpdebugbar pre.sf-dump .sf-dump-public,.phpdebugbar pre.sf-dump .sf-dump-protected,.phpdebugbar pre.sf-dump .sf-dump-private{color:#000}.phpdebugbar pre.sf-dump .sf-dump-meta{color:#b729d9}.phpdebugbar pre.sf-dump .sf-dump-key{color:#3a9b26}.phpdebugbar pre.sf-dump .sf-dump-index{color:#1299da}.phpdebugbar pre.sf-dump .sf-dump-ellipsis{color:#a0a000}.phpdebugbar pre.sf-dump .sf-dump-virtual{font-style:italic}.phpdebugbar pre.sf-dump .sf-dump-ns{user-select:none}.phpdebugbar pre.sf-dump .sf-dump-ellipsis-note{color:#1299da}.phpdebugbar[data-theme=dark] pre.sf-dump,pre.sf-dump .sf-dump-default{background-color:#18171b;color:#ff8400;line-height:1.2em;font:12px Menlo,Monaco,Consolas,monospace;word-wrap:break-word;white-space:pre-wrap;position:relative;z-index:99999;word-break:break-all}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-num{font-weight:700;color:#1299da}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-const{font-weight:700}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-virtual{font-style:italic}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-str{font-weight:700;color:#56db3a}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-note{color:#1299da}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-ref{color:#a0a0a0}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-public,.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-protected,.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-private{color:#fff}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-meta{color:#b729d9}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-key{color:#56db3a}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-index{color:#1299da}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-ellipsis{color:#ff8400}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-ns{user-select:none}.phpdebugbar[data-theme=dark] pre.sf-dump .sf-dump-ellipsis-note{color:#1299da}
diff --git a/resources/vardumper.css b/resources/vardumper.css
new file mode 100644
index 00000000..07e3c059
--- /dev/null
+++ b/resources/vardumper.css
@@ -0,0 +1 @@
+ .sf-js-enabled .phpdebugbar pre.sf-dump .sf-dump-compact, .sf-js-enabled .sf-dump-str-collapse .sf-dump-str-collapse, .sf-js-enabled .sf-dump-str-expand .sf-dump-str-expand { display: none; } .sf-dump-hover:hover { background-color: #B729D9; color: #FFF !important; border-radius: 2px; } .phpdebugbar pre.sf-dump { display: block; white-space: pre; padding: 5px; overflow: initial !important; } .phpdebugbar pre.sf-dump:after { content: ""; visibility: hidden; display: block; height: 0; clear: both; } .phpdebugbar pre.sf-dump .sf-dump-ellipsization { display: inline-flex; } .phpdebugbar pre.sf-dump a { text-decoration: none; cursor: pointer; border: 0; outline: none; color: inherit; } .phpdebugbar pre.sf-dump img { max-width: 50em; max-height: 50em; margin: .5em 0 0 0; padding: 0; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAHUlEQVQY02O8zAABilCaiQEN0EeA8QuUcX9g3QEAAjcC5piyhyEAAAAASUVORK5CYII=) #D3D3D3; } .phpdebugbar pre.sf-dump .sf-dump-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .phpdebugbar pre.sf-dump .sf-dump-ellipsis-tail { flex-shrink: 0; } .phpdebugbar pre.sf-dump code { display:inline; padding:0; background:none; } .sf-dump-public.sf-dump-highlight, .sf-dump-protected.sf-dump-highlight, .sf-dump-private.sf-dump-highlight, .sf-dump-str.sf-dump-highlight, .sf-dump-key.sf-dump-highlight { background: rgba(111, 172, 204, 0.3); border: 1px solid #7DA0B1; border-radius: 3px; } .sf-dump-public.sf-dump-highlight-active, .sf-dump-protected.sf-dump-highlight-active, .sf-dump-private.sf-dump-highlight-active, .sf-dump-str.sf-dump-highlight-active, .sf-dump-key.sf-dump-highlight-active { background: rgba(253, 175, 0, 0.4); border: 1px solid #ffa500; border-radius: 3px; } .phpdebugbar pre.sf-dump .sf-dump-search-hidden { display: none !important; } .phpdebugbar pre.sf-dump .sf-dump-search-wrapper { font-size: 0; white-space: nowrap; margin-bottom: 5px; display: flex; position: -webkit-sticky; position: sticky; top: 5px; } .phpdebugbar pre.sf-dump .sf-dump-search-wrapper > * { vertical-align: top; box-sizing: border-box; height: 21px; font-weight: normal; border-radius: 0; background: #FFF; color: #757575; border: 1px solid #BBB; } .phpdebugbar pre.sf-dump .sf-dump-search-wrapper > input.sf-dump-search-input { padding: 3px; height: 21px; font-size: 12px; border-right: none; border-top-left-radius: 3px; border-bottom-left-radius: 3px; color: #000; min-width: 15px; width: 100%; } .phpdebugbar pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next, .phpdebugbar pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-previous { background: #F2F2F2; outline: none; border-left: none; font-size: 0; line-height: 0; } .phpdebugbar pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .phpdebugbar pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next > svg, .phpdebugbar pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-previous > svg { pointer-events: none; width: 12px; height: 12px; } .phpdebugbar pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-count { display: inline-block; padding: 0 5px; margin: 0; border-left: none; line-height: 21px; font-size: 12px; }.phpdebugbar pre.sf-dump, .phpdebugbar pre.sf-dump .sf-dump-default{word-wrap: break-word; white-space: pre-wrap; word-break: normal}.phpdebugbar pre.sf-dump .sf-dump-num{font-weight:bold; color:#1299DA}.phpdebugbar pre.sf-dump .sf-dump-const{font-weight:bold}.phpdebugbar pre.sf-dump .sf-dump-str{font-weight:bold; color:#3A9B26}.phpdebugbar pre.sf-dump .sf-dump-note{color:#1299DA}.phpdebugbar pre.sf-dump .sf-dump-ref{color:#7B7B7B}.phpdebugbar pre.sf-dump .sf-dump-public{color:#000000}.phpdebugbar pre.sf-dump .sf-dump-protected{color:#000000}.phpdebugbar pre.sf-dump .sf-dump-private{color:#000000}.phpdebugbar pre.sf-dump .sf-dump-meta{color:#B729D9}.phpdebugbar pre.sf-dump .sf-dump-key{color:#3A9B26}.phpdebugbar pre.sf-dump .sf-dump-index{color:#1299DA}.phpdebugbar pre.sf-dump .sf-dump-ellipsis{color:#A0A000}.phpdebugbar pre.sf-dump .sf-dump-virtual{font-style:italic}.phpdebugbar pre.sf-dump .sf-dump-ns{user-select:none;}.phpdebugbar pre.sf-dump .sf-dump-ellipsis-note{color:#1299DA}.phpdebugbar[data-theme='dark'] pre.sf-dump, pre.sf-dump .sf-dump-default{background-color:#18171B; color:#FF8400; line-height:1.2em; font:12px Menlo, Monaco, Consolas, monospace; word-wrap: break-word; white-space: pre-wrap; position:relative; z-index:99999; word-break: break-all}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-num{font-weight:bold; color:#1299DA}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-const{font-weight:bold}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-virtual{font-style:italic}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-str{font-weight:bold; color:#56DB3A}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-note{color:#1299DA}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-ref{color:#A0A0A0}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-public{color:#FFFFFF}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-protected{color:#FFFFFF}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-private{color:#FFFFFF}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-meta{color:#B729D9}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-key{color:#56DB3A}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-index{color:#1299DA}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-ellipsis{color:#FF8400}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-ns{user-select:none;}.phpdebugbar[data-theme='dark'] pre.sf-dump .sf-dump-ellipsis-note{color:#1299DA}
\ No newline at end of file
diff --git a/src/DataFormatter/HtmlDataFormatter.php b/src/DataFormatter/HtmlDataFormatter.php
index 98ac78ee..16207a04 100644
--- a/src/DataFormatter/HtmlDataFormatter.php
+++ b/src/DataFormatter/HtmlDataFormatter.php
@@ -142,14 +142,20 @@ protected function getDisplayOptions(): array
      * Returns assets required for rendering variables.
      *
      */
+    public static function getDefaultStyles(): array
+    {
+        return static::$defaultDumperOptions['styles'];
+    }
+
     public function getAssets(): array
     {
         $dumper = $this->getDumper();
         if ($dumper instanceof DebugBarHtmlDumper) {
-            $dumper->resetDumpHeader(); // this will cause the default dump header to regenerate
+            $dumper->resetDumpHeader();
             return [
-                'inline_head' => [
-                    'html_var_dumper' => $dumper->getDumpHeaderByDebugBar(),
+                'css' => 'vardumper.css',
+                'inline_js' => [
+                    'html_var_dumper' => $dumper->getDumpJs(),
                 ],
             ];
         }
diff --git a/src/DataFormatter/JsonDataFormatter.php b/src/DataFormatter/JsonDataFormatter.php
index e97cfd31..18b2ef74 100644
--- a/src/DataFormatter/JsonDataFormatter.php
+++ b/src/DataFormatter/JsonDataFormatter.php
@@ -110,10 +110,9 @@ public function resetDumperOptions(?array $options = null): void
 
     public function getAssets(): array
     {
-        $htmlFormatter = new HtmlDataFormatter();
-        $assets = $htmlFormatter->getAssets();
-        $assets['js'] = 'vardumper.js';
-
-        return $assets;
+        return [
+            'css' => 'vardumper.css',
+            'js' => 'vardumper.js',
+        ];
     }
 }
diff --git a/src/DataFormatter/VarDumper/DebugBarHtmlDumper.php b/src/DataFormatter/VarDumper/DebugBarHtmlDumper.php
index 00d5ee03..115cee7e 100644
--- a/src/DataFormatter/VarDumper/DebugBarHtmlDumper.php
+++ b/src/DataFormatter/VarDumper/DebugBarHtmlDumper.php
@@ -20,6 +20,24 @@ public function resetDumpHeader(): void
         $this->dumpHeader = null;
     }
 
+    public function getDumpCss(): string
+    {
+        $header = $this->getDumpHeaderByDebugBar();
+        if (preg_match('/<style[^>]*>(.*)<\/style>/s', $header, $m)) {
+            return $m[1];
+        }
+        return '';
+    }
+
+    public function getDumpJs(): string
+    {
+        $header = $this->getDumpHeaderByDebugBar();
+        if (preg_match('/<script[^>]*>(.*)<\/script>/s', $header, $m)) {
+            return $m[1];
+        }
+        return '';
+    }
+
     public function getDumpHeaderByDebugBar(): string
     {
         $header = str_replace('pre.sf-dump', '.phpdebugbar pre.sf-dump', $this->getDumpHeader());
diff --git a/src/JavascriptRenderer.php b/src/JavascriptRenderer.php
index 3f1b5e1e..46fbeede 100644
--- a/src/JavascriptRenderer.php
+++ b/src/JavascriptRenderer.php
@@ -90,6 +90,7 @@ class JavascriptRenderer
         'widgets/templates/widget.js',
         'widgets/http/widget.js',
         'highlight.css',
+        'vardumper.css',
     ];
 
     /** @var list<array{
diff --git a/tests/Tests/DataFormatter/HtmlDataFormatterTest.php b/tests/Tests/DataFormatter/HtmlDataFormatterTest.php
index 20ff54c8..710cb094 100644
--- a/tests/Tests/DataFormatter/HtmlDataFormatterTest.php
+++ b/tests/Tests/DataFormatter/HtmlDataFormatterTest.php
@@ -30,17 +30,17 @@ public function testBasicFunctionality(): void
     public function testAssetProvider(): void
     {
         $d = new HtmlDataFormatter();
-        $d->mergeDumperOptions(['styles' => $this->testStyles]);
         $assets = $d->getAssets();
-        $this->assertArrayHasKey('inline_head', $assets);
-        $this->assertCount(1, $assets);
-
-        $inlineHead = $assets['inline_head'];
-        $this->assertArrayHasKey('html_var_dumper', $inlineHead);
-        $this->assertCount(1, $inlineHead);
-
-        $assetText = $inlineHead['html_var_dumper'];
-        $this->assertStringContainsString(self::STYLE_STRING, $assetText);
+        $this->assertArrayHasKey('css', $assets);
+        $this->assertEquals('vardumper.css', $assets['css']);
+        $this->assertArrayHasKey('inline_js', $assets);
+        $this->assertArrayHasKey('html_var_dumper', $assets['inline_js']);
+        $this->assertArrayNotHasKey('inline_head', $assets);
+
+        // inline_js should contain Sfdump JS (not CSS)
+        $js = $assets['inline_js']['html_var_dumper'];
+        $this->assertStringNotContainsString('<style', $js);
+        $this->assertStringNotContainsString('</style>', $js);
     }
 
     public function testBasicOptionOperations(): void
@@ -189,13 +189,17 @@ public function testDumperOptions(): void
         // Test the actual operation of the dumper options
         $d = new HtmlDataFormatter();
 
-        // Test that the 'styles' option affects assets
+        // Assets should return inline_js (not inline_head) with Sfdump JS
         $d->resetDumperOptions();
         $assets = $d->getAssets();
-        $this->assertStringNotContainsString(self::STYLE_STRING, $assets['inline_head']['html_var_dumper']);
+        $this->assertArrayHasKey('inline_js', $assets);
+        $this->assertArrayHasKey('html_var_dumper', $assets['inline_js']);
+        $this->assertNotEmpty($assets['inline_js']['html_var_dumper']);
 
+        // Custom styles should still work — they affect the dumper used for per-dump rendering
         $d->resetDumperOptions(['styles' => $this->testStyles]);
         $assets = $d->getAssets();
-        $this->assertStringContainsString(self::STYLE_STRING, $assets['inline_head']['html_var_dumper']);
+        $this->assertArrayHasKey('inline_js', $assets);
+        $this->assertArrayHasKey('html_var_dumper', $assets['inline_js']);
     }
 }
diff --git a/tests/Tests/DataFormatter/JsonDataFormatterTest.php b/tests/Tests/DataFormatter/JsonDataFormatterTest.php
index 4759d9ef..9aaa00df 100644
--- a/tests/Tests/DataFormatter/JsonDataFormatterTest.php
+++ b/tests/Tests/DataFormatter/JsonDataFormatterTest.php
@@ -128,10 +128,11 @@ public function testAssetProvider(): void
         $d = new JsonDataFormatter();
         $assets = $d->getAssets();
 
-        $this->assertArrayHasKey('inline_head', $assets);
-        $this->assertArrayHasKey('html_var_dumper', $assets['inline_head']);
+        $this->assertArrayHasKey('css', $assets);
+        $this->assertEquals('vardumper.css', $assets['css']);
         $this->assertArrayHasKey('js', $assets);
         $this->assertEquals('vardumper.js', $assets['js']);
+        $this->assertArrayNotHasKey('inline_head', $assets);
     }
 
     public function testDumperOptions(): void
diff --git a/tests/benchmark-formatter.php b/tests/benchmark-formatter.php
index 47eab826..0de9697d 100644
--- a/tests/benchmark-formatter.php
+++ b/tests/benchmark-formatter.php
@@ -313,7 +313,7 @@ function formatBytes(int $bytes): string
 printf("Difference:         %+.0f%%\n", $payloadDiff);
 echo "\n";
 
-// ── 4. Symfony asset overhead ────────────────────────────────────────
+// ── 4. Asset overhead ────────────────────────────────────────────────
 
 echo "4. ASSET OVERHEAD\n";
 echo "$separator\n";
@@ -321,23 +321,23 @@ function formatBytes(int $bytes): string
 $htmlAssets = $htmlFormatter->getAssets();
 $jsonAssets = $jsonFormatter->getAssets();
 
-// Both formatters now use inline_head for Sfdump JS+CSS
-if (isset($htmlAssets['inline_head']['html_var_dumper'])) {
-    $htmlInlineSize = strlen($htmlAssets['inline_head']['html_var_dumper']);
-    printf("HTML inline_head (Sfdump JS+CSS): %s\n", formatBytes($htmlInlineSize));
-}
+// Shared vardumper.css (static, cached by the browser)
+$cssFile = __DIR__ . '/../resources/' . ($htmlAssets['css'] ?? 'vardumper.css');
+$cssSize = file_exists($cssFile) ? filesize($cssFile) : 0;
+printf("vardumper.css (shared):           %s\n", formatBytes($cssSize));
+echo "  → Static file, cached by the browser\n";
 
-if (isset($jsonAssets['inline_head']['html_var_dumper'])) {
-    $jsonInlineSize = strlen($jsonAssets['inline_head']['html_var_dumper']);
-    printf("JSON inline_head (Sfdump JS+CSS): %s\n", formatBytes($jsonInlineSize));
-    echo "  → Same Sfdump bundle, deduplicated by shared 'html_var_dumper' key\n";
+// HTML inline_js (Sfdump JS only)
+if (isset($htmlAssets['inline_js']['html_var_dumper'])) {
+    $htmlInlineJsSize = strlen($htmlAssets['inline_js']['html_var_dumper']);
+    printf("HTML inline_js (Sfdump JS):       %s\n", formatBytes($htmlInlineJsSize));
 }
 
 // JSON widget.js (client-side renderer)
 $jsonBasePath = $jsonAssets['base_path'] ?? '';
 $jsFile = $jsonBasePath . '/' . ($jsonAssets['js'] ?? '');
 $jsSize = file_exists($jsFile) ? filesize($jsFile) : 0;
-printf("JSON widget.js:                   %s\n", formatBytes($jsSize));
+printf("JSON vardumper.js:                %s\n", formatBytes($jsSize));
 echo "  → Static file, cached by the browser\n";
 
 echo "\n$separator\n";