Skip to content

fix:implement dark mode in experiment correctly#20974

Merged
daniellok-db merged 3 commits intomlflow:masterfrom
statxc:fix/issue-20874
Feb 20, 2026
Merged

fix:implement dark mode in experiment correctly#20974
daniellok-db merged 3 commits intomlflow:masterfrom
statxc:fix/issue-20874

Conversation

@statxc
Copy link
Contributor

@statxc statxc commented Feb 18, 2026 •
edited
Loading

Related Issues/PRs

Closes #20874

What changes are proposed in this pull request?

Fix the "Add description" modal rich text editor (ReactMde) to fully respect dark mode theme. Previously, only toolbar icon colors were themed; the toolbar background, tab buttons, textarea, preview pane, and container border all retained their light-mode defaults.

Changes:

  • EditableNote.tsx: Created and exported a ThemeAwareReactMde wrapper component that conditionally applies a mlflow-dark-theme CSS class and injects design system theme tokens as CSS custom properties.
  • EditableNote.css: Added dark mode overrides for all ReactMde areas — container border, toolbar header, tab buttons, toolbar icon buttons, textarea, preview pane, and image drop tip area.
  • ExperimentViewDescriptionNotes.tsx: Replaced inline ReactMde usage with the shared ThemeAwareReactMde wrapper, removing duplicated theme logic.

How is this PR tested?

  • Existing unit/integration tests
  • New unit/integration tests
  • Manual tests

Manual testing steps:

  1. Start the dev server (yarn start)
  2. Enable dark mode
  3. Navigate to an experiment and click "Add description"
  4. Verify the modal editor toolbar, textarea, and preview pane all use dark theme colors
  5. Switch back to light mode and verify the editor renders normally

Does this PR require documentation update?

  • No. You can skip the rest of this section.
  • Yes. I've updated:
    • Examples
    • API references
    • Instructions
image

Does this PR require updating the MLflow Skills repository?

  • No. You can skip the rest of this section.
  • Yes. Please link the corresponding PR or explain how you plan to update it.

Release Notes

Is this a user-facing change?

  • No. You can skip the rest of this section.
  • Yes. Give a description of this change to be included in the release notes for MLflow users.

Fix the experiment "Add description" modal editor to fully respect dark mode theme, including toolbar, textarea, and preview pane styling.

What component(s), interfaces, languages, and integrations does this PR affect?

Components

  • area/tracking: Tracking Service, tracking client APIs, autologging
  • area/models: MLmodel format, model serialization/deserialization, flavors
  • area/model-registry: Model Registry service, APIs, and the fluent client calls for Model Registry
  • area/scoring: MLflow Model server, model deployment tools, Spark UDFs
  • area/evaluation: MLflow model evaluation features, evaluation metrics, and evaluation workflows
  • area/gateway: MLflow AI Gateway client APIs, server, and third-party integrations
  • area/prompts: MLflow prompt engineering features, prompt templates, and prompt management
  • area/tracing: MLflow Tracing features, tracing APIs, and LLM tracing functionality
  • area/projects: MLproject format, project running backends
  • area/uiux: Front-end, user experience, plotting, JavaScript, JavaScript dev server
  • area/build: Build and test infrastructure for MLflow
  • area/docs: MLflow documentation pages

How should the PR be classified in the release notes? Choose one:

  • rn/none - No description will be included. The PR will be mentioned only by the PR number in the "Small Bugfixes and Documentation Updates" section
  • rn/breaking-change - The PR will be mentioned in the "Breaking Changes" section
  • rn/feature - A new user-facing feature worth mentioning in the release notes
  • rn/bug-fix - A user-facing bug fix worth mentioning in the release notes
  • rn/documentation - A user-facing documentation change worth mentioning in the release notes

Should this PR be included in the next patch release?

  • Yes (this PR will be cherry-picked and included in the next patch release)
  • No (this PR will be included in the next minor release)

@github-actions github-actions bot added community Community/external contribution size/M labels Feb 18, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Feb 18, 2026

🛠 DevTools 🛠

Install mlflow from this PR

# mlflow
pip install git+https://github.com/mlflow/mlflow.git@refs/pull/20974/merge
# mlflow-skinny
pip install git+https://github.com/mlflow/mlflow.git@refs/pull/20974/merge#subdirectory=libs/skinny

For Databricks, use the following command:

%sh curl -LsSf https://raw.githubusercontent.com/mlflow/mlflow/HEAD/dev/install-skinny.sh | sh -s pull/20974/merge

@github-actions
Copy link
Contributor

github-actions bot commented Feb 18, 2026

@intelliking Thank you for the contribution! Could you fix the following issue(s)?

⚠ DCO check

The DCO check failed. Please sign off your commit(s) by following the instructions here. See https://github.com/mlflow/mlflow/blob/master/CONTRIBUTING.md#sign-your-work for more details.

@github-actions github-actions bot added area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server rn/bug-fix Mention under Bug Fixes in Changelogs. v3.10.0 labels Feb 18, 2026
@statxc
fix:implement dark mode in experiment correctly
eee4278 
Signed-off-by: intelliking <tyleradams93226@gmail.com>
@statxc
Copy link
Contributor Author

statxc commented Feb 18, 2026

Hi @harupy , @TomeHirata , Could you please review this PR and share any feedback? thank you.

@TomeHirata TomeHirata requested a review from Copilot February 19, 2026 05:51
Copilot AI reviewed Feb 19, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes the dark mode theming for the ReactMde editor component used in the experiment "Add description" modal. Previously, only the toolbar icon colors were themed, leaving other UI elements (toolbar background, tab buttons, textarea, preview pane, and container border) in their default light-mode appearance.

Changes:

  • Created a reusable ThemeAwareReactMde wrapper component that conditionally applies dark mode styling through CSS classes and custom properties
  • Added comprehensive dark mode CSS overrides for all ReactMde UI elements
  • Replaced direct ReactMde usage with the new ThemeAwareReactMde wrapper in both EditableNote.tsx and ExperimentViewDescriptionNotes.tsx

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
EditableNote.tsx Added ThemeAwareReactMde wrapper component that injects design system theme tokens as CSS variables and applies dark mode class; updated EditableNoteImpl to use the new wrapper
EditableNote.css Added dark mode CSS overrides for ReactMde container, toolbar, tab buttons, textarea, preview pane, and image drop area using CSS custom properties
ExperimentViewDescriptionNotes.tsx Replaced inline ReactMde with ThemeAwareReactMde wrapper, improved type safety by removing undefined from selectedTab type, added null coalescing for value prop

@statxc
Copy link
Contributor Author

statxc commented Feb 19, 2026

Hi @TomeHirata thank you for taking a look. Could you approve this now?

daniellok-db
daniellok-db approved these changes Feb 20, 2026
View reviewed changes
Copy link
Collaborator

@daniellok-db daniellok-db left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks great, thanks

@daniellok-db
format
0482f5c 
Signed-off-by: Daniel Lok <daniel.lok@databricks.com>
@github-actions
Copy link
Contributor

github-actions bot commented Feb 20, 2026 •
edited
Loading

Documentation preview for 0482f5c is available at:

More info
  • Ignore this comment if this PR does not change the documentation.
  • The preview is updated when a new commit is pushed to this PR.
  • This comment was created by this workflow run.
  • The documentation was built by this workflow run.

@daniellok-db daniellok-db added this pull request to the merge queue Feb 20, 2026
Merged via the queue into mlflow:master with commit f0b7e0b Feb 20, 2026
17 checks passed
daniellok-db added a commit to daniellok-db/mlflow that referenced this pull request Feb 20, 2026
@statxc @daniellok-db
fix:implement dark mode in experiment correctly (mlflow#20974)
29e05f9 
Signed-off-by: intelliking <tyleradams93226@gmail.com>
Signed-off-by: Daniel Lok <daniel.lok@databricks.com>
Co-authored-by: Daniel Lok <daniel.lok@databricks.com>
daniellok-db added a commit that referenced this pull request Feb 20, 2026
@statxc @daniellok-db
fix:implement dark mode in experiment correctly (#20974)
f923129 
Signed-off-by: intelliking <tyleradams93226@gmail.com>
Signed-off-by: Daniel Lok <daniel.lok@databricks.com>
Co-authored-by: Daniel Lok <daniel.lok@databricks.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@daniellok-db daniellok-db daniellok-db approved these changes

Assignees

No one assigned

Labels

area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server community Community/external contribution rn/bug-fix Mention under Bug Fixes in Changelogs. size/M v3.10.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG] "Add description" modal toolbar does not fully respect dark mode theme

3 participants

@statxc @daniellok-db