Rui Fan created FLINK-39353:
-------------------------------
Summary: Dark mode text is nearly unreadable after recent Flink
website rebuild
Key: FLINK-39353
URL: https://issues.apache.org/jira/browse/FLINK-39353
Project: Flink
Issue Type: Bug
Components: Project Website
Reporter: Rui Fan
Assignee: Rui Fan
Attachments: image-2026-03-30-12-27-01-610.png,
image-2026-03-30-12-27-26-610.png, image-2026-03-30-12-28-14-663.png
h2. Problem
The Apache Flink website ([https://flink.apache.org/]) is nearly unreadable in
dark mode (prefers-color-scheme: dark). Specifically:
* The "Flink Capabilities" section: headings and body text (e.g. "Exactly-once
state consistency") are dark gray on a near-black background, barely visible
* The "Use Cases" section has the same issue
* Blog card text also has severely reduced contrast
The website was still displaying correctly as of March 15, 2026 ([Web Archive
snapshot|https://web.archive.org/web/20260315191034/https://flink.apache.org/]).
h2. Screenshots
!image-2026-03-30-12-27-26-610.png|width=1173,height=695!
h2. !image-2026-03-30-12-28-14-663.png|width=1205,height=714!
h2. Root Cause
Commit {{6bdf6191e}} ("Add FlinkCDC v3.6.0 and Rebuild website", March 30,
2026) rebuilt the website, which regenerated the compiled CSS file. The CSS
asset hash changed from {{book.min.22eceb...css}} to
{{{}book.min.460d94...css{}}}.
The new CSS lost the Flink custom dark-mode theme variables. Comparing the two
versions:
*Old CSS (working)* — dark mode variables were properly compiled into
{{{}:root{}}}:
* {{--body-font-color: white}}
* {{--body-background: #232F3E}}
* {{--color-link: #44B9D6}}
*New CSS (broken)* — {{:root}} only has generic defaults:
* {{--body-font-color: black}}
* {{--body-background: white}}
* Dark mode overrides from {{_variables.scss}} ({{{}@mixin theme-dark{}}}) are
missing entirely
This is likely caused by an update to the Hugo theme submodule
({{{}docs/themes/book{}}}, pointing to
[hugo-book|https://github.com/alex-shpak/hugo-book]). The newer theme version
changed how custom SCSS assets are compiled, causing Flink's custom style
overrides in {{docs/assets/_variables.scss}} to no longer be included in the
output.
h2. Suggested Fix
# Check and pin the {{hugo-book}} submodule to the previously working commit,
OR
# Update {{docs/assets/_variables.scss}} to match the new theme's expected
SCSS import structure
# Verify dark mode rendering before deploying future rebuilds
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
