[SPARK-55853][UI] Migrate hardcoded CSS colors to Bootstrap 5 CSS custom properties#54640
Closed
yaooqinn wants to merge 1 commit intoapache:masterfrom
Closed
[SPARK-55853][UI] Migrate hardcoded CSS colors to Bootstrap 5 CSS custom properties#54640yaooqinn wants to merge 1 commit intoapache:masterfrom
yaooqinn wants to merge 1 commit intoapache:masterfrom
Conversation
…tom properties Replace hardcoded hex colors and rgb() values in CSS/JS files with Bootstrap 5 CSS custom properties so the Spark UI automatically adapts to `data-bs-theme="dark"`. ### Changes - **webui.css**: Replaced ~27 hardcoded color references with BS5 variables (`--bs-link-color`, `--bs-body-color`, `--bs-border-color`, etc.) and custom `--spark-*` variables for progress bars and thread dump hover. - **spark-dag-viz.css**: Replaced ~21 hardcoded colors with BS5 variables and custom `--spark-dag-*` variables for DAG visualization nodes, clusters, and edges. - **timeline-view.css**: Replaced ~33 hardcoded colors with BS5 variables and custom `--spark-timeline-*` / `--spark-*-proportion` variables for timeline status indicators and task proportion bars. - **spark-sql-viz.css**: Replaced ~7 hardcoded colors with BS5 variables and custom `--spark-sql-*` variables for SQL visualization nodes, edges, and selection highlights. - **table.js**: Replaced `#f9f9f9`/`#ffffff` striping colors with `var(--bs-tertiary-bg)`/`var(--bs-body-bg)`. - **historypage.js**: Replaced `#fff` background color with `var(--bs-body-bg)`. All visualization-specific colors are defined as custom CSS variables with both light and dark mode variants via `:root, [data-bs-theme="light"]` and `[data-bs-theme="dark"]` blocks. ### What is not changed - Box-shadow `rgba(0,0,0,...)` values (shadows remain dark in both modes) - Decorative arrow colors in scroll buttons (white on colored background) - Minified CSS/JS files - Structured streaming chart colors (D3 series colors work on both backgrounds) Closes #SPARK-55853 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
dongjoon-hyun
approved these changes
Mar 5, 2026
allisonwang-db
approved these changes
Mar 5, 2026
Contributor
allisonwang-db
left a comment
allisonwang-db
left a comment
There was a problem hiding this comment.
Enables future dark mode support
Very excited for this!
Member
Author
|
Thank you @dongjoon-hyun @allisonwang-db, merged to master |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changes were proposed in this pull request?
Replace hardcoded hex colors and rgb() values in CSS/JS files with Bootstrap 5 CSS custom properties so the Spark UI automatically adapts to
data-bs-theme="dark".Why are the changes needed?
The Spark UI currently uses hardcoded color values throughout its CSS and JS files. To support dark mode via Bootstrap 5's
data-bs-themeattribute, these colors need to use CSS custom properties that automatically adapt.Does this PR introduce any user-facing change?
No visual change in light mode. Enables future dark mode support by making all colors theme-aware.
How was this patch tested?
./dev/lint-jspasses./build/sbt core/compile sql/compilesucceeds:rootblocks have been replacedWas this patch authored or co-authored using generative AI tooling?
Yes, GitHub Copilot CLI was used.