Skip to content

Conversation

@shivaam
Copy link
Contributor

@shivaam shivaam commented Jan 21, 2026

Fix dark theme not being applied to FAB Security pages (Users, Roles, etc.)

When dark theme is enabled in the main Airflow UI, the Security menu pages
displayed in light theme because they render in an iframe from the FAB provider.

Root cause:

  1. runtime.js was missing from the HTML template - this prevented webpack
    bundles from executing (webpack's runtimeChunk: 'single' config requires
    the runtime to be loaded first)
  2. No code was reading the theme preference from localStorage

Changes:

  • Add runtime.js to main.html template before other webpack bundles
  • Add applyColorScheme() function in main.js to read theme from localStorage
    and set data-color-scheme attribute on document root

Fixes #60541

@shivaam shivaam requested a review from vincbeck as a code owner January 21, 2026 22:07
@boring-cyborg
Copy link

boring-cyborg bot commented Jan 21, 2026

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide (https://github.com/apache/airflow/blob/main/contributing-docs/README.rst)
Here are some useful points:

  • Pay attention to the quality of your code (ruff, mypy and type annotations). Our prek-hooks will help you with that.
  • In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example DAG that shows how users should use it.
  • Consider using Breeze environment for testing locally, it's a heavy docker but it ships with a working Airflow and a lot of integrations.
  • Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
  • Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
  • Be sure to read the Airflow Coding style.
  • Always keep your Pull Requests rebased, otherwise your build might fail due to changes not related to your commits.
    Apache Airflow is a community-driven project and together we are making it better 🚀.
    In case of doubts contact the developers at:
    Mailing List: dev@airflow.apache.org
    Slack: https://s.apache.org/airflow-slack

@shivaam
Copy link
Contributor Author

shivaam commented Jan 21, 2026

airflow_ui_bug.mov

Here is a recording using breeze.

Copy link
Contributor

@eladkal eladkal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

Copy link
Contributor

@vincbeck vincbeck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really really nice!

@vincbeck
Copy link
Contributor

Static checks are failing

@shivaam shivaam force-pushed the fix-fab-dark-theme branch from da7c5d8 to 166e75b Compare January 24, 2026 02:59
@shivaam
Copy link
Contributor Author

shivaam commented Jan 24, 2026

I have fixed the issue. The problem was that the hashes were not updated for the js changes as I was not able to run pre-commit hook locally earlier. I am able to do it now.

@shivaam
Copy link
Contributor Author

shivaam commented Jan 24, 2026

The compile-fab-assets pre-commit hook is failing in CI due to a hash mismatch between macOS and Linux environments.

Issue:

✅ All checks pass locally on macOS (see screenshot below)
❌ CI fails because it generates a different hash for the same source files
Probable Root Cause: The hash is computed from source files in providers/fab/www/, and differs between macOS

CI Error:

Compile FAB provider assets......................................................Failed

  • hook id: compile-fab-assets
  • files were modified by this hook

Old hash: e73e02e0b7eafdb1a6d3e8d32d4077bcddf48819650d166b3c40e938ad08a9bc
New hash: 7c7b2ff608159b9ea6048dfdd0dd7ccc0041fd362d54324cc869948585e4cc69
Solution: I've updated providers/fab/www-hash.txt with the CI-generated hash (7c7b2ff608159b9ea6048dfdd0dd7ccc0041fd362d54324cc869948585e4cc69) to match the Linux environment. This should hopefully resolve the static check failure.

Local verification: Local checks passing

Ready for CI approval to verify the fix. 🙏

@eladkal eladkal merged commit 91159ed into apache:main Jan 24, 2026
71 checks passed
@boring-cyborg
Copy link

boring-cyborg bot commented Jan 24, 2026

Awesome work, congrats on your first merged pull request! You are invited to check our Issue Tracker for additional contributions.

@shivaam shivaam deleted the fix-fab-dark-theme branch January 24, 2026 19:51
suii2210 pushed a commit to suii2210/airflow that referenced this pull request Jan 26, 2026
* fix(fab): Add dark theme support for FAB Security pages

Fixes apache#60541
shreyas-dev pushed a commit to shreyas-dev/airflow that referenced this pull request Jan 29, 2026
* fix(fab): Add dark theme support for FAB Security pages

Fixes apache#60541
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI Dark theme broken

3 participants