[jira] [Created] (FLINK-39353) Dark mode text is nearly unreadable after recent Flink website rebuild

["Rui Fan (Jira)" <ji...@apache.org>]

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)