From 3ca8490ce2d7a929790d1fa0103130227594eec9 Mon Sep 17 00:00:00 2001
From: Frans Skarman <frans.skarman@protonmail.com>
Date: Sun, 4 Dec 2022 00:42:30 +0000
Subject: [PATCH] Add uicolor option (#271)

---
 CHANGELOG.md                                  |   4 +
 Cargo.toml                                    |   2 +-
 src/bin/flamegraph.rs                         |  17 ++-
 src/flamegraph/color/mod.rs                   |  44 ++----
 src/flamegraph/mod.rs                         |   7 +
 src/flamegraph/svg.rs                         |  17 ++-
 tests/data/flamegraph/austin/flame.svg        |  12 +-
 .../flamegraph/colors/async-profiler-java.svg |  12 +-
 .../data/flamegraph/colors/deterministic.svg  |  12 +-
 tests/data/flamegraph/colors/java.svg         |  12 +-
 tests/data/flamegraph/colors/js.svg           |  12 +-
 .../flamegraph/differential/diff-negated.svg  |  12 +-
 tests/data/flamegraph/differential/diff.svg   |  12 +-
 .../example-perf-stacks.svg                   |  12 +-
 tests/data/flamegraph/factor/factor-2.5.svg   |  12 +-
 tests/data/flamegraph/flamechart/flame.svg    |  12 +-
 .../fractional-reversed.svg                   |  12 +-
 .../flamegraph/grey-frames/grey-frames.svg    |  12 +-
 tests/data/flamegraph/inverted/inverted.svg   |  12 +-
 tests/data/flamegraph/nameattr/nameattr.svg   |  12 +-
 .../nameattr_duplicate_attributes.svg         |  12 +-
 .../narrow-blocks/narrow-blocks.svg           |  12 +-
 .../flamegraph/options/colordiffusion.svg     |  12 +-
 .../flamegraph/options/count_name_simple.svg  |  12 +-
 .../options/count_name_with_symbols.svg       |  12 +-
 tests/data/flamegraph/options/default.svg     |  12 +-
 .../flamegraph/options/font_type_cursive.svg  |  12 +-
 .../flamegraph/options/font_type_fantasy.svg  |  12 +-
 .../options/font_type_monospace.svg           |  12 +-
 .../options/font_type_sans-serif.svg          |  12 +-
 .../flamegraph/options/font_type_serif.svg    |  12 +-
 .../flamegraph/options/font_type_simple.svg   |  12 +-
 .../options/font_type_with_quote.svg          |  12 +-
 .../flamegraph/options/name_type_simple.svg   |  12 +-
 .../options/name_type_with_backslash.svg      |  12 +-
 .../options/name_type_with_quote.svg          |  12 +-
 .../data/flamegraph/options/notes_simple.svg  |  12 +-
 .../flamegraph/options/notes_with_symbols.svg |  12 +-
 .../data/flamegraph/options/search_color.svg  |  12 +-
 .../data/flamegraph/options/stroke_color.svg  |  12 +-
 .../flamegraph/options/subtitle_simple.svg    |  12 +-
 .../options/subtitle_with_symbols.svg         |  12 +-
 .../data/flamegraph/options/title_simple.svg  |  12 +-
 .../flamegraph/options/title_with_symbols.svg |  12 +-
 .../flamegraph/options/truncate-right.svg     |  12 +-
 .../data/flamegraph/options/uicolor_color.svg | 142 ++++++++++++++++++
 .../palette-map/consistent-palette.svg        |  12 +-
 ...tacks-01-collapsed-all-reversed-stacks.svg |  12 +-
 .../perf-vertx-stacks-01-collapsed-all.svg    |  12 +-
 tests/flamegraph.rs                           |  12 ++
 50 files changed, 460 insertions(+), 289 deletions(-)
 create mode 100644 tests/data/flamegraph/options/uicolor_color.svg

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f9cbf569..7210d391 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,10 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 ### Added
 
+- Add flag `--uicolor` to specify the color to draw UI element text, like the Reset view button. [#271](https://github.com/jonhoo/inferno/pull/271)
+
 ### Changed
 - Updated `ahash` to version 0.8
 - Updated `quick-xml` to version 0.26
 
+- Bumped `clap` to 3.2.0
+
 ### Removed
 
 ## [0.11.12] - 2022-10-24
diff --git a/Cargo.toml b/Cargo.toml
index d0747d38..73eeaf03 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -36,7 +36,7 @@ num-format = { version = "0.4.3", default-features = false }
 quick-xml = { version = "0.26", default-features = false }
 rgb = "0.8.13"
 str_stack = "0.1"
-clap = { version = "3.0.1", optional = true, features = ["derive"] }
+clap = { version = "3.2.1", optional = true, features = ["derive"] }
 once_cell = "1.12.0"
 
 [dev-dependencies]
diff --git a/src/bin/flamegraph.rs b/src/bin/flamegraph.rs
index de39e90d..1ab5ca13 100644
--- a/src/bin/flamegraph.rs
+++ b/src/bin/flamegraph.rs
@@ -2,7 +2,9 @@ use std::io;
 use std::path::{Path, PathBuf};
 
 use env_logger::Env;
-use inferno::flamegraph::color::{BackgroundColor, PaletteMap, SearchColor, StrokeColor};
+use inferno::flamegraph::color::{
+    parse_hex_color, BackgroundColor, Color, PaletteMap, SearchColor, StrokeColor,
+};
 use inferno::flamegraph::{self, defaults, Direction, Options, Palette, TextTruncateDirection};
 
 #[cfg(feature = "nameattr")]
@@ -131,6 +133,18 @@ struct Opt {
     )]
     fontwidth: f64,
 
+    /// Color of UI text such as the search and reset zoom buttons
+    #[clap(
+        long = "uicolor",
+        default_value = defaults::UI_COLOR,
+        value_parser = |s: &str| {
+            parse_hex_color(s)
+                .ok_or_else(|| format!("Expected a color in hexadecimal format, got: {}", s))
+        },
+        value_name = "#RRGGBB"
+    )]
+    uicolor: Color,
+
     /// Height of each frame
     #[clap(
         long = "height",
