Customizing the UI

Customizing state colours

New in version 1.10.11.

To change the colors for TaskInstance/DagRun State in the Airflow Webserver, perform the following steps:

  1. Add the following contents to file. Change the colors to whatever you would like.

        "deferred": "mediumpurple",
        "failed": "firebrick",
        "queued": "darkgray",
        "removed": "lightgrey",
        "restarting": "violet",
        "running": "#01FF70",
        "scheduled": "tan",
        "skipped": "darkorchid",
        "success": "#2ECC40",
        "up_for_reschedule": "turquoise",
        "up_for_retry": "yellow",
        "upstream_failed": "orange",

    See Configuring local settings for details on how to configure local settings.

  2. Restart Airflow Webserver.



../_images/dags-page-old.png ../_images/graph-view-old.png ../_images/tree-view-old.png


../_images/dags-page-new.png ../_images/graph-view-new.png ../_images/tree-view-new.png


See Modules Management for details on how Python and Airflow manage modules.

Customizing DAG UI Header and Airflow Page Titles

Airflow now allows you to customize the DAG home page header and page title. This will help distinguish between various installations of Airflow or simply amend the page text.


The custom title will be applied to both the page header and the page title.

To make this change, simply:

  1. Add the configuration option of instance_name under the [webserver] section inside airflow.cfg:


instance_name = "DevEnv"
  1. Alternatively, you can set a custom title using the environment variable:








From version 2.3.0 you can include markup in instance_name variable for further customization. To enable, set instance_name_has_markup under the [webserver] section inside airflow.cfg to True.

Add custom alert messages on the dashboard

New in version 2.2.0.

Extra alert messages can be shown on the UI dashboard. This can be useful for warning about setup issues or announcing changes to end users. The following example shows how to add a simple alert message:

  1. Add the following contents to file.

    from airflow.www.utils import UIAlert
        UIAlert("Welcome to Airflow"),

    See Configuring local settings for details on how to configure local settings.

  2. Restart Airflow Webserver, and you should now see:


You can also control the category of the alert message as well the roles it should be shown to. For example, to show a warning message to users in the User role:

    UIAlert("Airflow update happening next week", category="warning", roles=["User"]),

HTML can also be included in the messages, though care must be taken to ensure it is done safely. If your message is safe, you can simply set html=True, otherwise use string formatting. For more information, see String Formatting in the MarkupSafe docs.

    UIAlert('Visit <a href=""></a>', html=True),
    UIAlert(Markup("Welcome <em>%s</em>") % ("John & Jane Doe",)),

Was this entry helpful?