[ML] Fix legend text colors for Vega based charts in dark mode. (#115911)

Fixes the legend text colors for Vega based charts in dark mode.

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts

@@ -107,6 +107,11 @@ export const getScatterplotMatrixVegaLiteSpec = (
         labelColor: euiTheme.euiTextSubduedColor,
         titleColor: euiTheme.euiTextSubduedColor,
       },
+      legend: {
+        orient: 'right',
+        labelColor: euiTheme.euiTextSubduedColor,
+        titleColor: euiTheme.euiTextSubduedColor,
+      },
     },
     repeat: {
       column: vegaColumns,

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx

@@ -26,6 +26,7 @@ import { useMlKibana } from '../../../../../contexts/kibana';
 // Separate imports for lazy loadable VegaChart and related code
 import { VegaChart } from '../../../../../components/vega_chart';
 import { VegaChartLoading } from '../../../../../components/vega_chart/vega_chart_loading';
+import { useCurrentEuiTheme } from '../../../../../components/color_range_legend';
 
 import { ErrorCallout } from '../error_callout';
 import { getDependentVar, DataFrameAnalyticsConfig } from '../../../../common';
@@ -33,6 +34,7 @@ import { DataFrameTaskStateType } from '../../../analytics_management/components
 import { ResultsSearchQuery } from '../../../../common/analytics';
 
 import { ExpandableSection, HEADER_ITEMS_LOADING } from '../expandable_section';
+
 import { EvaluateStat } from './evaluate_stat';
 import { EvaluationQualityMetricsTable } from './evaluation_quality_metrics_table';
 
@@ -107,6 +109,7 @@ export const EvaluatePanel: FC<EvaluatePanelProps> = ({ jobConfig, jobStatus, se
   const {
     services: { docLinks },
   } = useMlKibana();
+  const { euiTheme } = useCurrentEuiTheme();
 
   const [columns, setColumns] = useState<ConfusionMatrixColumn[]>([]);
   const [columnsData, setColumnsData] = useState<ConfusionMatrixColumnData[]>([]);
@@ -469,7 +472,8 @@ export const EvaluatePanel: FC<EvaluatePanelProps> = ({ jobConfig, jobStatus, se
                   vegaSpec={getRocCurveChartVegaLiteSpec(
                     classificationClasses,
                     rocCurveData,
-                    getDependentVar(jobConfig.analysis)
+                    getDependentVar(jobConfig.analysis),
+                    euiTheme
                   )}
                 />
               </div>

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/get_roc_curve_chart_vega_lite_spec.tsx

@@ -10,6 +10,7 @@
 import type { TopLevelSpec } from 'vega-lite/build/vega-lite';
 
 import { euiPaletteColorBlind, euiPaletteGray } from '@elastic/eui';
+import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
 
 import { i18n } from '@kbn/i18n';
 
@@ -43,7 +44,8 @@ export interface RocCurveDataRow extends RocCurveItem {
 export const getRocCurveChartVegaLiteSpec = (
   classificationClasses: string[],
   data: RocCurveDataRow[],
-  legendTitle: string
+  legendTitle: string,
+  euiTheme: typeof euiThemeLight
 ): TopLevelSpec => {
   // we append two rows which make up the data for the diagonal baseline
   data.push({ tpr: 0, fpr: 0, threshold: 1, class_name: BASELINE });
@@ -59,6 +61,8 @@ export const getRocCurveChartVegaLiteSpec = (
     config: {
       legend: {
         orient: 'right',
+        labelColor: euiTheme.euiTextSubduedColor,
+        titleColor: euiTheme.euiTextSubduedColor,
       },
       view: {
         continuousHeight: SIZE,
@@ -101,9 +105,9 @@ export const getRocCurveChartVegaLiteSpec = (
         type: 'quantitative',
         axis: {
           tickColor: GRAY,
-          labelColor: GRAY,
+          labelColor: euiTheme.euiTextSubduedColor,
           domainColor: GRAY,
-          titleColor: GRAY,
+          titleColor: euiTheme.euiTextSubduedColor,
         },
       },
       y: {
@@ -114,9 +118,9 @@ export const getRocCurveChartVegaLiteSpec = (
         type: 'quantitative',
         axis: {
           tickColor: GRAY,
-          labelColor: GRAY,
+          labelColor: euiTheme.euiTextSubduedColor,
           domainColor: GRAY,
-          titleColor: GRAY,
+          titleColor: euiTheme.euiTextSubduedColor,
         },
       },
       tooltip: [

x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation.ts

@@ -53,7 +53,7 @@ export default function ({ getService }: FtrProviderContext) {
             // tick/grid/axis
             { color: '#DDDDDD', percentage: 50 },
             // line
-            { color: '#98A2B3', percentage: 30 },
+            { color: '#98A2B3', percentage: 10 },
           ],
           scatterplotMatrixColorStats: [
             // marker colors