[
https://issues.apache.org/jira/browse/FLINK-39353?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Rui Fan updated FLINK-39353:
----------------------------
Description:
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!
was:
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
> 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
> Priority: Major
> 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!
>
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
