diff --git a/frontend/src/index.css b/frontend/src/index.css
index 38c4b6ba..47d09e5e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -251,3 +251,9 @@ div[data-id=widget-param-dropdown] > div {
 :where(.pf-theme-dark) .pf-c-clipboard-copy .pf-c-form-control[readonly] {
   border-bottom-color: var(--pf-global--BorderColor--400) !important;
 }
+
+:where(.pf-theme-dark) {
+  --pf-chart-global--label--Fill: var(--pf-global--Color--100);
+  --pf-chart-axis--tick-label--Fill: var(--pf-global--Color--200);
+  --pf-chart-donut--label--title--Fill: var(--pf-global--Color--100);
+}
diff --git a/frontend/src/widgets/resultsummary.js b/frontend/src/widgets/resultsummary.js
index b9783c9d..7580be79 100644
--- a/frontend/src/widgets/resultsummary.js
+++ b/frontend/src/widgets/resultsummary.js
@@ -77,14 +77,14 @@ export class ResultSummaryWidget extends React.Component {
 
   render() {
     const themeColors = [
-                  'var(--pf-global--success-color--100)',
-                  'var(--pf-global--danger-color--100)',
-                  'var(--pf-global--info-color--100)',
-                  'var(--pf-global--warning-color--100)',
-                  'var(--pf-global--palette--purple-400)',
-                  'var(--pf-global--palette--purple-700)',
-                  'var(--pf-global--primary-color--100)'
-                ];
+      'var(--pf-global--success-color--100)',
+      'var(--pf-global--danger-color--100)',
+      'var(--pf-global--info-color--100)',
+      'var(--pf-global--warning-color--100)',
+      'var(--pf-global--palette--purple-400)',
+      'var(--pf-global--palette--purple-700)',
+      'var(--pf-global--primary-color--100)'
+    ];
     return (
       <Card>
         <WidgetHeader title={this.title} getDataFunc={this.getResultSummary} onEditClick={this.props.onEditClick} onDeleteClick={this.props.onDeleteClick}/>