From cbe7955d7e0dd352829f71e762026f4044a05a7d Mon Sep 17 00:00:00 2001
From: Verdan Mahmood <verdan.mahmood@gmail.com>
Date: Wed, 8 Aug 2018 13:47:59 +0200
Subject: [PATCH] [AIRFLOW-2874] Enables FAB's theme support (#3719)

---
 airflow/config_templates/default_webserver_config.py  | 10 ++++++++++
 airflow/www_rbac/templates/appbuilder/baselayout.html | 10 ++++++++--
 airflow/www_rbac/webpack.config.js                    |  6 ++----
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/airflow/config_templates/default_webserver_config.py b/airflow/config_templates/default_webserver_config.py
index ba33d81dec23b..e61c7e1a45cb2 100644
--- a/airflow/config_templates/default_webserver_config.py
+++ b/airflow/config_templates/default_webserver_config.py
@@ -89,3 +89,13 @@
 #    { 'name': 'AOL', 'url': 'http://openid.aol.com/<username>' },
 #    { 'name': 'Flickr', 'url': 'http://www.flickr.com/<username>' },
 #    { 'name': 'MyOpenID', 'url': 'https://www.myopenid.com' }]
+
+# ----------------------------------------------------
+# Theme CONFIG
+# ----------------------------------------------------
+# Flask App Builder comes up with a number of predefined themes
+# that you can use for Apache Airflow.
+# http://flask-appbuilder.readthedocs.io/en/latest/customizing.html#changing-themes
+# Please make sure to remove "navbar_color" configuration from airflow.cfg
+# in order to fully utilize the theme. (or use that property in conjunction with theme)
+# APP_THEME = "bootstrap-theme.css"  # default bootstrap
diff --git a/airflow/www_rbac/templates/appbuilder/baselayout.html b/airflow/www_rbac/templates/appbuilder/baselayout.html
index 6b0c4416a92a0..1653a909d02b2 100644
--- a/airflow/www_rbac/templates/appbuilder/baselayout.html
+++ b/airflow/www_rbac/templates/appbuilder/baselayout.html
@@ -20,8 +20,14 @@
 
 {% block head_css %}
   {{ super() }}
-  {# styleBundle.css file contains the styles from main.css and bootstrap-theme.css #}
-  <link href="{{ url_for_asset('styleBundle.css') }}" rel="stylesheet">
+
+  <link href="{{ url_for_asset('main.css') }}" rel="stylesheet">
+
+  {% if not appbuilder.app_theme %}
+    {# airflowDefaultTheme.css file contains the styles from local bootstrap-theme.css #}
+    <link href="{{ url_for_asset('airflowDefaultTheme.css') }}" rel="stylesheet">
+  {% endif %}
+
   <link rel="icon" type="image/png" href="{{ url_for('static', filename='pin_30.png') }}">
 {% endblock %}
 
diff --git a/airflow/www_rbac/webpack.config.js b/airflow/www_rbac/webpack.config.js
index 46df449a500c9..29b99f408f20e 100644
--- a/airflow/www_rbac/webpack.config.js
+++ b/airflow/www_rbac/webpack.config.js
@@ -38,10 +38,8 @@ const config = {
     clock: `${STATIC_DIR}/js/clock.js`,
     graph: `${STATIC_DIR}/js/graph.js`,
     ganttChartD3v2: `${STATIC_DIR}/js/gantt-chart-d3v2.js`,
-    styleBundle: [
-      `${STATIC_DIR}/css/bootstrap-theme.css`,
-      `${STATIC_DIR}/css/main.css`,
-    ],
+    main: `${STATIC_DIR}/css/main.css`,
+    airflowDefaultTheme : `${STATIC_DIR}/css/bootstrap-theme.css`,
   },
   output: {
     path: BUILD_DIR,