@@ -264,6 +278,7 @@ impl<'a> Opt {
         options.factor = self.factor;
         options.search_color = self.search_color;
         options.stroke_color = self.stroke_color;
+        options.uicolor = self.uicolor;
         (self.infiles, options)
     }
 
diff --git a/src/flamegraph/color/mod.rs b/src/flamegraph/color/mod.rs
index 2cbaaecb..abcba7ac 100644
--- a/src/flamegraph/color/mod.rs
+++ b/src/flamegraph/color/mod.rs
@@ -141,7 +141,7 @@ impl FromStr for BackgroundColor {
             "blue" => Ok(BackgroundColor::Blue),
             "green" => Ok(BackgroundColor::Green),
             "grey" => Ok(BackgroundColor::Grey),
-            flat => parse_flat_bgcolor(flat)
+            flat => parse_hex_color(flat)
                 .map(BackgroundColor::Flat)
                 .ok_or_else(|| format!("unknown background color: {}", flat)),
         }
@@ -154,7 +154,8 @@ macro_rules! u8_from_hex_iter {
     };
 }
 
-fn parse_flat_bgcolor(s: &str) -> Option<Color> {
+/// Parses a string as a hex color, returning None if it is an invalid color
+pub fn parse_hex_color(s: &str) -> Option<Color> {
     if !s.starts_with('#') || (s.len() != 7) {
         None
     } else {
@@ -176,7 +177,7 @@ impl FromStr for SearchColor {
     type Err = String;
 
     fn from_str(s: &str) -> Result<Self, Self::Err> {
-        parse_flat_bgcolor(s)
+        parse_hex_color(s)
             .map(SearchColor)
             .ok_or_else(|| format!("unknown color: {}", s))
     }
@@ -204,7 +205,7 @@ impl FromStr for StrokeColor {
         if s == "none" {
             return Ok(StrokeColor::None);
         }
-        parse_flat_bgcolor(s)
+        parse_hex_color(s)
             .map(StrokeColor::Color)
             .ok_or_else(|| format!("unknown color: {}", s))
     }
@@ -466,36 +467,21 @@ pub(super) fn bgcolor_for<'a>(
 #[cfg(test)]
 mod tests {
     use super::namehash;
-    use super::parse_flat_bgcolor;
+    use super::parse_hex_color;
     use super::Color;
     use pretty_assertions::assert_eq;
 
     #[test]
     fn bgcolor_parse_test() {
-        assert_eq!(
-            parse_flat_bgcolor("#ffffff"),
-            Some(color!(0xff, 0xff, 0xff))
-        );
-        assert_eq!(
-            parse_flat_bgcolor("#000000"),
-            Some(color!(0x00, 0x00, 0x00))
-        );
-        assert_eq!(
-            parse_flat_bgcolor("#abcdef"),
-            Some(color!(0xab, 0xcd, 0xef))
-        );
-        assert_eq!(
-            parse_flat_bgcolor("#123456"),
-            Some(color!(0x12, 0x34, 0x56))
-        );
-        assert_eq!(
-            parse_flat_bgcolor("#789000"),
-            Some(color!(0x78, 0x90, 0x00))
-        );
-        assert_eq!(parse_flat_bgcolor("ffffff"), None);
-        assert_eq!(parse_flat_bgcolor("#fffffff"), None);
-        assert_eq!(parse_flat_bgcolor("#xfffff"), None);
-        assert_eq!(parse_flat_bgcolor("# fffff"), None);
+        assert_eq!(parse_hex_color("#ffffff"), Some(color!(0xff, 0xff, 0xff)));
+        assert_eq!(parse_hex_color("#000000"), Some(color!(0x00, 0x00, 0x00)));
+        assert_eq!(parse_hex_color("#abcdef"), Some(color!(0xab, 0xcd, 0xef)));
+        assert_eq!(parse_hex_color("#123456"), Some(color!(0x12, 0x34, 0x56)));
+        assert_eq!(parse_hex_color("#789000"), Some(color!(0x78, 0x90, 0x00)));
+        assert_eq!(parse_hex_color("ffffff"), None);
+        assert_eq!(parse_hex_color("#fffffff"), None);
+        assert_eq!(parse_hex_color("#xfffff"), None);
+        assert_eq!(parse_hex_color("# fffff"), None);
     }
 
     macro_rules! test_hash {
diff --git a/src/flamegraph/mod.rs b/src/flamegraph/mod.rs
index 991497b6..6edfe518 100644
--- a/src/flamegraph/mod.rs
+++ b/src/flamegraph/mod.rs
@@ -76,6 +76,7 @@ pub mod defaults {
     define! {
         COLORS: &str = "hot",
         SEARCH_COLOR: &str = "#e600e6",
+        UI_COLOR: &str = "#000000",
         STROKE_COLOR: &str = "none",
         TITLE: &str = "Flame Graph",
         CHART_TITLE: &str = "Flame Chart",
@@ -102,6 +103,9 @@ pub struct Options<'a> {
     /// If `None`, the background color will be selected based on the value of `colors`.
     pub bgcolors: Option<color::BackgroundColor>,
 
+    /// The color of UI text such as the search and reset view button. Defaults to black
+    pub uicolor: color::Color,
+
     /// Choose names based on the hashes of function names.
     ///
     /// This will cause similar functions to be colored similarly.
@@ -306,6 +310,7 @@ impl<'a> Default for Options<'a> {
             notes: Default::default(),
             subtitle: Default::default(),
             bgcolors: Default::default(),
+            uicolor: Default::default(),
             hash: Default::default(),
             deterministic: Default::default(),
             palette_map: Default::default(),
@@ -511,10 +516,12 @@ where
         StrokeColor::Color(c) => Some(c.to_string()),
         StrokeColor::None => None,
     };
+    let uicolor = opt.uicolor.to_string();
     let style_options = StyleOptions {
         imageheight,
         bgcolor1,
         bgcolor2,
+        uicolor,
         strokecolor,
     };
 
diff --git a/src/flamegraph/svg.rs b/src/flamegraph/svg.rs
index 4995b505..ae0ac95c 100644
--- a/src/flamegraph/svg.rs
+++ b/src/flamegraph/svg.rs
@@ -51,6 +51,7 @@ pub(super) struct StyleOptions<'a> {
     pub(super) imageheight: usize,
     pub(super) bgcolor1: Cow<'a, str>,
     pub(super) bgcolor2: Cow<'a, str>,
+    pub(super) uicolor: String,
     pub(super) strokecolor: Option<String>,
 }
 
@@ -121,7 +122,7 @@ where
     let titlesize = &opt.font_size + 5;
     svg.write_event(Event::Text(BytesText::from_escaped(&format!(
         "
-text {{ font-family:{}; font-size:{}px; fill:rgb(0,0,0); }}
+text {{ font-family:{}; font-size:{}px }}
 #title {{ text-anchor:middle; font-size:{}px; }}
 ",
         font_type, &opt.font_size, titlesize,
@@ -181,7 +182,7 @@ text {{ font-family:{}; font-size:{}px; fill:rgb(0,0,0); }}
             x: Dimension::Percent(50.0),
             y: (opt.font_size * 2) as f64,
             text: (&*opt.title).into(),
-            extra: vec![("id", "title")],
+            extra: vec![("id", "title"), ("fill", &style_options.uicolor)],
         },
     )?;
 
@@ -212,7 +213,7 @@ text {{ font-family:{}; font-size:{}px; fill:rgb(0,0,0); }}
                 opt.ypad1() - opt.font_size
             } as f64,
             text: " ".into(),
-            extra: iter::once(("id", "details")),
+            extra: vec![("id", "details"), ("fill", &style_options.uicolor)],
         },
     )?;
 
@@ -223,7 +224,11 @@ text {{ font-family:{}; font-size:{}px; fill:rgb(0,0,0); }}
             x: Dimension::Pixels(super::XPAD),
             y: (opt.font_size * 2) as f64,
             text: "Reset Zoom".into(),
-            extra: vec![("id", "unzoom"), ("class", "hide")],
+            extra: vec![
+                ("id", "unzoom"),
+                ("class", "hide"),
+                ("fill", &style_options.uicolor),
+            ],
         },
     )?;
 
@@ -234,7 +239,7 @@ text {{ font-family:{}; font-size:{}px; fill:rgb(0,0,0); }}
             x: Dimension::Pixels(image_width as usize - super::XPAD),
             y: (opt.font_size * 2) as f64,
             text: "Search".into(),
-            extra: vec![("id", "search")],
+            extra: vec![("id", "search"), ("fill", &style_options.uicolor)],
         },
     )?;
 
@@ -245,7 +250,7 @@ text {{ font-family:{}; font-size:{}px; fill:rgb(0,0,0); }}
             x: Dimension::Pixels(image_width as usize - super::XPAD),
             y: (style_options.imageheight - (opt.ypad2() / 2)) as f64,
             text: " ".into(),
-            extra: iter::once(("id", "matched")),
+            extra: vec![("id", "matched"), ("fill", &style_options.uicolor)],
         },
     )?;
 
