Add theme config

[Zinkue]

closes: #53443 related: #56854

Enables the personalization of Chakra's UI theme via theme configuration property Currently only the brand color palette can be customized. Modifying the brand color palette you also modify the navbar/sidebar.

Provided a how-to-guide for customizing UI theme.

Screenshots

Input green from theme.ts

AIRFLOW__API__THEME='{
  "tokens": {
    "colors": {
      "brand": {
        "50": { "value": "oklch(0.982 0.018 155.826)" },
        "100": { "value": "oklch(0.962 0.044 156.743)" },
        "200": { "value": "oklch(0.925 0.084 155.995)" },
        "300": { "value": "oklch(0.75 0.18 153.0)" },
        "400": { "value": "oklch(0.625 0.209 150.0)" },
        "500": { "value": "oklch(0.528 0.219 149.579)" },
        "600": { "value": "oklch(0.47 0.20 149.0)" },
        "700": { "value": "oklch(0.40 0.16 149.5)" },
        "800": { "value": "oklch(0.448 0.119 151.328)" },
        "900": { "value": "oklch(0.393 0.095 152.535)" },
        "950": { "value": "oklch(0.266 0.065 152.934)" }
      }
    }
  }
}'

Output

Input yellow from theme.ts

AIRFLOW__API__THEME='{
  "tokens": {
    "colors": {
      "brand": {
        "50": { "value": "oklch(0.987 0.026 102.212)" },
        "100": { "value": "oklch(0.973 0.071 103.193)" },
        "200": { "value": "oklch(0.945 0.129 101.54)" },
        "300": { "value": "oklch(0.905 0.182 98.111)" },
        "400": { "value": "oklch(0.852 0.199 91.936)" },
        "500": { "value": "oklch(0.795 0.184 86.047)" },
        "600": { "value": "oklch(0.681 0.162 75.834)" },
        "700": { "value": "oklch(0.554 0.135 66.442)" },
        "800": { "value": "oklch(0.476 0.114 61.907)" },
        "900": { "value": "oklch(0.421 0.095 57.708)" },
        "950": { "value": "oklch(0.286 0.066 53.813)" },
      },
    }
  }
}'

Output

Input red from theme.ts

AIRFLOW__API__THEME='{
  "tokens": {
    "colors": {
      "brand": {
        "50": { "value": "oklch(0.971 0.013 17.38)" },
        "100": { "value": "oklch(0.936 0.032 17.717)" },
        "200": { "value": "oklch(0.885 0.062 18.334)" },
        "300": { "value": "oklch(0.808 0.114 19.571)" },
        "400": { "value": "oklch(0.704 0.191 22.216)" },
        "500": { "value": "oklch(0.637 0.237 25.331)" },
        "600": { "value": "oklch(0.577 0.245 27.325)" },
        "700": { "value": "oklch(0.505 0.213 27.518)" },
        "800": { "value": "oklch(0.444 0.177 26.899)" },
        "900": { "value": "oklch(0.396 0.141 25.723)" },
        "950": { "value": "oklch(0.258 0.092 26.042)" }
      }
    }
  }
}'

Output

---

^ Add meaningful description above Read the Pull Request Guidelines for more information. In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed. In case of a new dependency, check compliance with the ASF 3rd Party License Policy. In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[Zinkue]

About the palette generator for us to make a suggestion.

I found this ones:

• https://www.tints.dev/
• https://www.tailwindshades.com/

Played a little bit with them and both looks fine to me

[Zinkue]

Link to previous discussion/PR: #56854

[marcosmartinezfco]

Amazing feature, is this expected to be released in version 3.2 or earlier?

[pierrejeambrun]

Amazing feature, is this expected to be released in version 3.2 or earlier?

This is a feature and will be in next minor release (3.2.0), we follow semver.

[marcosmartinezfco]

Amazing feature, is this expected to be released in version 3.2 or earlier?

This is a feature and will be in next minor release (3.2.0), we follow semver.

Sweet, thanks so much.