[BUG] dark mode is not correctly applied to "model comparison" page

[thesuperzapper]

Willingness to contribute

Yes. I can contribute a fix for this bug independently.

MLflow version

2.11.1

System information

• OS Platform and Distribution (e.g., Linux Ubuntu 16.04): MacOS
• Python version: N/A
• yarn version, if running the dev UI: N/A

Describe the problem

When you have dark mode enabled, the "compare models" page will show very messed up, and have half light and half dark mode.

Steps to reproduce the bug

1. Have dark mode enabled
2. Go to "models" tab
3. Select two versions of a model and click "compare"
4. Observe a strange style error

Code to generate data required to reproduce the bug

No response

Is the console panel in DevTools showing errors relevant to the bug?

No response

Does the network panel in DevTools contain failed requests relevant to the bug?

No response

[B-Step62]

@thesuperzapper Thank you for reaching out to us! I could reproduce the issue.

cc: @daniellok-db Is this issue already tracked somewhere?

[daniellok-db]

Ah i think we might have missed this in the original dark theme implementation, cc @hubertzub-db is there an easy way to fix this? I'm guessing the best fix would be to migrate these old <table>s to <Table> from @databricks/design-system

[hubertzub-db]

@daniellok-db oh interesting, we had to miss this one 🤔

I'm guessing the best fix would be to migrate these old <table>s to <Table> from @databricks/design-system

Yes, that would be the best fix! However, we can also get a much quicker/makeshift solution if we relax colors in CompareRunView.css which is a super old style file, still not migrated to emotion CSS.

[daniellok-db]

@thesuperzapper would you like to contribute the fix?

[github-actions]

@mlflow/mlflow-team Please assign a maintainer and start triaging this issue.

[thesuperzapper]

@daniellok-db probably best if someone more familiar with the project does it!