diff --git a/tests/data/flamegraph/austin/flame.svg b/tests/data/flamegraph/austin/flame.svg
index f3979ece..52290e5e 100644
--- a/tests/data/flamegraph/austin/flame.svg
+++ b/tests/data/flamegraph/austin/flame.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="294" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="277.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="277.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="277.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="277.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="291">
         <g>
             <title>&lt;frozen importlib._bootstrap_external&gt;:&lt;module&gt;:35 (105 samples, 36.08%)</title>
diff --git a/tests/data/flamegraph/colors/async-profiler-java.svg b/tests/data/flamegraph/colors/async-profiler-java.svg
index 60b182e2..c5bbd87d 100644
--- a/tests/data/flamegraph/colors/async-profiler-java.svg
+++ b/tests/data/flamegraph/colors/async-profiler-java.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="1958" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="1941.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="1941.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="1941.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="1941.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="3279">
         <g>
             <title>com.github.plokhotnyuk.jsoniter_scala.core.JsonReaderSpec$$Lambda$8575.1705890900.apply$mcV$sp (69 samples, 2.10%)</title>
diff --git a/tests/data/flamegraph/colors/deterministic.svg b/tests/data/flamegraph/colors/deterministic.svg
index eeb2defd..133698ea 100644
--- a/tests/data/flamegraph/colors/deterministic.svg
+++ b/tests/data/flamegraph/colors/deterministic.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="1958" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="1941.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="1941.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="1941.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="1941.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="3279">
         <g>
             <title>com.github.plokhotnyuk.jsoniter_scala.core.JsonReaderSpec$$Lambda$8575.1705890900.apply$mcV$sp (69 samples, 2.10%)</title>
