fix(colors): Replace hardcoded colors with theme tokens#6040
Open
dan-rukas wants to merge 7 commits into
Open
Conversation
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
❌ Deploy Preview for ohif-dev failed. Why did it fail? →
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
Replaces hardcoded hex color values across CSS files, icon SVGs, and usage sites so the UI responds to theme changes. Previously, ~40 hex values were frozen to the default OHIF dark palette regardless of any theme override.
32 files changed — 126 insertions, 129 deletions.
currentColor,hsl(var(--accent)), ortransparentChanges & Results
CSS / Component Changes (6 files)
LayoutSelector.tsx — Grid cell unhovered state
bg-[#04225b]→bg-accentOnboarding.css — Shepherd.js onboarding buttons
!bg-[#348cfd]→!bg-primary!text-[#348cfd]→!text-primarystyles.css — Custom scrollbar
scrollbar-color: #173239→hsl(var(--neutral) / 0.5)(matches ScrollArea and ImageScrollbar convention)background-color: #041c4athat overrode existing@apply bg-popoveron webkit scrollbar thumbProgressLoadingBar.css — Loading bar track
background-color: #091731→hsl(var(--muted))DicomTagBrowser.css — DICOM tag table
color: #ffffff→hsl(var(--foreground))border-top: 1px solid #ddd(cleaner without row separators)color: '#20A5D6'(quoted hex was invalid CSS — never applied)colorPickerDialog.css — Segmentation color picker
background: #090c29→transparent(inherits from parent dialog)box-shadow: noneto remove react-color's default drop shadowIcon SVG Changes (19 files)
A. Single-color →
currentColor(9 files, 10 icons)One hex color per icon replaced with
currentColor. Icons now inherit parent text color.stroke="#5ACCE6"currentColorfill="#FFFFFF"currentColorfill="#FFFFFF"currentColorstroke="#5ACCE6"currentColorstroke="#358CFD"×11currentColorstroke="#348CFD"currentColorstroke="#348CFD"currentColorstroke="#348CFD"×5currentColorfill="#FFFFFF"currentColorstroke="#348CFD"currentColorB. Two-tone →
currentColor+ contrast marks stay (5 files)Theme-colored shape becomes
currentColor. Internal contrast marks (#FFF,#000) stay hardcoded — they provide the visual detail against the colored background.fill="#B70D11"→currentColorstroke="#FFF"(exclamation mark)fill="#0944B3"→currentColorstroke="#FFF"(info symbol)fill="#F3DC43"+stroke="#F3DC43"→currentColorstroke="#000"(exclamation)stroke="#5ACCE6"+fill="#5ACCE6"→currentColorstroke="#000"(checkmark)fill="#348CFD"(ring, 25% opacity) +fill="#5ACCE6"(arc) → bothcurrentColorLoadingSpinner also fixes a minor issue: destructures
classNamefrom props to avoidundefinedin the className template string.C. Layout thumbnails →
hsl(var(--accent))(1 file, 4 icons)Active pane fill in layout selector thumbnails. Uses
--accentCSS variable directly as an SVG fill attribute.fill="#263A71"→fill="hsl(var(--accent))"fill="#263A71"→fill="hsl(var(--accent))"fillfrom<g>to child<rect>, →fill="hsl(var(--accent))"fill="#263A71"→fill="hsl(var(--accent))"Why
hsl(var(--accent))instead ofcurrentColor: these thumbnails have both outlined panes (stroke) and one filled pane (the active/highlighted one).currentColorwould make the filled pane match the stroke color. The accent token gives it a distinct highlight that tracks the theme.D. Status badge dark fills →
transparent(3 files)Status badges had
fill="#0D0E24"(near-black) as a background fill inside their ring — the old dark theme color baked into the icon. Replaced withtransparentso the badge becomes a ring-only indicator that works on any background.fill="#0D0E24"→transparent,stroke="#7BB2CE"→currentColorfill="#0D0E24"→transparent,stroke="#7BB2CE"→currentColorfill="#0D0E24"→transparent(stroke was alreadycurrentColor)E. Tools gear →
hsl(var(--primary))(1 file, 2 icons)The gear icon on ToolLayout and ToolLayoutDefault uses
--primaryto stay visually distinct from the grid lines in the same icon.stroke="#348CFD"→stroke="hsl(var(--primary))"stroke="#348CFD"→stroke="hsl(var(--primary))"F. Helpers →
hsl(var(--accent))+currentColor(1 file, 3 icons)Segmentation helper icons (HelperCombineSubtract, HelperCombineIntersect, HelperCombineAdd) had three types of hardcoded color:
fill="#1A3F7E"(overlap region)fill="hsl(var(--accent))"stroke="white"(dashed borders)stroke="currentColor"fill="white"(labels)fill="currentColor"Usage-Site Updates (7 files)
Most icons inherit appropriate color from their parent context. These sites needed explicit color classes because the parent doesn't provide the right color.
text-highlighttext-highlighttext-highlighttext-destructivetext-highlighttext-primaryon parent divtext-highlighttext-destructiveNot Changed (intentional)
Legacy-only icons — reverted to hardcoded (components being replaced):
platform/ui/Select.tsxplatform/ui/EmptyStudies.tsxThese were converted then explicitly reverted because their only consumers are legacy
platform/uicomponents that are being phased out. Converting the icons without updating those legacy consumers would break their appearance.Icons already correct (no changes needed):
currentColorIntentionally hardcoded (brand/regulatory marks):
Deferred (separate scope):
Testing
CSS / Component Tests
localStorage.removeItem('shownTours'), refresh, open study → verify button colors/localimport → verify track colorIcon Tests
text-highlight), StatusAlert/Locked/Untracked rings visible, interiors transparenttext-destructive/nonexistent→ 404 illustration in primary blueRegression
text-blackparent)Checklist
PR
semantic-release format and guidelines.
Code
etc.)
Public Documentation Updates
additions or removals.
Tested Environment
Greptile Summary
This PR replaces ~40 hardcoded hex color values across 32 files with CSS theme tokens (
currentColor,hsl(var(--accent)),hsl(var(--primary)),hsl(var(--muted)), etc.) so that icons, scrollbars, and components respond to theme changes instead of being frozen to the OHIF default dark palette.currentColor; two-tone icons keep contrast marks hardcoded (#FFF/#000) while the theme-colored shape usescurrentColor; layout thumbnails and gear icons use explicithsl(var(--))tokens wherecurrentColorwould conflict with adjacent strokes; status badge backgrounds switch from near-black fills totransparent.LoadingSpinneralso fixes a pre-existing bug where a missingclassNameprop would produce\"… animate-spin undefined\"as the class string.text-highlight/text-destructive/text-primaryclasses added at render sites where parent context does not supply the correct inherited color for the newlycurrentColor-aware icons.Confidence Score: 4/5
Safe to merge; all changes are purely visual/presentational and carry no runtime logic risk.
The code changes are consistently correct across all 32 files — hardcoded hex values are replaced with appropriate tokens, the LoadingSpinner className bug is properly fixed, and the decision to use hsl(var(--accent)) rather than currentColor for layout thumbnails and gear strokes is well-justified. The breadth of visual surface touched (19 icon components, 6 CSS files, and 7 usage sites) warrants visual regression confirmation in the default dark theme and any custom theme, but the code itself has no logic errors.
Visual spot-checking of the status badge icons (StatusAlert, StatusLocked, StatusUntracked) and the LoadingSpinner in Sonner toasts is recommended since their appearance changed most significantly.
Important Files Changed
Reviews (1): Last reviewed commit: "Merge branch 'OHIF:master' into fix/hard..." | Re-trigger Greptile