OCPBUGS-65808: Fix PatternFly dark theme colors for charts and form inputs #15951

sg00dwin · 2026-01-27T00:02:57Z

Summary

Fixes dark theme color regressions affecting donut charts and form input fields in OpenShift Console 4.18.

Issues Fixed

Donut chart text illegible in dark theme - Text was dark on dark background
Text input fields using light theme colors in dark theme - White backgrounds instead of dark gray
Disabled input fields incorrect in dark theme - Wrong background and text colors

Changes Made

File: public/vendor.scss

Added SCSS import: @import '~@patternfly/patternfly/patternfly-charts-theme-dark';
Ensures dark theme loads after base chart styles via SCSS compilation order

File: public/components/app.jsx

Removed JavaScript import of patternfly-charts-theme-dark.css
Eliminates webpack bundling order issues

File: public/style/ancillary/_patternfly4.scss

Updated dark theme override variables (lines 429-432):
- --pf-c-form-control--BackgroundColor → --pf-v5-c-form-control--BackgroundColor
- --pf-c-form-control--disabled--Color → --pf-v5-c-form-control--disabled--Color
- --pf-c-form-control--disabled--BackgroundColor → --pf-v5-c-form-control--disabled--BackgroundColor
- --pf-c-form-control--readonly--BackgroundColor → --pf-v5-c-form-control--readonly--BackgroundColor
Corrected base definition values (lines 140, 144):
- Disabled background: --disabled-color--300 → --disabled-color--200
- Readonly background: --disabled-color--300 → --disabled-color--200

Note: Border color variables intentionally retain PF4 namespace (--pf-c-form-control--Border*) as they reference PF4 global variables (--pf-global--*).

Visual Comparison

Screenshots show before (right) and after (left) of the same screens in dark theme:

ResourceQuota Details - Donut Charts
- Before: (dark text on dark background)
- After: (light text on dark background)

Deployment Environment - Form Inputs
- Before: Input fields with no background color and disabled input fields with white/light gray backgrounds
- After: Input fields with proper dark theme colors and correct disabled state styling

List page search input
- Before: Search input field has incorrect borders and background colors
- After: Search input field has proper borders and background colors

Additional notes

Further test comparisons screenshots (including light theme variations to check for regressions)
Patternfly Text input variations for color references.
https://v5-archive.patternfly.org/components/forms/text-input
This bug does not effect 4.19 or newer versions

Testing

Verified donut chart text is readable in dark theme
Verified text input backgrounds use dark theme colors
Verified disabled input fields show correct colors
Verified namespace search input borders render correctly
Verified light theme unchanged (no regressions)

Corrects CSS variable namespace mismatches and import order issues that prevented dark theme overrides from applying properly to donut charts and form controls. Assisted by: Claude Code

openshift-ci-robot · 2026-01-27T00:03:03Z

@sg00dwin: This pull request references Jira Issue OCPBUGS-65808, which is invalid:

release note text must be set and not match the template OR release note type must be set to "Release Note Not Required". For more information you can reference the OpenShift Bug Process.
expected Jira Issue OCPBUGS-65808 to depend on a bug targeting a version in 4.19.0, 4.19.z and in one of the following states: VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), CLOSED (DONE-ERRATA), but no dependents were found

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Summary

Fixes dark theme color regressions affecting donut charts and form input fields in OpenShift Console 4.18.

Issues Fixed

Donut chart text illegible in dark theme - Text was dark on dark background

Text input fields using light theme colors in dark theme - White backgrounds instead of dark gray

Disabled input fields incorrect in dark theme - Wrong background and text colors

Changes Made

File: public/vendor.scss

Added SCSS import: @import '~@patternfly/patternfly/patternfly-charts-theme-dark';

Ensures dark theme loads after base chart styles via SCSS compilation order

File: public/components/app.jsx

Removed JavaScript import of patternfly-charts-theme-dark.css

Eliminates webpack bundling order issues

File: public/style/ancillary/_patternfly4.scss

Updated dark theme override variables (lines 429-432):

--pf-c-form-control--BackgroundColor → --pf-v5-c-form-control--BackgroundColor