diff --git a/tests/data/flamegraph/colors/java.svg b/tests/data/flamegraph/colors/java.svg
index 9225b953..801fa0f6 100644
--- a/tests/data/flamegraph/colors/java.svg
+++ b/tests/data/flamegraph/colors/java.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="1206" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="1189.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="1189.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="1189.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="1189.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="46">
         <g>
             <title>[[vdso]] (1 samples, 2.17%)</title>
diff --git a/tests/data/flamegraph/colors/js.svg b/tests/data/flamegraph/colors/js.svg
index 7fe419cd..19262f06 100644
--- a/tests/data/flamegraph/colors/js.svg
+++ b/tests/data/flamegraph/colors/js.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="390" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="373.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="373.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="373.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="373.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="2">
         <g>
             <title>RegExp:\bFoo ?Bar (1 samples, 50.00%)</title>
diff --git a/tests/data/flamegraph/differential/diff-negated.svg b/tests/data/flamegraph/differential/diff-negated.svg
index 9a7d2d16..2652cb42 100644
--- a/tests/data/flamegraph/differential/diff-negated.svg
+++ b/tests/data/flamegraph/differential/diff-negated.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/differential/diff.svg b/tests/data/flamegraph/differential/diff.svg
index 4da6d041..4f74a923 100644
--- a/tests/data/flamegraph/differential/diff.svg
+++ b/tests/data/flamegraph/differential/diff.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/example-perf-stacks/example-perf-stacks.svg b/tests/data/flamegraph/example-perf-stacks/example-perf-stacks.svg
index 84bb6507..6dea1967 100644
--- a/tests/data/flamegraph/example-perf-stacks/example-perf-stacks.svg
+++ b/tests/data/flamegraph/example-perf-stacks/example-perf-stacks.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="1270" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="1253.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="1253.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="1253.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="1253.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="1315">
         <g>
             <title>gmain (1 samples, 0.08%)</title>
diff --git a/tests/data/flamegraph/factor/factor-2.5.svg b/tests/data/flamegraph/factor/factor-2.5.svg
index 21c933cb..0a586cac 100644
--- a/tests/data/flamegraph/factor/factor-2.5.svg
+++ b/tests/data/flamegraph/factor/factor-2.5.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="1190" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="1173.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="1173.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="1173.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="1173.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title>read (3 samples, 0.42%)</title>
diff --git a/tests/data/flamegraph/flamechart/flame.svg b/tests/data/flamegraph/flamechart/flame.svg
index 31f342c3..a93ce110 100644
--- a/tests/data/flamegraph/flamechart/flame.svg
+++ b/tests/data/flamegraph/flamechart/flame.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="310" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Chart</text>
-    <text id="details" x="10" y="293.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="293.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Chart</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="293.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="293.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="598400">
         <g>
             <title>Needless_copy_to_u32 (1,700 samples, 0.28%)</title>
diff --git a/tests/data/flamegraph/fractional-samples/fractional-reversed.svg b/tests/data/flamegraph/fractional-samples/fractional-reversed.svg
index a9f3b4aa..e4c6cd86 100644
--- a/tests/data/flamegraph/fractional-samples/fractional-reversed.svg
+++ b/tests/data/flamegraph/fractional-samples/fractional-reversed.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="333">
         <g>
             <title>[unknown] (2 samples, 0.60%)</title>
diff --git a/tests/data/flamegraph/grey-frames/grey-frames.svg b/tests/data/flamegraph/grey-frames/grey-frames.svg
index 56eaa363..421cf4b2 100644
--- a/tests/data/flamegraph/grey-frames/grey-frames.svg
+++ b/tests/data/flamegraph/grey-frames/grey-frames.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="333">
         <g>
             <title>- (6 samples, 1.80%)</title>
