[FR] Ability to open UI with dark mode using querystring

[hakan-77]

Willingness to contribute

Yes. I would be willing to contribute this feature with guidance from the MLflow community.

Proposal Summary

The cookie "_mlflow_dark_mode_toggle_enabled" needs to be set for dark mode to work. As far as I can see, this can only be done via the toggle button.

Could we set this via query string param? e.g. &dark_mode=true

Motivation

What is the use case for this feature?

When MLFlow UI is embedded in dark themed apps.

Why is this use case valuable to support for MLflow users in general?

Improved user experience.

Why is this use case valuable to support for your project(s) or organization?

Improved adoption.

Why is it currently difficult to achieve this use case?

There is no way to set dark mode in advance, e.g. like jupyter notebooks.

Details

No response

What component(s) does this bug affect?

• [ ] area/artifacts: Artifact stores and artifact logging
• [ ] area/build: Build and test infrastructure for MLflow
• [ ] area/deployments: MLflow Deployments client APIs, server, and third-party Deployments integrations
• [ ] area/docs: MLflow documentation pages
• [ ] area/examples: Example code
• [ ] area/model-registry: Model Registry service, APIs, and the fluent client calls for Model Registry
• [ ] area/models: MLmodel format, model serialization/deserialization, flavors
• [ ] area/recipes: Recipes, Recipe APIs, Recipe configs, Recipe Templates
• [ ] area/projects: MLproject format, project running backends
• [ ] area/scoring: MLflow Model server, model deployment tools, Spark UDFs
• [ ] area/server-infra: MLflow Tracking server backend
• [ ] area/tracking: Tracking Service, tracking client APIs, autologging

What interface(s) does this bug affect?

• [ ] area/uiux: Front-end, user experience, plotting, JavaScript, JavaScript dev server
• [ ] area/docker: Docker use across MLflow's components, such as MLflow Projects and MLflow Models
• [ ] area/sqlalchemy: Use of SQLAlchemy in the Tracking Service or Model Registry
• [ ] area/windows: Windows support

What language(s) does this bug affect?

• [ ] language/r: R APIs and clients
• [ ] language/java: Java APIs and clients
• [ ] language/new: Proposals for new client languages

What integration(s) does this bug affect?

• [ ] integrations/azure: Azure and Azure ML integrations
• [ ] integrations/sagemaker: SageMaker integrations
• [ ] integrations/databricks: Databricks integrations

[harupy]

cc @daniellok-db

[daniellok-db]

Hi @hakan-77, yes I think this would be fine to add! The relevant section of code is here:

https://github.com/mlflow/mlflow/blob/dc51fc6b82fa78a30f8be5efed18f7867809311d/mlflow/server/js/src/common/hooks/useMLflowDarkTheme.tsx#L18

I think we can make the query string take highest preference when initializing the isDarkTheme hook. You can use URLSearchParams to retrieve a query param.

I should add that the dark mode also follows system settings, so if your users have set dark mode as a system preference (e.g. through browser or OS settings), MLflow should be in dark mode as well. This might be a simpler fix for your use-case.

[github-actions[bot]]

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

[hakan-77]

@daniellok-db re: system prefercence: makes perfect sense. I never used ts but let me see if I can get this working.