--pf-c-form-control--disabled--Color → --pf-v5-c-form-control--disabled--Color

--pf-c-form-control--disabled--BackgroundColor → --pf-v5-c-form-control--disabled--BackgroundColor

--pf-c-form-control--readonly--BackgroundColor → --pf-v5-c-form-control--readonly--BackgroundColor

Corrected base definition values (lines 140, 144):

Disabled background: --disabled-color--300 → --disabled-color--200

Readonly background: --disabled-color--300 → --disabled-color--200

Note: Border color variables intentionally retain PF4 namespace (--pf-c-form-control--Border*) as they reference PF4 global variables (--pf-global--*).

Visual Comparison

Screenshots show before (right) and after (left) of the same screens in dark theme:

ResourceQuota Details - Donut Charts

Before: (dark text on dark background)

After: (light text on dark background)

Deployment Environment - Form Inputs

Before: Input fields with white/light gray backgrounds

After: Input fields with proper dark theme colors and correct disabled state styling

List page search input

Before: Search input field has incorrect borders and background colors

After: Search input field has proper borders and background colors

Additional notes

Further test comparisons screenshots (including light theme variations to check for regressions)

Patternfly Text input variations for color references.
https://v5-archive.patternfly.org/components/forms/text-input

Testing

Verified donut chart text is readable in dark theme

Verified text input backgrounds use dark theme colors

Verified disabled input fields show correct colors

Verified namespace search input borders render correctly

Verified light theme unchanged (no regressions)

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

coderabbitai · 2026-01-27T00:03:10Z

Important

Review skipped

Auto reviews are limited based on label configuration.

🚫 Review skipped — only excluded labels are configured. (1)

do-not-merge/work-in-progress

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

🔍 Trigger a full review

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

sg00dwin · 2026-01-27T00:12:00Z

/jira refresh

openshift-ci-robot · 2026-01-27T00:12:04Z

@sg00dwin: This pull request references Jira Issue OCPBUGS-65808, which is invalid:

release note text must be set and not match the template OR release note type must be set to "Release Note Not Required". For more information you can reference the OpenShift Bug Process.
expected Jira Issue OCPBUGS-65808 to depend on a bug targeting a version in 4.19.0, 4.19.z and in one of the following states: VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), CLOSED (DONE-ERRATA), but no dependents were found

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

Details

In response to this:

/jira refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

sg00dwin · 2026-01-27T00:14:08Z

/jira refresh

openshift-ci-robot · 2026-01-27T00:14:12Z

@sg00dwin: This pull request references Jira Issue OCPBUGS-65808, which is invalid:

release note text must be set and not match the template OR release note type must be set to "Release Note Not Required". For more information you can reference the OpenShift Bug Process.
expected Jira Issue OCPBUGS-65808 to depend on a bug targeting a version in 4.19.0, 4.19.z and in one of the following states: VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), CLOSED (DONE-ERRATA), but no dependents were found

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

Details

In response to this:

/jira refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

sg00dwin · 2026-01-27T00:25:52Z

/jira refresh

openshift-ci-robot · 2026-01-27T00:26:00Z

@sg00dwin: This pull request references Jira Issue OCPBUGS-65808, which is valid. The bug has been moved to the POST state.

7 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target version (4.18.z) matches configured target version for branch (4.18.z)
bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, POST)
release note text is set and does not match the template
dependent bug Jira Issue OCPBUGS-74475 is in the state Closed (Done), which is one of the valid states (VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), CLOSED (DONE-ERRATA))
dependent Jira Issue OCPBUGS-74475 targets the "4.19.0" version, which is one of the valid target versions: 4.19.0, 4.19.z
bug has dependents

Requesting review from QA contact:
/cc @yapei

Details

In response to this:

/jira refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

sg00dwin · 2026-01-27T00:26:50Z

/label backport-risk-assessed

sg00dwin · 2026-01-27T00:32:04Z

/assign @yanpzhan for verification

openshift-ci · 2026-01-27T00:32:09Z

@sg00dwin: GitHub didn't allow me to assign the following users: for, verification.

