Add side/navbar_color config for Airflow 3.x

[r-richmond]

Description

In Airflow 2.x NAVBAR_COLOR controlled the color of the navbar on every UI page. This made it very useful for clearly marking different airflow environments (prod, staging, dev, etc). However this setting was deprecated & moved to the fab provider and as a result it greatly reduced its visibility.

This issue is proposing adding back/ a new config to control the new UI's sidebar color to achieve the same thing.

Note: The migrated setting is only visible on 2 pages and is thus not nearly as useful for the above mentioned use case.

Note 2: Please add affected_version_3.0 label

Use case/motivation

Single Large UI color-based customization to communicate which environment a user is in.

Related issues

#52251 was submitted highlighting some existing pain/confusion users experience as they migrate to 3.x.

Discussed in slack briefly

Are you willing to submit a PR?

• Yes I am willing to submit a PR!

Code of Conduct

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

[nrnavaneet]

Hey!
I’d like to work on this issue and submit a PR. Could you please let me know if there are any specific design expectations or technical details I should keep in mind while implementing this? Also, lmk if it’s okay for me to proceed with creating the PR.
Thanks!

[odaneau-astro]

I explored making this environment variable available again in AF 3, but I have not opened a PR for it yet.
Due to the new Chakra UI library, text colors, button hover/click effects, and other contextual colors are assigned using a scale from 50 to 950. See https://chakra-ui.com/docs/theming/colors
If we want to allow custom user input, we need a complete palette. It would be much simpler to ask the user to provide a single color, and then we compute the rest.
To generate it dynamically, we would have to normalize the input color (lighten/darken it) and generate the scale.
Google already does something similar with Material UI. See here: https://m3.material.io/styles/color/dynamic/choosing-a-source
See this JS playground for how it could work: https://playcode.io/2464307

[nrnavaneet]

Do u wanna contribute ? Or is it fine if i work on it. Not a problem if u wanna work on it :), Ill find a different issue

[odaneau-astro]

Feel free to work on it. I won't have time to contribute in the next few weeks.

[nrnavaneet]

Alright !, Thank you :)

[muhammadhaseebiqbal-dev]

@nrnavaneet are u working on it. If no do let me know. I'm new to this. i also wanna contribute

[nrnavaneet]

Go for it !