diff --git a/tests/data/flamegraph/inverted/inverted.svg b/tests/data/flamegraph/inverted/inverted.svg
index 04161cf5..80d80a24 100644
--- a/tests/data/flamegraph/inverted/inverted.svg
+++ b/tests/data/flamegraph/inverted/inverted.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="1194" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Icicle Graph</text>
-    <text id="details" x="10" y="40.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="1183.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Icicle Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="40.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="1183.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title>read (1 samples, 0.35%)</title>
diff --git a/tests/data/flamegraph/nameattr/nameattr.svg b/tests/data/flamegraph/nameattr/nameattr.svg
index 1cc55680..e5ce9041 100644
--- a/tests/data/flamegraph/nameattr/nameattr.svg
+++ b/tests/data/flamegraph/nameattr/nameattr.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="333">
         <g>
             <title>_start (31 samples, 9.31%)</title>
diff --git a/tests/data/flamegraph/nameattr/nameattr_duplicate_attributes.svg b/tests/data/flamegraph/nameattr/nameattr_duplicate_attributes.svg
index 1371745e..4e80aef9 100644
--- a/tests/data/flamegraph/nameattr/nameattr_duplicate_attributes.svg
+++ b/tests/data/flamegraph/nameattr/nameattr_duplicate_attributes.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="333">
         <g>
             <title>_start (31 samples, 9.31%)</title>
diff --git a/tests/data/flamegraph/narrow-blocks/narrow-blocks.svg b/tests/data/flamegraph/narrow-blocks/narrow-blocks.svg
index 8113ce66..fdfba633 100644
--- a/tests/data/flamegraph/narrow-blocks/narrow-blocks.svg
+++ b/tests/data/flamegraph/narrow-blocks/narrow-blocks.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="166" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="149.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="149.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="149.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="149.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="386001">
         <g>
             <title>_start (31,000 samples, 8.03%)</title>
diff --git a/tests/data/flamegraph/options/colordiffusion.svg b/tests/data/flamegraph/options/colordiffusion.svg
index a43a4f3c..8cf7efab 100644
--- a/tests/data/flamegraph/options/colordiffusion.svg
+++ b/tests/data/flamegraph/options/colordiffusion.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="1190" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="1173.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="1173.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="1173.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="1173.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title>read (1 samples, 0.35%)</title>
diff --git a/tests/data/flamegraph/options/count_name_simple.svg b/tests/data/flamegraph/options/count_name_simple.svg
index eba06a6c..cf5e5718 100644
--- a/tests/data/flamegraph/options/count_name_simple.svg
+++ b/tests/data/flamegraph/options/count_name_simple.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 test-samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/count_name_with_symbols.svg b/tests/data/flamegraph/options/count_name_with_symbols.svg
index 7a861a3d..c98296e4 100644
--- a/tests/data/flamegraph/options/count_name_with_symbols.svg
+++ b/tests/data/flamegraph/options/count_name_with_symbols.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 test-samples &lt;&amp; &apos; &quot;, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/default.svg b/tests/data/flamegraph/options/default.svg
index 4da6d041..4f74a923 100644
--- a/tests/data/flamegraph/options/default.svg
+++ b/tests/data/flamegraph/options/default.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/font_type_cursive.svg b/tests/data/flamegraph/options/font_type_cursive.svg
index 37c1bbe5..63cff806 100644
--- a/tests/data/flamegraph/options/font_type_cursive.svg
+++ b/tests/data/flamegraph/options/font_type_cursive.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:cursive; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:cursive; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:cursive; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/font_type_fantasy.svg b/tests/data/flamegraph/options/font_type_fantasy.svg
index 02cc231b..3f93d0c7 100644
--- a/tests/data/flamegraph/options/font_type_fantasy.svg
+++ b/tests/data/flamegraph/options/font_type_fantasy.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:fantasy; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:fantasy; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:fantasy; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/font_type_monospace.svg b/tests/data/flamegraph/options/font_type_monospace.svg
index 4da6d041..4f74a923 100644
--- a/tests/data/flamegraph/options/font_type_monospace.svg
+++ b/tests/data/flamegraph/options/font_type_monospace.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/font_type_sans-serif.svg b/tests/data/flamegraph/options/font_type_sans-serif.svg
index 912a2768..a0ae0a09 100644
--- a/tests/data/flamegraph/options/font_type_sans-serif.svg
+++ b/tests/data/flamegraph/options/font_type_sans-serif.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:sans-serif; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:sans-serif; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:sans-serif; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/font_type_serif.svg b/tests/data/flamegraph/options/font_type_serif.svg
index b6e76a95..743d240f 100644
--- a/tests/data/flamegraph/options/font_type_serif.svg
+++ b/tests/data/flamegraph/options/font_type_serif.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:serif; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:serif; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:serif; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/font_type_simple.svg b/tests/data/flamegraph/options/font_type_simple.svg
index 5c0253a1..380765b3 100644
--- a/tests/data/flamegraph/options/font_type_simple.svg
+++ b/tests/data/flamegraph/options/font_type_simple.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:"Andale Mono"; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:"Andale Mono"; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:"Andale Mono"; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/font_type_with_quote.svg b/tests/data/flamegraph/options/font_type_with_quote.svg
index 2f630377..77a1f085 100644
--- a/tests/data/flamegraph/options/font_type_with_quote.svg
+++ b/tests/data/flamegraph/options/font_type_with_quote.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:"Andale Mono\""; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:"Andale Mono\""; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:"Andale Mono\""; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/name_type_simple.svg b/tests/data/flamegraph/options/name_type_simple.svg
index aef9c4fb..775109c7 100644
--- a/tests/data/flamegraph/options/name_type_simple.svg
+++ b/tests/data/flamegraph/options/name_type_simple.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/name_type_with_backslash.svg b/tests/data/flamegraph/options/name_type_with_backslash.svg
index 305e21d1..6ec0e3d0 100644
--- a/tests/data/flamegraph/options/name_type_with_backslash.svg
+++ b/tests/data/flamegraph/options/name_type_with_backslash.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/name_type_with_quote.svg b/tests/data/flamegraph/options/name_type_with_quote.svg
index 0463c025..000515e8 100644
--- a/tests/data/flamegraph/options/name_type_with_quote.svg
+++ b/tests/data/flamegraph/options/name_type_with_quote.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/notes_simple.svg b/tests/data/flamegraph/options/notes_simple.svg
index 8666b52e..e386b10e 100644
--- a/tests/data/flamegraph/options/notes_simple.svg
+++ b/tests/data/flamegraph/options/notes_simple.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/notes_with_symbols.svg b/tests/data/flamegraph/options/notes_with_symbols.svg
index 43fac79e..824d20c9 100644
--- a/tests/data/flamegraph/options/notes_with_symbols.svg
+++ b/tests/data/flamegraph/options/notes_with_symbols.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/search_color.svg b/tests/data/flamegraph/options/search_color.svg
index 3ec51560..f32cc9c8 100644
--- a/tests/data/flamegraph/options/search_color.svg
+++ b/tests/data/flamegraph/options/search_color.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/stroke_color.svg b/tests/data/flamegraph/options/stroke_color.svg
index e995a7d3..10b41de0 100644
--- a/tests/data/flamegraph/options/stroke_color.svg
+++ b/tests/data/flamegraph/options/stroke_color.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #frames > g > rect { stroke:rgb(125,125,125); stroke-width:1; }
 #matched { text-anchor:end; }
