[ML] Dark mode issues in ML UI components

[peteharverson]

Styling issues for the ML UI components when dark mode theme is enabled:

• Job select button bar background (ml/public/components/job_select_list/_job_select_list.scss)
  

• Job select list background and font color (ml/public/components/job_select_list)
  

• Anomaly Explorer swimlane axis tick labels - not enough contrast to background? (/ml/public/explorer/explorer_swimlane.js)
  

• Jobs list job groups selector - cannot see tick in selected row (ml/public/jobs/jobs_list/components/multi_job_actions/group_selector)
  

• Jobs List expanded row tab panels (ml/public/jobs/jobs_list/components/job_details/_job_details.scss)
  

• Create Single Metric, Multi Metric, Population jobs - no results chart background (should be dark?)

ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss

• Create Multi Metric, Population job wizards - event rate chart background (should be dark?) (fill set in ml/public/jobs/new_job/simple/components/event_rate_chart/event_rate_chart_directive.js)
  

• Create Multi Metric, Popultion job wizards - metric chart background (should be dark?) (fill set in ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_chart_directive.js,
  ml/public/jobs/new_job/simple/population/create_job/create_job_chart_directive.js)
  

• Advanced job wizard - react-select controls (needs an override of the react-select component background - (ml/public/jobs/new_job/advanced/field_select.js)
  

Also used here in the detector modal:

• Apache data recognizer module icon is on a white background (ml/server/models/data_recognizer/modules/apache_ecs/logo.json
  

• Nginx data recognizer module icon is on a white background (ml/server/models/data_recognizer/modules/nginx_ecs/logo.json
  

• Single Metric Viewer - masked area of context chart - better to use a darker shade than the almost white appearance here? (/ml/public/timeseriesexplorer/components/context_chart_mask/context_chart_mask.js)
  

• Single Metric Viewer - gridlines can't really be seen (`ml/public/timeseriesexplorer/_timeseriesexplorer.scss) (fixed in [ML] Fixes styling of Single Metric Viewer chart for dark theme #93581)
  

• Field data card - 'calculated over all documents' font color (/ml/public/components/field_data_card/_field_data_card.scss)
  

• Field data card - contrast of font color on some of the background colors is poor (/ml/public/components/field_data_card/_field_data_card.scss)
  

[elasticmachine]

Pinging @elastic/ml-ui

[elasticmachine]

Pinging @elastic/kibana-design

[snide]

I've checked off all the ones I addressed so far in #33222

Some of these (like bad pngs) and the react select stuff, i think should be solved by just using EUI for those pieces. Writing overwrites for React select seems pretty silly when we have EUI controls that do the same thing.

[alvarezmelissa87]

Heya @snide for the 7th item in the checklist (Create Multi Metric, Population job wizards - event rate chart background (should be dark?) (fill set in )
The background looks good but the color of the bars themselves feel like they may not contrast enough with the background?

[MikePaquette]

@snide @peteharverson I'm seeing ML dark mode issues in 7.3.1, but they appear to be fixed in 7.4.
I can't locate the exact fix in #33222, so just checking to see that it's actually fixed.

• ML->Job Management ->Job Settings
• ML->Job Management->Job config
• ML->Job Management->Datafeed
• ML->Job Management ->Counts

System on which problem was observed: https://sec19.eden.elstc.co/s/dark-demo/app/ml#/jobs?_g=(refreshInterval:(pause:!f,value:30000),time:(from:now-15m,to:now))

In each case the table background color remains light, making the text barely readable.

Here's a close-up:

cc: @geoffbernard @cwurm

[walterra]

@MikePaquette Those were fixed here: #45159

[MikePaquette]

Thank you, @walterra confirmed, looking correct in 7.4!

[peteharverson]

Closing this issue as all the items listed in the description have now been addressed.