fix(topology): Fix VM node icon styling in dark mode#6977
fix(topology): Fix VM node icon styling in dark mode#6977debsmita1 merged 2 commits intobackstage:mainfrom
Conversation
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
its-mitesh-kumar
requested review from
a team,
HusneShabbir,
christoph-jerolimov,
ciiay,
debsmita1,
divyanshiGupta,
jrichter1,
karthikjeeyar,
logonoff,
lokanandaprabhu and
rohitkrai03
as code owners
its-mitesh-kumar
requested review from
awanlin
and removed request for
a team
Changed Packages
|
| const useStyles = makeStyles({ | ||
| kubevirtbg: { | ||
| fill: 'var(--pf-t--color--white)', | ||
| fill: 'var(--pf-t--global--background--color--primary--default)', |
There was a problem hiding this comment.
Use as the color for icons that are placed on an inverse background color
| fill: 'var(--pf-t--global--background--color--primary--default)', | |
| fill: 'var(--pf-t--global--icon--color--inverse)', |
There was a problem hiding this comment.
@logonoff I'd prefer to keep var(--pf-t--global--background--color--primary--default) since this is being used for a background fill on the <rect> element, not an icon color.
--pf-t--global--icon--color--inverse is semantically designed for icon colors, not background fills. Using an icon color token for a background rectangle could confuse future maintainers.
Cc: @debsmita1
There was a problem hiding this comment.
Ah, I misread the style. Background color makes sense then
HusneShabbir
left a comment
HusneShabbir
left a comment
There was a problem hiding this comment.
/lgtm
Screen.Recording.2026-01-21.at.5.57.13.PM.mov
| const useStyles = makeStyles({ | ||
| kubevirtbg: { | ||
| fill: 'var(--pf-t--color--white)', | ||
| fill: 'var(--pf-t--global--background--color--primary--default)', |
There was a problem hiding this comment.
Ah, I misread the style. Background color makes sense then
5 participants
Problem
The virtual machine node icons in the topology plugin were using a static white background color (
var(--pf-t--color--white)) that didn't adapt to dark theme.Changes
VMNode.tsxto use theme-compatible background color instead of static whiteUI before changes
UI after changes
Dark Theme
✔️ Checklist
Signed-off-byline in the message. (more info)