@@ -33,11 +33,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/subtitle_simple.svg b/tests/data/flamegraph/options/subtitle_simple.svg
index e798a850..c773b810 100644
--- a/tests/data/flamegraph/options/subtitle_simple.svg
+++ b/tests/data/flamegraph/options/subtitle_simple.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,12 +32,12 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="270" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="subtitle" x="50.0000%" y="48.00">Test Subtitle</text>
-    <text id="details" x="10" y="253.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="253.00"> </text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="253.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="253.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/subtitle_with_symbols.svg b/tests/data/flamegraph/options/subtitle_with_symbols.svg
index 1dcaa272..244f84ed 100644
--- a/tests/data/flamegraph/options/subtitle_with_symbols.svg
+++ b/tests/data/flamegraph/options/subtitle_with_symbols.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,12 +32,12 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="270" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="subtitle" x="50.0000%" y="48.00">Test Subtitle &lt;&amp; &apos; &quot;</text>
-    <text id="details" x="10" y="253.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="253.00"> </text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="253.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="253.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/title_simple.svg b/tests/data/flamegraph/options/title_simple.svg
index ec6e5abd..20a8e37f 100644
--- a/tests/data/flamegraph/options/title_simple.svg
+++ b/tests/data/flamegraph/options/title_simple.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Test Graph</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Test Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/title_with_symbols.svg b/tests/data/flamegraph/options/title_with_symbols.svg
index b6f8c2fd..615b032b 100644
--- a/tests/data/flamegraph/options/title_with_symbols.svg
+++ b/tests/data/flamegraph/options/title_with_symbols.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Test &lt;&amp; &apos; &quot;</text>
-    <text id="details" x="10" y="229.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="229.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Test &lt;&amp; &apos; &quot;</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/truncate-right.svg b/tests/data/flamegraph/options/truncate-right.svg
index 15d4690c..5290f5d9 100644
--- a/tests/data/flamegraph/options/truncate-right.svg
+++ b/tests/data/flamegraph/options/truncate-right.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = true;
     ]]></script>
     <rect x="0" y="0" width="100%" height="1206" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="1189.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="1189.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="1189.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="1189.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="46">
         <g>
             <title>[[vdso]] (1 samples, 2.17%)</title>
