diff --git a/src/Report/Html/Renderer/Template/css/style.css b/src/Report/Html/Renderer/Template/css/style.css
index bec09c4c1..4216dfc34 100644
--- a/src/Report/Html/Renderer/Template/css/style.css
+++ b/src/Report/Html/Renderer/Template/css/style.css
@@ -1,3 +1,14 @@
+:root {
+ --phpunit-success-bar: #28a745;
+ --phpunit-success-high: {{success-high}};
+ --phpunit-success-medium: {{success-medium}};
+ --phpunit-success-low: {{success-low}};
+ --phpunit-warning: {{warning}};
+ --phpunit-warning-bar: #ffc107;
+ --phpunit-danger: {{danger}};
+ --phpunit-danger-bar: #dc3545;
+}
+
 body {
  font-family: sans-serif;
  font-size: 1em;
@@ -40,23 +51,23 @@ body {
 }
 
 .table tbody tr.covered-by-large-tests, .table tbody tr.covered-by-large-tests td, li.covered-by-large-tests, tr.success, tr.success td, td.success, li.success, span.success {
- background-color: {{success-low}};
+ background-color: var(--phpunit-success-low);
 }
 
 .table tbody tr.covered-by-medium-tests, .table tbody tr.covered-by-medium-tests td, li.covered-by-medium-tests {
- background-color: {{success-medium}};
+ background-color: var(--phpunit-success-medium);
 }
 
 .table tbody tr.covered-by-small-tests, .table tbody tr.covered-by-small-tests td, li.covered-by-small-tests {
- background-color: {{success-high}};
+ background-color: var(--phpunit-success-high);
 }
 
 .table tbody tr.warning, .table tbody tr.warning td, .table tbody td.warning, li.warning, span.warning {
- background-color: {{warning}};
+ background-color: var(--phpunit-warning);
 }
 
 .table tbody tr.danger, .table tbody tr.danger td, .table tbody td.danger, li.danger, span.danger {
- background-color: {{danger}};
+ background-color: var(--phpunit-danger);
 }
 
 .table tbody td.info {
@@ -138,21 +149,33 @@ table + .structure-heading {
 }
 
 .covered-by-small-tests {
- background-color: {{success-high}};
+ background-color: var(--phpunit-success-high);
 }
 
 .covered-by-medium-tests {
- background-color: {{success-medium}};
+ background-color: var(--phpunit-success-medium);
 }
 
 .covered-by-large-tests {
- background-color: {{success-low}};
+ background-color: var(--phpunit-success-low);
 }
 
 .not-covered {
- background-color: {{danger}};
+ background-color: var(--phpunit-danger);
 }
 
 .not-coverable {
- background-color: {{warning}};
+ background-color: var(--phpunit-warning);
+}
+
+.progress-bar.bg-success {
+ background-color: var(--phpunit-success-bar) !important;
 }
+
+.progress-bar.bg-warning {
+ background-color: var(--phpunit-warning-bar) !important;
+}
+
+.progress-bar.bg-danger {
+ background-color: var(--phpunit-danger-bar) !important;
+}
\ No newline at end of file