Dag toggle is very hard to distinguise in dark mode

[edenbt]

Under which category would you file this issue?

Airflow Core

Apache Airflow version

irflow 3.1.8+astro.1

What happened and how to reproduce it?

It is very hard to distinguish between DAG that is toggled on and off in dark mode



What you think should happen instead?

No response

Operating System

No response

Deployment

Astronomer

Apache Airflow Provider(s)

No response

Versions of Apache Airflow Providers

No response

Official Helm Chart version

Not Applicable

Kubernetes Version

No response

Helm Chart configuration

No response

Docker Image customizations

No response

Anything else?

No response

Are you willing to submit PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct

[boring-cyborg]

Thanks for opening your first issue here! Be sure to follow the issue template! If you are willing to raise PR to address this issue please do so, no need to wait for approval.

[jroachgolf84]

cc: @cmarteepants, thoughts here?

[SkanderD1999]

I tested this on Apache Airflow 3.2.1 using the official Docker Compose setup on Windows 11, with Chrome.

I can reproduce the issue in dark mode for the OFF toggle state.

The ON state is distinguishable because the toggle background is blue. However, the OFF state has low contrast and blends with the dark background. The white knob is visible, but the full toggle shape is not very clear.

Environment:

• Airflow version: 3.2.1
• Deployment: official Docker Compose
• OS: Windows 11
• Browser: Chrome
• Theme: Dark mode

Result:
The issue is reproducible for the OFF state, where the toggle has low contrast in dark mode. The ON state remains clear enough because of the blue background.

[nuebaek]

Hi, I’d like to work on this issue.
I’ll investigate the toggle styling in dark mode and propose a fix to improve the contrast of the OFF state.

[haseebmalik18]

Adjusted the contrast on the off-state in dark mode, thoughts on this?