diff --git a/tests/data/flamegraph/options/uicolor_color.svg b/tests/data/flamegraph/options/uicolor_color.svg
new file mode 100644
index 00000000..b3abbaad
--- /dev/null
+++ b/tests/data/flamegraph/options/uicolor_color.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" width="1200" height="246" onload="init(evt)" viewBox="0 0 1200 246" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:fg="http://github.com/jonhoo/inferno">
+    <!--Flame graph stack visualization. See https://github.com/brendangregg/FlameGraph for latest version, and http://www.brendangregg.com/flamegraphs.html for examples.-->
+    <!--NOTES: -->
+    <defs>
+        <linearGradient id="background" y1="0" y2="1" x1="0" x2="0">
+            <stop stop-color="#eeeeee" offset="5%"/>
+            <stop stop-color="#eeeeb0" offset="95%"/>
+        </linearGradient>
+    </defs>
+    <style type="text/css">
+text { font-family:monospace; font-size:12px }
+#title { text-anchor:middle; font-size:17px; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
+#search:hover, #search.show { opacity:1; }
+#subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
+#unzoom { cursor:pointer; }
+#frames > *:hover { stroke:black; stroke-width:0.5; cursor:pointer; }
+.hide { display:none; }
+.parent { opacity:0.5; }
+</style>
+    <script type="text/ecmascript"><![CDATA[
+        var nametype = 'Function:';
+        var fontsize = 12;
+        var fontwidth = 0.59;
+        var xpad = 10;
+        var inverted = false;
+        var searchcolor = 'rgb(230,0,230)';
+        var fluiddrawing = true;
+        var truncate_text_right = false;
+    ]]></script>
+    <rect x="0" y="0" width="100%" height="246" fill="url(#background)"/>
+    <text id="title" fill="rgb(255,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(255,0,0)" x="10" y="229.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(255,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(255,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(255,0,0)" x="1190" y="229.00"> </text>
+    <svg id="frames" x="10" width="1180" total_samples="513">
+        <g>
+            <title>_start (56 samples, 10.92%; 0.00%)</title>
+            <rect x="0.0000%" y="165" width="10.9162%" height="15" fill="rgb(250,250,250)" fg:x="0" fg:w="56"/>
+            <text x="0.2500%" y="175.50">_start</text>
+        </g>
+        <g>
+            <title>__libc_start_main (56 samples, 10.92%; 0.00%)</title>
+            <rect x="0.0000%" y="149" width="10.9162%" height="15" fill="rgb(250,250,250)" fg:x="0" fg:w="56"/>
+            <text x="0.2500%" y="159.50">__libc_start_main</text>
+        </g>
+        <g>
+            <title>main (56 samples, 10.92%; 0.00%)</title>
+            <rect x="0.0000%" y="133" width="10.9162%" height="15" fill="rgb(250,250,250)" fg:x="0" fg:w="56"/>
+            <text x="0.2500%" y="143.50">main</text>
+        </g>
+        <g>
+            <title>cksum (56 samples, 10.92%; +4.87%)</title>
+            <rect x="0.0000%" y="117" width="10.9162%" height="15" fill="rgb(255,223,223)" fg:x="0" fg:w="56"/>
+            <text x="0.2500%" y="127.50">cksum</text>
+        </g>
+        <g>
+            <title>cksum (5 samples, 0.97%; -0.78%)</title>
+            <rect x="10.9162%" y="165" width="0.9747%" height="15" fill="rgb(245,245,255)" fg:x="56" fg:w="5"/>
+            <text x="11.1662%" y="175.50"></text>
+        </g>
+        <g>
+            <title>__GI___fread_unlocked (3 samples, 0.58%; 0.00%)</title>
+            <rect x="11.3060%" y="149" width="0.5848%" height="15" fill="rgb(250,250,250)" fg:x="58" fg:w="3"/>
+            <text x="11.5560%" y="159.50"></text>
+        </g>
+        <g>
+            <title>_IO_file_xsgetn (3 samples, 0.58%; 0.00%)</title>
+            <rect x="11.3060%" y="133" width="0.5848%" height="15" fill="rgb(250,250,250)" fg:x="58" fg:w="3"/>
+            <text x="11.5560%" y="143.50"></text>
+        </g>
+        <g>
+            <title>_IO_file_read (3 samples, 0.58%; 0.00%)</title>
+            <rect x="11.3060%" y="117" width="0.5848%" height="15" fill="rgb(250,250,250)" fg:x="58" fg:w="3"/>
+            <text x="11.5560%" y="127.50"></text>
+        </g>
+        <g>
+            <title>entry_SYSCALL_64_fastpath (3 samples, 0.58%; 0.00%)</title>
+            <rect x="11.3060%" y="101" width="0.5848%" height="15" fill="rgb(250,250,250)" fg:x="58" fg:w="3"/>
+            <text x="11.5560%" y="111.50"></text>
+        </g>
+        <g>
+            <title>sys_read (3 samples, 0.58%; 0.00%)</title>
+            <rect x="11.3060%" y="85" width="0.5848%" height="15" fill="rgb(250,250,250)" fg:x="58" fg:w="3"/>
+            <text x="11.5560%" y="95.50"></text>
+        </g>
+        <g>
+            <title>vfs_read (3 samples, 0.58%; 0.00%)</title>
+            <rect x="11.3060%" y="69" width="0.5848%" height="15" fill="rgb(250,250,250)" fg:x="58" fg:w="3"/>
+            <text x="11.5560%" y="79.50"></text>
+        </g>
+        <g>
+            <title>__vfs_read (3 samples, 0.58%; 0.00%)</title>
+            <rect x="11.3060%" y="53" width="0.5848%" height="15" fill="rgb(250,250,250)" fg:x="58" fg:w="3"/>
+            <text x="11.5560%" y="63.50"></text>
+        </g>
+        <g>
+            <title>ext4_file_read_iter (3 samples, 0.58%; +0.39%)</title>
+            <rect x="11.3060%" y="37" width="0.5848%" height="15" fill="rgb(255,247,247)" fg:x="58" fg:w="3"/>
+            <text x="11.5560%" y="47.50"></text>
+        </g>
+        <g>
+            <title>cksum (96 samples, 18.71%; 0.00%)</title>
+            <rect x="0.0000%" y="181" width="18.7135%" height="15" fill="rgb(250,250,250)" fg:x="0" fg:w="96"/>
+            <text x="0.2500%" y="191.50">cksum</text>
+        </g>
+        <g>
+            <title>main (35 samples, 6.82%; 0.00%)</title>
+            <rect x="11.8908%" y="165" width="6.8226%" height="15" fill="rgb(250,250,250)" fg:x="61" fg:w="35"/>
+            <text x="12.1408%" y="175.50">main</text>
+        </g>
+        <g>
+            <title>cksum (35 samples, 6.82%; +3.12%)</title>
+            <rect x="11.8908%" y="149" width="6.8226%" height="15" fill="rgb(255,232,232)" fg:x="61" fg:w="35"/>
+            <text x="12.1408%" y="159.50">cksum</text>
+        </g>
+        <g>
+            <title>[unknown] (2 samples, 0.39%; 0.00%)</title>
+            <rect x="18.7135%" y="165" width="0.3899%" height="15" fill="rgb(250,250,250)" fg:x="96" fg:w="2"/>
+            <text x="18.9635%" y="175.50"></text>
+        </g>
+        <g>
+            <title>all (513 samples, 100%)</title>
+            <rect x="0.0000%" y="197" width="100.0000%" height="15" fill="rgb(250,250,250)" fg:x="0" fg:w="513"/>
+            <text x="0.2500%" y="207.50"></text>
+        </g>
+        <g>
+            <title>noploop (417 samples, 81.29%; 0.00%)</title>
+            <rect x="18.7135%" y="181" width="81.2865%" height="15" fill="rgb(250,250,250)" fg:x="96" fg:w="417"/>
+            <text x="18.9635%" y="191.50">noploop</text>
+        </g>
+        <g>
+            <title>main (415 samples, 80.90%; +27.49%)</title>
+            <rect x="19.1033%" y="165" width="80.8967%" height="15" fill="rgb(255,100,100)" fg:x="98" fg:w="415"/>
+            <text x="19.3533%" y="175.50">main</text>
+        </g>
+    </svg>
+</svg>
\ No newline at end of file
diff --git a/tests/data/flamegraph/palette-map/consistent-palette.svg b/tests/data/flamegraph/palette-map/consistent-palette.svg
index d1a7e7fa..950baab2 100644
--- a/tests/data/flamegraph/palette-map/consistent-palette.svg
+++ b/tests/data/flamegraph/palette-map/consistent-palette.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="1190" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="1173.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="1173.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="1173.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="1173.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title>read (1 samples, 0.35%)</title>
diff --git a/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all-reversed-stacks.svg b/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all-reversed-stacks.svg
index a4e8e5ec..4e0e49c9 100644
--- a/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all-reversed-stacks.svg
+++ b/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all-reversed-stacks.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="1190" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="1173.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="1173.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="1173.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="1173.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title> (3 samples, 1.05%)</title>
diff --git a/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all.svg b/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all.svg
index d1a7e7fa..950baab2 100644
--- a/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all.svg
+++ b/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all.svg
@@ -10,7 +10,7 @@
         </linearGradient>
     </defs>
     <style type="text/css">
