This is an automated email from the ASF dual-hosted git repository.
hgruszecki pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/iggy.git
The following commit(s) were added to refs/heads/master by this push:
new f8566c546 feat(web): update benchmark dashboard dark mode to Iggy
brand colors (#2738)
f8566c546 is described below
commit f8566c546e561aaf94625a855ae93f210067ab3a
Author: Vishakha Agrawal <[email protected]>
AuthorDate: Wed Feb 18 19:50:25 2026 +0530
feat(web): update benchmark dashboard dark mode to Iggy brand colors (#2738)
Closes #2733.
---
core/bench/dashboard/frontend/assets/style.css | 93 +++++++++++++---------
.../frontend/src/components/chart/plot_trend.rs | 45 +++++++----
core/bench/report/src/plotting/chart.rs | 2 +-
3 files changed, 86 insertions(+), 54 deletions(-)
diff --git a/core/bench/dashboard/frontend/assets/style.css
b/core/bench/dashboard/frontend/assets/style.css
index 34796f4ff..327765fca 100644
--- a/core/bench/dashboard/frontend/assets/style.css
+++ b/core/bench/dashboard/frontend/assets/style.css
@@ -31,20 +31,21 @@
--color-shadow-light: rgba(0, 0, 0, 0.05);
--color-shadow-medium: rgba(0, 0, 0, 0.15);
- /* Colors - Dark Theme */
- --color-dark-background: #242424;
- --color-dark-background-elevated: #1a1a1a;
- --color-dark-sidebar: #2d2d2d;
- --color-dark-border: #404040;
- --color-dark-text: #ffffff;
- --color-dark-text-secondary: #aaaaaa;
- --color-dark-hover: #333333;
- --color-dark-active: #1a1a1a;
- --color-dark-input: #2a2a2a;
+ /* Colors - Dark Theme - Iggy Brand */
+ --color-dark-background: #070C18; /* Navy */
+ --color-dark-background-elevated: #132F4C; /* Lighter Navy */
+ --color-dark-sidebar: #101318; /* Navy sidebar */
+ --color-dark-border: #2C323A; /* Darker border for
contrast */
+ --color-dark-text: #F5F5F5; /* Cream text */
+ --color-dark-text-secondary: #E0E0E0;
+ --color-dark-hover: #0b1428;
+ --color-dark-active: #FF9305;
+ --color-dark-input: #151b28;
+ --color-dark-accent: #FF9305;
/* Additional Dark Theme Variables */
- --color-dark-tooltip-background: #2a2a2a;
- --color-dark-select-arrow: #ffffff;
+ --color-dark-tooltip-background: #313338;
+ --color-dark-select-arrow: #F5F5F5;
/* Spacing */
--spacing-xs: 4px;
@@ -404,11 +405,13 @@ body.dark select option {
.dark .download-button:hover,
.dark .theme-toggle:hover {
background-color: var(--color-dark-hover);
+ border-color: var(--color-dark-accent);
}
.dark .icon-button.active {
- background-color: var(--color-dark-active);
- border-color: var(--color-dark-border);
+ background-color: var(--color-dark-hover);
+ border-color: var(--color-dark-accent);
+ color: var(--color-dark-accent);
}
.controls {
@@ -550,13 +553,15 @@ body.dark select option {
}
.dark .copy-button {
- background: var(--color-dark-active);
- color: var(--color-dark-text);
- border-color: var(--color-dark-border);
+ background: var(--color-dark-hover);
+ color: var(--color-dark-accent);
+ border-color: var(--color-dark-accent);
}
.dark .copy-button:hover {
- background: var(--color-dark-hover);
+ background: var(--color-dark-accent);
+ color: var(--color-dark-text);
+ border-color: var(--color-dark-accent);
}
.copy-notification {
@@ -708,8 +713,9 @@ body.dark .segment:hover:not(.active) {
}
body.dark .segment.active {
- background-color: var(--color-dark-active);
- color: var(--color-dark-text);
+ background-color: var(--color-dark-accent);
+ color: var(--color-dark-background);
+ font-weight: 500;
}
.chart-container {
@@ -931,12 +937,13 @@ body.dark .footer .gitref {
.dark .tab-button:hover {
background-color: var(--color-dark-hover);
- color: var(--color-dark-text);
+ color: var(--color-dark-accent);
}
.dark .tab-button.active {
- background-color: var(--color-dark-active);
- color: var(--color-dark-text);
+ background-color: transparent;
+ color: var(--color-dark-accent);
+ border-bottom: 2px solid var(--color-dark-accent);
}
.dark .tab-list {
@@ -1011,13 +1018,14 @@ body.dark .footer .gitref {
.dark .benchmark-option:hover:not(.inactive) {
background-color: var(--color-dark-hover);
- border-color: var(--color-dark-text-secondary);
+ border-color: var(--color-dark-accent);
}
.dark .benchmark-option.active {
- background-color: var(--color-dark-active);
- color: var(--color-dark-text);
- border-left: 4px solid var(--color-dark-text);
+ background-color: var(--color-dark-hover);
+ color: var(--color-dark-accent);
+ border: 1px solid var(--color-dark-accent);
+ border-left: 4px solid var(--color-dark-accent);
}
.benchmark-list-container {
@@ -1149,11 +1157,12 @@ span.benchmark-list-item-dot {
.dark .benchmark-list-item:hover {
background-color: var(--color-dark-hover);
+ border-left-color: var(--color-dark-accent);
}
.dark .benchmark-list-item.active {
- background-color: var(--color-dark-active);
- border-left: 4px solid var(--color-dark-text);
+ background-color: var(--color-dark-hover);
+ border-left: 4px solid var(--color-dark-accent);
padding-left: calc(var(--spacing-lg) - 4px);
}
@@ -1224,11 +1233,14 @@ span.benchmark-list-item-dot {
.dark .measurement-button:hover {
background-color: var(--color-dark-hover);
+ border-color: var(--color-dark-accent);
}
.dark .measurement-button.active {
- background-color: var(--color-dark-active);
- border-color: var(--color-dark-border);
+ background-color: var(--color-dark-accent);
+ color: var(--color-dark-background);
+ border-color: var(--color-dark-accent);
+ font-weight: 500;
}
.server-stats-button {
@@ -1264,7 +1276,7 @@ span.benchmark-list-item-dot {
.dark .server-stats-button:hover:not(:disabled) {
background-color: var(--color-dark-hover);
- border-color: var(--color-dark-text-secondary);
+ border-color: var(--color-dark-accent);
}
.dark .server-stats-button:disabled {
@@ -1583,8 +1595,8 @@ body.dark .benchmark-list-item-metric.message-throughput {
/* Dark theme adjustments for recent benchmarks */
.dark .recent-benchmark-item.active {
- border-left-color: var(--color-primary);
- background-color: var(--color-dark-active);
+ border-left-color: var(--color-dark-accent);
+ background-color: var(--color-dark-hover);
}
.dark .benchmark-list-item-title {
@@ -1643,6 +1655,7 @@ body.dark .benchmark-list-item-metric.message-throughput {
.dark .benchmark-card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ border-color: var(--color-dark-accent);
}
.dark .card-header {
@@ -1666,19 +1679,21 @@ body.dark
.benchmark-list-item-metric.message-throughput {
}
.dark .view-details-button {
- background-color: var(--color-dark-sidebar);
+ background-color: var(--color-dark-hover);
border-color: var(--color-dark-border);
color: var(--color-dark-text);
}
.dark .view-details-button:hover {
- background-color: var(--color-dark-hover);
+ background-color: var(--color-dark-border);
+ border-color: var(--color-dark-accent);
+ color: var(--color-dark-accent);
}
.dark .error-message button {
- background-color: var(--color-dark-sidebar);
- border-color: var(--color-dark-border);
- color: var(--color-dark-text);
+ background-color: var(--color-dark-hover);
+ border-color: var(--color-dark-accent);
+ color: var(--color-dark-accent);
}
.dark .sidebar {
diff --git a/core/bench/dashboard/frontend/src/components/chart/plot_trend.rs
b/core/bench/dashboard/frontend/src/components/chart/plot_trend.rs
index dc51e171c..b8aea766a 100644
--- a/core/bench/dashboard/frontend/src/components/chart/plot_trend.rs
+++ b/core/bench/dashboard/frontend/src/components/chart/plot_trend.rs
@@ -98,6 +98,17 @@ fn create_latency_trend_chart(data: &[BenchmarkReportLight],
is_dark: bool) -> C
let mut producing_consumer_p99_latencies = Vec::new();
let mut producing_consumer_p999_latencies = Vec::new();
+ // Theme-aware palette: prefer Iggy orange first on dark theme
+ let palette: [&str; 8] = if is_dark {
+ [
+ "#FF9800", "#73c0de", "#91cc75", "#ee6666", "#5470c6", "#3ba272",
"#fac858", "#ea7ccc",
+ ]
+ } else {
+ [
+ "#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272",
"#fc8452", "#ea7ccc",
+ ]
+ };
+
let mut chart = IggyChart::new(&title, &subtext, is_dark, true)
.with_category_x_axis("Version", gitrefs)
.with_y_axis("Latency [ms]");
@@ -150,25 +161,25 @@ fn create_latency_trend_chart(data:
&[BenchmarkReportLight], is_dark: bool) -> C
"Producer Avg Latency",
producer_avg_latencies,
Symbol::Circle,
- "#5470c6",
+ palette[0],
)
.add_series(
"Producer P95 Latency",
producer_p95_latencies,
Symbol::Triangle,
- "#91cc75",
+ palette[1],
)
.add_series(
"Producer P99 Latency",
producer_p99_latencies,
Symbol::Diamond,
- "#fac858",
+ palette[2],
)
.add_series(
"Producer P999 Latency",
producer_p999_latencies,
Symbol::Rect,
- "#ee6666",
+ palette[3],
)
} else {
chart
@@ -180,25 +191,25 @@ fn create_latency_trend_chart(data:
&[BenchmarkReportLight], is_dark: bool) -> C
"Consumer Avg Latency",
consumer_avg_latencies,
Symbol::Circle,
- "#73c0de",
+ palette[4],
)
.add_series(
"Consumer P95 Latency",
consumer_p95_latencies,
Symbol::Triangle,
- "#3ba272",
+ palette[5],
)
.add_series(
"Consumer P99 Latency",
consumer_p99_latencies,
Symbol::Diamond,
- "#fc8452",
+ palette[6],
)
.add_series(
"Consumer P999 Latency",
consumer_p999_latencies,
Symbol::Rect,
- "#ea7ccc",
+ palette[7],
)
} else {
chart
@@ -210,25 +221,25 @@ fn create_latency_trend_chart(data:
&[BenchmarkReportLight], is_dark: bool) -> C
"Producing Consumers Avg Latency",
producing_consumer_avg_latencies,
Symbol::Circle,
- "#73c0de",
+ palette[4],
)
.add_series(
"Producing Consumers P95 Latency",
producing_consumer_p95_latencies,
Symbol::Triangle,
- "#3ba272",
+ palette[5],
)
.add_series(
"Producing Consumers P99 Latency",
producing_consumer_p99_latencies,
Symbol::Diamond,
- "#fc8452",
+ palette[6],
)
.add_series(
"Producing Consumers P999 Latency",
producing_consumer_p999_latencies,
Symbol::Rect,
- "#ea7ccc",
+ palette[7],
)
} else {
chart
@@ -262,6 +273,12 @@ fn create_throughput_trend_chart(data:
&[BenchmarkReportLight], is_dark: bool) -
.collect();
let title = trend_chart_title(&data[0].params, ChartKind::Throughput);
+ let palette_throughput: [&str; 2] = if is_dark {
+ ["#FF9800", "#73c0de"]
+ } else {
+ ["#5470c6", "#91cc75"]
+ };
+
IggyChart::new(&title, &subtext, is_dark, true)
.with_category_x_axis("Version", gitrefs)
.with_dual_y_axis("Throughput [MB/s]", "Throughput [msg/s]")
@@ -269,14 +286,14 @@ fn create_throughput_trend_chart(data:
&[BenchmarkReportLight], is_dark: bool) -
"Average Throughput [MB/s]",
throughput_mb,
Symbol::Circle,
- "#5470c6",
+ palette_throughput[0],
0,
)
.add_dual_series(
"Average Throughput [msg/s]",
throughput_msg,
Symbol::Triangle,
- "#91cc75",
+ palette_throughput[1],
1,
)
.inner
diff --git a/core/bench/report/src/plotting/chart.rs
b/core/bench/report/src/plotting/chart.rs
index a19651640..bb6e5ff7e 100644
--- a/core/bench/report/src/plotting/chart.rs
+++ b/core/bench/report/src/plotting/chart.rs
@@ -101,7 +101,7 @@ impl IggyChart {
);
let chart = if dark {
- chart.background_color("#242424")
+ chart.background_color("#070C18")
} else {
chart
};