Note that only openshift members with read permissions, repo collaborators and people who have commented on this issue/PR can be assigned. Additionally, issues/PRs can only have 10 assignees at the same time.
For more information please see the contributor guide

Details

In response to this:

/assign @yanpzhan for verification

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

openshift-ci-robot · 2026-01-27T00:33:08Z

@sg00dwin: This pull request references Jira Issue OCPBUGS-65808, which is valid.

7 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target version (4.18.z) matches configured target version for branch (4.18.z)
bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)
release note text is set and does not match the template
dependent bug Jira Issue OCPBUGS-74475 is in the state Closed (Done), which is one of the valid states (VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), CLOSED (DONE-ERRATA))
dependent Jira Issue OCPBUGS-74475 targets the "4.19.0" version, which is one of the valid target versions: 4.19.0, 4.19.z
bug has dependents

Requesting review from QA contact:
/cc @yapei

Details

In response to this:

Summary

Fixes dark theme color regressions affecting donut charts and form input fields in OpenShift Console 4.18.

Issues Fixed

Donut chart text illegible in dark theme - Text was dark on dark background

Text input fields using light theme colors in dark theme - White backgrounds instead of dark gray

Disabled input fields incorrect in dark theme - Wrong background and text colors

Changes Made

File: public/vendor.scss

Added SCSS import: @import '~@patternfly/patternfly/patternfly-charts-theme-dark';

Ensures dark theme loads after base chart styles via SCSS compilation order

File: public/components/app.jsx

Removed JavaScript import of patternfly-charts-theme-dark.css

Eliminates webpack bundling order issues

File: public/style/ancillary/_patternfly4.scss

Updated dark theme override variables (lines 429-432):

--pf-c-form-control--BackgroundColor → --pf-v5-c-form-control--BackgroundColor

--pf-c-form-control--disabled--Color → --pf-v5-c-form-control--disabled--Color

--pf-c-form-control--disabled--BackgroundColor → --pf-v5-c-form-control--disabled--BackgroundColor

--pf-c-form-control--readonly--BackgroundColor → --pf-v5-c-form-control--readonly--BackgroundColor

Corrected base definition values (lines 140, 144):

Disabled background: --disabled-color--300 → --disabled-color--200

Readonly background: --disabled-color--300 → --disabled-color--200

Note: Border color variables intentionally retain PF4 namespace (--pf-c-form-control--Border*) as they reference PF4 global variables (--pf-global--*).

Visual Comparison

Screenshots show before (right) and after (left) of the same screens in dark theme:

ResourceQuota Details - Donut Charts

Before: (dark text on dark background)

After: (light text on dark background)

Deployment Environment - Form Inputs

Before: Input fields with white/light gray backgrounds

After: Input fields with proper dark theme colors and correct disabled state styling

List page search input

Before: Search input field has incorrect borders and background colors

After: Search input field has proper borders and background colors

Additional notes

Further test comparisons screenshots (including light theme variations to check for regressions)

Patternfly Text input variations for color references.
https://v5-archive.patternfly.org/components/forms/text-input

This bug does not effect 4.19 or newer versions

Testing

Verified donut chart text is readable in dark theme

Verified text input backgrounds use dark theme colors

Verified disabled input fields show correct colors

Verified namespace search input borders render correctly

Verified light theme unchanged (no regressions)

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

yanpzhan · 2026-01-27T12:20:37Z

Checked on cluster launched against the pr, the dark theme colors for search input, charts and form input are correct. There is not regression issue.

/verified by yanpzhan

openshift-ci-robot · 2026-01-27T12:20:49Z

@yanpzhan: This PR has been marked as verified by yanpzhan.

Details

In response to this:

Checked on cluster launched against the pr, the dark theme colors for search input, charts and form input are correct. There is not regression issue.

/verified by yanpzhan

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

rhamilto · 2026-01-27T13:24:41Z

/retest

rhamilto · 2026-01-27T20:12:30Z

/lgtm
/retest

openshift-ci · 2026-01-27T20:14:01Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: rhamilto, sg00dwin

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [rhamilto]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

rhamilto · 2026-01-27T20:40:38Z