-text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
+text { font-family:monospace; font-size:12px }
 #title { text-anchor:middle; font-size:17px; }
 #matched { text-anchor:end; }
 #search { text-anchor:end; opacity:0.1; cursor:pointer; }
@@ -32,11 +32,11 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
         var truncate_text_right = false;
     ]]></script>
     <rect x="0" y="0" width="100%" height="1190" fill="url(#background)"/>
-    <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
-    <text id="details" x="10" y="1173.00"> </text>
-    <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1190" y="24.00">Search</text>
-    <text id="matched" x="1190" y="1173.00"> </text>
+    <text id="title" fill="rgb(0,0,0)" x="50.0000%" y="24.00">Flame Graph</text>
+    <text id="details" fill="rgb(0,0,0)" x="10" y="1173.00"> </text>
+    <text id="unzoom" class="hide" fill="rgb(0,0,0)" x="10" y="24.00">Reset Zoom</text>
+    <text id="search" fill="rgb(0,0,0)" x="1190" y="24.00">Search</text>
+    <text id="matched" fill="rgb(0,0,0)" x="1190" y="1173.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title>read (1 samples, 0.35%)</title>
diff --git a/tests/flamegraph.rs b/tests/flamegraph.rs
index c688c4f5..5d6b1eca 100644
--- a/tests/flamegraph.rs
+++ b/tests/flamegraph.rs
@@ -730,6 +730,18 @@ fn stroke_color_non_default() {
     test_flamegraph(input_file, expected_result_file, options).unwrap();
 }
 
+#[test]
+fn ui_color_non_default() {
+    let input_file =
+        "./tests/data/flamegraph/differential/perf-cycles-instructions-01-collapsed-all-diff.txt";
+    let expected_result_file = "./tests/data/flamegraph/options/uicolor_color.svg";
+
+    let mut options = flamegraph::Options::default();
+    options.uicolor = rgb::RGB8 { r: 255, g: 0, b: 0 };
+
+    test_flamegraph(input_file, expected_result_file, options).unwrap();
+}
+
 #[test]
 fn flamegraph_sorted_input_file() {
     let input_file = "./flamegraph/test/results/perf-vertx-stacks-01-collapsed-all.txt";