/retest

openshift-ci-robot · 2026-01-27T21:33:12Z

/retest-required

Remaining retests: 0 against base HEAD 1a6d149 and 2 for PR HEAD f6f5ddb in total

sg00dwin · 2026-01-29T15:05:29Z

/test e2e-gcp-console

sg00dwin · 2026-01-29T19:27:22Z

/test e2e-gcp-console

openshift-ci · 2026-01-29T23:09:26Z

@sg00dwin: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-gcp-console	`f6f5ddb`	link	true	`/test e2e-gcp-console`

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

Fix PatternFly dark theme colors for charts and form inputs

f6f5ddb

Corrects CSS variable namespace mismatches and import order issues that prevented dark theme overrides from applying properly to donut charts and form controls. Assisted by: Claude Code

openshift-ci-robot added jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. jira/invalid-bug Indicates that a referenced Jira bug is invalid for the branch this PR is targeting. labels Jan 27, 2026

openshift-ci bot requested review from cajieh and rhamilto January 27, 2026 00:03

openshift-ci bot added the component/core Related to console core functionality label Jan 27, 2026

This comment was marked as outdated.

Sign in to view

openshift-ci-robot added jira/valid-bug Indicates that a referenced Jira bug is valid for the branch this PR is targeting. and removed jira/invalid-bug Indicates that a referenced Jira bug is invalid for the branch this PR is targeting. labels Jan 27, 2026

openshift-ci bot requested a review from yapei January 27, 2026 00:26

openshift-ci bot added the backport-risk-assessed Indicates a PR to a release branch has been evaluated and considered safe to accept. label Jan 27, 2026

openshift-ci bot assigned sanketpathak, XiyunZhao, yanpzhan and yapei Jan 27, 2026

sg00dwin assigned rhamilto Jan 27, 2026

openshift deleted a comment from openshift-ci-robot Jan 27, 2026

openshift-ci-robot added the verified Signifies that the PR passed pre-merge verification criteria label Jan 27, 2026

openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Jan 27, 2026

openshift-ci bot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jan 27, 2026

OCPBUGS-65808: Fix PatternFly dark theme colors for charts and form inputs #15951

Are you sure you want to change the base?

OCPBUGS-65808: Fix PatternFly dark theme colors for charts and form inputs #15951

Conversation

sg00dwin commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Issues Fixed

Changes Made

Visual Comparison

Testing

Uh oh!

openshift-ci-robot commented Jan 27, 2026

Summary

Issues Fixed

Changes Made

Visual Comparison

Testing

Uh oh!

coderabbitai bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

sg00dwin commented Jan 27, 2026

Uh oh!

openshift-ci-robot commented Jan 27, 2026

Uh oh!

sg00dwin commented Jan 27, 2026

Uh oh!

openshift-ci-robot commented Jan 27, 2026

Uh oh!

This comment was marked as outdated.

sg00dwin commented Jan 27, 2026

Uh oh!

openshift-ci-robot commented Jan 27, 2026

Uh oh!

sg00dwin commented Jan 27, 2026

Uh oh!

sg00dwin commented Jan 27, 2026

Uh oh!

openshift-ci bot commented Jan 27, 2026

Uh oh!

openshift-ci-robot commented Jan 27, 2026

Summary

Issues Fixed

Changes Made

Visual Comparison

Testing

Uh oh!

yanpzhan commented Jan 27, 2026

Uh oh!

openshift-ci-robot commented Jan 27, 2026

Uh oh!

rhamilto commented Jan 27, 2026

Uh oh!

rhamilto commented Jan 27, 2026

Uh oh!

openshift-ci bot commented Jan 27, 2026

Uh oh!

rhamilto commented Jan 27, 2026

Uh oh!

openshift-ci-robot commented Jan 27, 2026

Uh oh!

sg00dwin commented Jan 29, 2026

Uh oh!

sg00dwin commented Jan 29, 2026

Uh oh!

openshift-ci bot commented Jan 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

sg00dwin commented Jan 27, 2026 •

edited

Loading

coderabbitai bot commented Jan 27, 2026 •

edited

Loading