fix(colors): Replace hardcoded black with background color token (#5815)

* Update all black to background * remove --canvas token, keep intentional bg-black * Move bg-black from grid container to individual viewport panes --------- Co-authored-by: Alireza <ar.sedghi@gmail.com>
2026-02-12 13:12:36 -05:00 · 2026-02-12 13:12:36 -05:00 · dbc31a5d4e
commit dbc31a5d4e
parent cfe7efd3ef
39 changed files with 61 additions and 61 deletions
--- a/extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx
+++ b/extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx
@ -16,7 +16,7 @@ type DicomUploadProps = {

 function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): ReactElement {
  const baseClassNames =
-    'min-h-[375px] flex flex-col bg-black select-none rounded-lg overflow-hidden';
+    'min-h-[375px] flex flex-col bg-background select-none rounded-lg overflow-hidden';
  const [dicomFileUploaderArr, setDicomFileUploaderArr] = useState([]);

  const onDrop = useCallback(async acceptedFiles => {
--- a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx
+++ b/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx
@ -372,7 +372,7 @@ function DicomUploadProgress({
  return (
    <div className="flex grow flex-col">
      {getNumCompletedAndTimeRemainingComponent()}
-      <div className="flex grow flex-col overflow-hidden bg-black text-lg">
+      <div className="flex grow flex-col overflow-hidden bg-background text-lg">
        {getPercentCompleteComponent()}
        <div className="ohif-scrollbar h-1 grow overflow-y-scroll px-2">
          {dicomFileUploaderArr
--- a/extensions/cornerstone/src/components/PanelAccordionTrigger.tsx
+++ b/extensions/cornerstone/src/components/PanelAccordionTrigger.tsx
@ -28,7 +28,7 @@ export default function PanelAccordionTrigger(props) {
      <div className={`inline-flex text-base ${isActive ? 'bg-popover' : 'bg-muted'} flex-grow`}>
        <button onClick={onClickDefault.bind(props)}>
          <span
-            className={`inline-flex rounded-l border-r border-black ${isActive ? 'bg-highlight' : 'bg-muted'}`}
+            className={`inline-flex rounded-l border-r border-background ${isActive ? 'bg-highlight' : 'bg-muted'}`}
          >
            {count !== undefined ? <span className="px-2">{count}</span> : null}
            {colorHex && <ColorCircle colorHex={colorHex} />}
--- a/extensions/cornerstone/src/components/SegmentationToolConfig.tsx
+++ b/extensions/cornerstone/src/components/SegmentationToolConfig.tsx
@ -34,7 +34,7 @@ export default function SegmentationToolConfig() {
  };

  return (
-    <div className="bg-muted flex flex-col gap-2 border-b border-b-[2px] border-black px-2 py-3">
+    <div className="bg-muted flex flex-col gap-2 border-b border-b-[2px] border-background px-2 py-3">
      <div className="flex items-center gap-2">
        <Switch
          checked={previewEdits}
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresetsContent.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresetsContent.tsx
@ -61,7 +61,7 @@ export function VolumeRenderingPresetsContent({ presets, viewportId, hide }: Pro
                className={
                  selectedPreset?.name === preset.name
                    ? 'border-highlight h-[75px] w-[95px] max-w-none rounded border-2'
-                    : 'hover:border-highlight h-[75px] w-[95px] max-w-none rounded border-2 border-black'
+                    : 'hover:border-highlight h-[75px] w-[95px] max-w-none rounded border-2 border-background'
                }
              />
              <label className="text-muted-foreground mt-1 text-left text-xs">
--- a/extensions/cornerstone/src/customizations/captureViewportModalCustomization.tsx
+++ b/extensions/cornerstone/src/customizations/captureViewportModalCustomization.tsx
@ -66,7 +66,7 @@ function ViewportDownloadFormNew({
          >
            {warningState.enabled && showWarningMessage && (
              <div
-                className="text-foreground absolute left-1/2 bottom-[5px] z-[1000] -translate-x-1/2 whitespace-nowrap rounded bg-black p-3 text-xs font-bold"
+                className="text-foreground absolute left-1/2 bottom-[5px] z-[1000] -translate-x-1/2 whitespace-nowrap rounded bg-background p-3 text-xs font-bold"
                style={{
                  fontSize: '12px',
                }}
--- a/extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx
+++ b/extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx
@ -100,7 +100,7 @@ function DataSourceConfigurationModalComponent({
  const getSelectedItemBackgroundClasses = itemIndex =>
    itemIndex < selectedItems.length
      ? classNames(
-          'bg-black/[.4]',
+          'bg-background/[.4]',
          itemIndex !== itemLabels.length - 1 ? 'hover:bg-transparent active:bg-popover' : ''
        )
      : 'bg-transparent';
@ -121,7 +121,7 @@ function DataSourceConfigurationModalComponent({
        <div className="text-highlight text-[20px]">
          {t(`Error fetching ${itemLabels[selectedItems.length]} list`)}
        </div>
-        <div className="grow bg-black p-4 text-[14px]">{errorMessage}</div>
+        <div className="grow bg-background p-4 text-[14px]">{errorMessage}</div>
      </div>
    );
  };
@ -180,7 +180,7 @@ function DataSourceConfigurationModalComponent({
  return (
    <div className="flex h-[calc(100vh-300px)] select-none flex-col gap-4 pt-0.5">
      {getSelectedItemsComponent()}
-      <div className="h-0.5 w-full shrink-0 bg-black"></div>
+      <div className="h-0.5 w-full shrink-0 bg-background"></div>
      {errorMessage ? (
        getErrorComponent()
      ) : (
--- a/extensions/default/src/Components/ItemListComponent.tsx
+++ b/extensions/default/src/Components/ItemListComponent.tsx
@ -44,7 +44,7 @@ function ItemListComponent({
          <InputFilter.ClearButton className="text-primary mr-0.5 p-0.5" />
        </InputFilter>
      </div>
-      <div className="relative flex min-h-[1px] grow flex-col bg-black text-[14px]">
+      <div className="relative flex min-h-[1px] grow flex-col bg-background text-[14px]">
        {itemList == null ? (
          <LoadingIndicatorProgress className={'h-full w-full'} />
        ) : itemList.length === 0 ? (
--- a/extensions/default/src/DicomTagBrowser/DicomTagTable.tsx
+++ b/extensions/default/src/DicomTagBrowser/DicomTagTable.tsx
@ -39,7 +39,7 @@ const RowComponent = ({
    <div
      style={{ ...style, ...rowStyle }}
      className={classNames(
-        'hover:bg-primary/25 border-input text-foreground flex w-full flex-row items-center break-all bg-black text-base',
+        'hover:bg-primary/25 border-input text-foreground flex w-full flex-row items-center break-all bg-background text-base',
        lineHeightClassName
      )}
      key={keyPrefix}
@ -281,7 +281,7 @@ function DicomTagTable({ rows }: { rows: Row[] }) {
        valueRef={valueRef}
      />
      <div
-        className="relative m-auto border-2 border-black bg-black"
+        className="relative m-auto border-2 border-background bg-background"
        style={{ height: '32rem' }}
      >
        {isHeaderRendered() && (
--- a/extensions/default/src/Panels/StudyBrowser/PanelStudyBrowser.tsx
+++ b/extensions/default/src/Panels/StudyBrowser/PanelStudyBrowser.tsx
@ -410,7 +410,7 @@ function PanelStudyBrowser({
        />
        <Separator
          orientation="horizontal"
-          className="bg-black"
+          className="bg-background"
          thickness="2px"
        />
      </>
--- a/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
+++ b/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
@ -176,7 +176,7 @@ function ToolbarLayoutSelectorWithServices({
          )}

          {/* Right Side - Grid Layout */}
-          <div className="bg-muted flex flex-col gap-2.5 border-l-2 border-solid border-black p-2">
+          <div className="bg-muted flex flex-col gap-2.5 border-l-2 border-solid border-background p-2">
            <div className="text-muted-foreground text-xs">{t('Custom')}</div>
            <LayoutSelector.GridSelector
              rows={rows}
--- a/extensions/default/src/ViewerLayout/index.tsx
+++ b/extensions/default/src/ViewerLayout/index.tsx
@ -9,7 +9,7 @@ import SidePanelWithServices from '../Components/SidePanelWithServices';
 import { Onboarding, ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@ohif/ui-next';
 import useResizablePanels from './ResizablePanelsHook';

-const resizableHandleClassName = 'mt-[1px] bg-black';
+const resizableHandleClassName = 'mt-[1px] bg-background';

 function ViewerLayout({
  // From Extension Module Params
@ -79,11 +79,11 @@ function ViewerLayout({
   * is sized to our viewport.
   */
  useEffect(() => {
-    document.body.classList.add('bg-black');
+    document.body.classList.add('bg-background');
    document.body.classList.add('overflow-hidden');

    return () => {
-      document.body.classList.remove('bg-black');
+      document.body.classList.remove('bg-background');
      document.body.classList.remove('overflow-hidden');
    };
  }, []);
@ -158,11 +158,11 @@ function ViewerLayout({
        appConfig={appConfig}
      />
      <div
-        className="relative flex w-full flex-row flex-nowrap items-stretch overflow-hidden bg-black"
+        className="relative flex w-full flex-row flex-nowrap items-stretch overflow-hidden bg-background"
        style={{ height: 'calc(100vh - 52px' }}
      >
        <React.Fragment>
-          {showLoadingIndicator && <LoadingIndicatorProgress className="h-full w-full bg-black" />}
+          {showLoadingIndicator && <LoadingIndicatorProgress className="h-full w-full bg-background" />}
          <ResizablePanelGroup {...resizablePanelGroupProps}>
            {/* LEFT SIDEPANELS */}
            {hasLeftPanels ? (
@ -186,7 +186,7 @@ function ViewerLayout({
            <ResizablePanel {...resizableViewportGridPanelProps}>
              <div className="flex h-full flex-1 flex-col">
                <div
-                  className="relative flex h-full flex-1 items-center justify-center overflow-hidden bg-black"
+                  className="relative flex h-full flex-1 items-center justify-center overflow-hidden bg-background"
                  onMouseEnter={handleMouseEnter}
                >
                  <ViewportGridComp
--- a/extensions/tmtv/src/Panels/PanelPetSUV.tsx
+++ b/extensions/tmtv/src/Panels/PanelPetSUV.tsx
@ -163,7 +163,7 @@ export default function PanelPetSUV() {
  return (
    <>
      <div className="ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto">
-        <div className="flex min-h-0 flex-1 flex-col bg-black text-base">
+        <div className="flex min-h-0 flex-1 flex-col bg-background text-base">
          <PanelSection defaultOpen={true}>
            <PanelSection.Header>{t('Patient Information')}</PanelSection.Header>
            <PanelSection.Content>
--- a/extensions/usAnnotation/src/panels/USAnnotationPanel.tsx
+++ b/extensions/usAnnotation/src/panels/USAnnotationPanel.tsx
@ -395,7 +395,7 @@ export default function USAnnotationPanel() {
   *  🖼  Final Render                                      */
  return (
    <div
-      className="text-foreground h-full bg-black"
+      className="text-foreground h-full bg-background"
      style={{ minWidth: 240, maxWidth: 480, width: '100%' }}
    >
      {/* Workflow */}
--- a/platform/app/src/routes/Local/Local.tsx
+++ b/platform/app/src/routes/Local/Local.tsx
@ -111,9 +111,9 @@ function Local({ modePath }: LocalProps) {

  // Set body style
  useEffect(() => {
-    document.body.classList.add('bg-black');
+    document.body.classList.add('bg-background');
    return () => {
-      document.body.classList.remove('bg-black');
+      document.body.classList.remove('bg-background');
    };
  }, []);

@ -139,7 +139,7 @@ function Local({ modePath }: LocalProps) {
              <div className="space-y-2 py-6 text-center">
                {dropInitiated ? (
                  <div className="flex flex-col items-center justify-center pt-12">
-                    <LoadingIndicatorProgress className={'h-full w-full bg-black'} />
+                    <LoadingIndicatorProgress className={'h-full w-full bg-background'} />
                  </div>
                ) : (
                  <div className="space-y-2">
--- a/platform/app/src/routes/NotFound/NotFound.tsx
+++ b/platform/app/src/routes/NotFound/NotFound.tsx
@ -13,7 +13,7 @@ const NotFound = ({
  const navigate = useNavigate();

  return (
-    <div className="absolute flex h-full w-full items-center justify-center bg-black">
+    <div className="absolute flex h-full w-full items-center justify-center bg-background">
      <div className="flex flex-col">
        <div className="bg-background flex items-center justify-center rounded-t-2xl p-6">
          <Icons.IllustrationNotFound />
--- a/platform/docs/src/pages/colors-and-type.tsx
+++ b/platform/docs/src/pages/colors-and-type.tsx
@ -131,7 +131,7 @@ export default function ComponentShowcase() {
      title="Colors and Typography"
      description="Colors and Typography"
    >
-      <div className="text-foreground min-h-screen bg-black">
+      <div className="text-foreground min-h-screen bg-background">
        <div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
          {/* Navigation cards */}
          <div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
@ -396,7 +396,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
        </div>
      </div>
      {showCode && (
-        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-black p-4 text-sm">
+        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-background p-4 text-sm">
          <code>{code}</code>
        </pre>
      )}
@ -425,7 +425,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
 //       </div>
 //       <div className="showcase-content mb-4">{children}</div>
 //       {showCode && (
-//         <pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
+//         <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
 //           <code>{code}</code>
 //         </pre>
 //       )}
--- a/platform/docs/src/pages/components-list.tsx
+++ b/platform/docs/src/pages/components-list.tsx
@ -50,7 +50,7 @@ export default function ComponentsList() {

          return (
            <TooltipProvider>
-              <div className="text-foreground min-h-screen bg-black">
+              <div className="text-foreground min-h-screen bg-background">
                <div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
                  {/* Navigation cards */}
                  <div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
--- a/platform/docs/src/pages/components.tsx
+++ b/platform/docs/src/pages/components.tsx
@ -131,7 +131,7 @@ export default function ComponentShowcase() {
      title="OHIF Viewer Design System"
      description="OHIF Viewer Design System"
    >
-      <div className="text-foreground min-h-screen bg-black">
+      <div className="text-foreground min-h-screen bg-background">
        <div className="mx-auto my-4 max-w-5xl pt-6 pb-3">
          <div className="grid grid-cols-1 gap-5 md:grid-cols-3">
            <a
@ -227,7 +227,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {

      {/* Code Section */}
      {showCode && (
-        <pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
+        <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
          <code>{code}</code>
        </pre>
      )}
@ -256,7 +256,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
 //       </div>
 //       <div className="showcase-content mb-4">{children}</div>
 //       {showCode && (
-//         <pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
+//         <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
 //           <code>{code}</code>
 //         </pre>
 //       )}
--- a/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx
+++ b/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx
@ -58,7 +58,7 @@ export default function AllinOneMenuShowcase() {
      description="A structured menu that consolidates controls and actions."
      code={`<IconMenu icon="viewport-window-level" menuStyle={{ width: 212, maxHeight: 500 }}>…</IconMenu>`}
    >
-      <div className="border-input/70 relative flex h-12 items-center rounded border bg-black px-4">
+      <div className="border-input/70 relative flex h-12 items-center rounded border bg-background px-4">
        <IconMenu
          icon="viewport-window-level"
          iconClassName="text-xl text-highlight hover:bg-primary/30 cursor-pointer rounded"
--- a/platform/docs/src/pages/components/ShowcaseRow.tsx
+++ b/platform/docs/src/pages/components/ShowcaseRow.tsx
@ -40,7 +40,7 @@ export default function ShowcaseRow({ title, description, children, code }: Show
        </div>
      </div>
      {showCode && (
-        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-black p-4 text-sm">
+        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-background p-4 text-sm">
          <code>{code}</code>
        </pre>
      )}
--- a/platform/docs/src/pages/patterns.tsx
+++ b/platform/docs/src/pages/patterns.tsx
@ -26,7 +26,7 @@ export default function ComponentShowcase() {
      title="Patterns"
      description="Patterns and example layouts"
    >
-      <div className="text-foreground min-h-screen bg-black">
+      <div className="text-foreground min-h-screen bg-background">
        <div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
          {/* Navigation cards */}
          <div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
@ -172,7 +172,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
        </div>
      </div>
      {showCode && (
-        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-black p-4 text-sm">
+        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-background p-4 text-sm">
          <code>{code}</code>
        </pre>
      )}
@ -201,7 +201,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
 //       </div>
 //       <div className="showcase-content mb-4">{children}</div>
 //       {showCode && (
-//         <pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
+//         <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
 //           <code>{code}</code>
 //         </pre>
 //       )}
--- a/platform/docs/src/pages/patterns/patterns-measurements.tsx
+++ b/platform/docs/src/pages/patterns/patterns-measurements.tsx
@ -49,7 +49,7 @@ export default function Measurements() {
  return (
    <BrowserOnly>
      {() => (
-        <div className="px-auto my-4 flex min-h-screen w-full justify-center bg-black py-12">
+        <div className="px-auto my-4 flex min-h-screen w-full justify-center bg-background py-12">
          <TooltipProvider>
            {/* Simulated Panel List for "Segmentation" */}
            <div className="w-64 space-y-0">
--- a/platform/docs/src/pages/patterns/patterns-segmentation.tsx
+++ b/platform/docs/src/pages/patterns/patterns-segmentation.tsx
@ -241,7 +241,7 @@ export default function SegmentationPanel() {
  };

  return (
-    <div className="px-auto flex min-h-screen w-full justify-center bg-black py-12">
+    <div className="px-auto flex min-h-screen w-full justify-center bg-background py-12">
      <div className="w-64 space-y-0">
        <TooltipProvider>
          <Accordion
--- a/platform/docs/src/pages/patterns/patterns-tmtv.tsx
+++ b/platform/docs/src/pages/patterns/patterns-tmtv.tsx
@ -76,7 +76,7 @@ export default function TMTVPatterns() {
  return (
    <BrowserOnly>
      {() => (
-        <div className="px-auto my-4 flex min-h-screen w-full justify-center bg-black py-12">
+        <div className="px-auto my-4 flex min-h-screen w-full justify-center bg-background py-12">
          <div className="w-64 space-y-0">
            <Accordion
              type="multiple"
--- a/platform/ui-next/src/components/DataRow/DataRow.tsx
+++ b/platform/ui-next/src/components/DataRow/DataRow.tsx
@ -255,7 +255,7 @@ const DataRowComponent = React.forwardRef<HTMLDivElement, DataRowProps>(
          {/* Number Box */}
          {number !== null && (
            <div
-              className={`flex h-7 max-h-7 w-7 flex-shrink-0 items-center justify-center rounded-l border-r border-black text-base ${
+              className={`flex h-7 max-h-7 w-7 flex-shrink-0 items-center justify-center rounded-l border-r border-background text-base ${
                isSelected ? 'bg-highlight text-black' : 'bg-muted text-muted-foreground'
              } overflow-hidden`}
            >
--- a/platform/ui-next/src/components/DateRange/DateRange.tsx
+++ b/platform/ui-next/src/components/DateRange/DateRange.tsx
@ -92,7 +92,7 @@ export function DatePickerWithRange({
              value={start}
              onChange={e => handleInputChange(e, 'start')}
              className={cn(
-                'border-inputfield-main focus:border-inputfield-focus hover:text-foreground h-[32px] w-full justify-start rounded border bg-black py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-base font-normal hover:bg-black',
+                'border-inputfield-main focus:border-inputfield-focus hover:text-foreground h-[32px] w-full justify-start rounded border bg-background py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-base font-normal hover:bg-background',
                !start && 'text-muted-foreground'
              )}
              data-cy="input-date-range-start"
@ -129,7 +129,7 @@ export function DatePickerWithRange({
              value={end}
              onChange={e => handleInputChange(e, 'end')}
              className={cn(
-                'border-inputfield-main focus:border-inputfield-focus hover:text-foreground h-full w-full justify-start rounded border bg-black py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-base font-normal hover:bg-black',
+                'border-inputfield-main focus:border-inputfield-focus hover:text-foreground h-full w-full justify-start rounded border bg-background py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-base font-normal hover:bg-background',
                !end && 'text-muted-foreground'
              )}
              data-cy="input-date-range-end"
--- a/platform/ui-next/src/components/Dialog/Dialog.tsx
+++ b/platform/ui-next/src/components/Dialog/Dialog.tsx
@ -54,7 +54,7 @@ const DialogOverlay = React.forwardRef<
  <div
    ref={ref}
    className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/60',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-background/60',
      className
    )}
    {...props}
--- a/platform/ui-next/src/components/LayoutSelector/LayoutSelector.tsx
+++ b/platform/ui-next/src/components/LayoutSelector/LayoutSelector.tsx
@ -332,7 +332,7 @@ const GridSelector = ({ rows = 3, columns = 4, className }: GridSelectorProps) =
 };

 const Divider = ({ className }: { className?: string }) => (
-  <div className={cn('h-px bg-black', className)}></div>
+  <div className={cn('h-px bg-background', className)}></div>
 );

 const HelpText = ({ children, className }: { children: React.ReactNode; className?: string }) => (
--- a/platform/ui-next/src/components/NavBar/NavBar.tsx
+++ b/platform/ui-next/src/components/NavBar/NavBar.tsx
@ -17,7 +17,7 @@ const NavBar = ({
  return (
    <div
      className={classnames(
-        'bg-popover z-20 border-black px-1',
+        'bg-popover z-20 border-background px-1',
        isSticky && stickyClasses,
        !isSticky && notStickyClasses,
        className
--- a/platform/ui-next/src/components/OHIFDialogs/PresetDialog.tsx
+++ b/platform/ui-next/src/components/OHIFDialogs/PresetDialog.tsx
@ -26,7 +26,7 @@ function PresetBody({ children, className }: PresetBodyProps) {
    <div
      className={cn(
        // Adjust these classes for your desired look
-        'border-foreground/10 flex min-h-0 flex-1 flex-col rounded-md border bg-black p-2',
+        'border-foreground/10 flex min-h-0 flex-1 flex-col rounded-md border bg-background p-2',
        className
      )}
    >
--- a/platform/ui-next/src/components/OHIFModals/ImageModal.tsx
+++ b/platform/ui-next/src/components/OHIFModals/ImageModal.tsx
@ -41,7 +41,7 @@ function ImageVisual({ children, className }: ImageVisualProps) {
  return (
    <div
      className={cn(
-        'flex-1 items-center justify-center rounded-2xl bg-black/80 p-4 sm:flex-[7]',
+        'flex-1 items-center justify-center rounded-2xl bg-background/80 p-4 sm:flex-[7]',
        'flex', // ensure the container is a flex box
        className
      )}
--- a/platform/ui-next/src/components/ProgressDropdown/ProgressDiscreteBar.tsx
+++ b/platform/ui-next/src/components/ProgressDropdown/ProgressDiscreteBar.tsx
@ -10,7 +10,7 @@ const ProgressDiscreteBar = ({ options }: { options: ProgressDropdownOption[] })
        <div
          key={i}
          className={classnames('mr-1 h-1 grow first:rounded-l-sm last:mr-0 last:rounded-r-sm', {
-            'bg-black': !option.activated && !option.completed,
+            'bg-background': !option.activated && !option.completed,
            'bg-primary/40': option.activated && !option.completed,
            'bg-highlight': option.completed,
          })}
--- a/platform/ui-next/src/components/SidePanel/SidePanel.tsx
+++ b/platform/ui-next/src/components/SidePanel/SidePanel.tsx
@ -58,7 +58,7 @@ const closeIconWidth = 30;
 const gridHorizontalPadding = 10;
 const tabSpacerWidth = 2;

-const baseClasses = 'bg-black border-black justify-start box-content flex flex-col';
+const baseClasses = 'bg-background border-background justify-start box-content flex flex-col';

 const openStateIconName = {
  left: 'SidePanelCloseLeft',
@ -447,7 +447,7 @@ const SidePanel = ({
        </div>
        <Separator
          orientation="horizontal"
-          className="bg-black"
+          className="bg-background"
          thickness="2px"
        />
      </>
--- a/platform/ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx
+++ b/platform/ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx
@ -55,13 +55,13 @@ export function StudyBrowserSort({ servicesManager }: withAppTypes) {
      <DropdownMenu>
        <Tooltip>
          <TooltipTrigger className="w-full overflow-hidden">
-            <DropdownMenuTrigger className="border-input focus:border-input text-foreground flex h-[26px] w-full items-center justify-start overflow-hidden whitespace-nowrap rounded border bg-black p-2 text-base">
+            <DropdownMenuTrigger className="border-input focus:border-input text-foreground flex h-[26px] w-full items-center justify-start overflow-hidden whitespace-nowrap rounded border bg-background p-2 text-base">
              {selectedSort.label}
            </DropdownMenuTrigger>
          </TooltipTrigger>
          <TooltipContent>{selectedSort.label}</TooltipContent>
        </Tooltip>
-        <DropdownMenuContent className="bg-black">
+        <DropdownMenuContent className="bg-background">
          {sortFunctions.map(sort => (
            <DropdownMenuItem
              key={sort.label}
@ -77,7 +77,7 @@ export function StudyBrowserSort({ servicesManager }: withAppTypes) {
        <TooltipTrigger>
          <button
            onClick={toggleSortDirection}
-            className="flex h-[26px] items-center justify-center bg-black"
+            className="flex h-[26px] items-center justify-center bg-background"
          >
            {sortDirection === 'ascending' ? (
              <Icons.SortingAscending className="text-primary w-2" />
--- a/platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx
+++ b/platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx
@ -18,13 +18,13 @@ export function StudyBrowserViewOptions({ tabs, onSelectTab, activeTabName }: wi
    <DropdownMenu>
      <Tooltip>
        <TooltipTrigger className="w-full w-[50%] overflow-hidden">
-          <DropdownMenuTrigger className="border-input focus:border-input text-foreground flex h-[26px] w-full items-center justify-start rounded border bg-black p-2 text-base">
+          <DropdownMenuTrigger className="border-input focus:border-input text-foreground flex h-[26px] w-full items-center justify-start rounded border bg-background p-2 text-base">
            {activeTab?.label}
          </DropdownMenuTrigger>
        </TooltipTrigger>
        <TooltipContent>{activeTab?.label}</TooltipContent>
      </Tooltip>
-      <DropdownMenuContent className="bg-black">
+      <DropdownMenuContent className="bg-background">
        {tabs.map(tab => {
          const { name, label, studies } = tab;
          const isActive = activeTabName === name;
--- a/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
+++ b/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
@ -67,7 +67,7 @@ const Thumbnail = ({
        )}
      >
        <div className="h-[114px] w-[128px]">
-          <div className="relative bg-black">
+          <div className="relative bg-background">
            {imageSrc ? (
              <img
                src={imageSrc}
--- a/platform/ui-next/src/components/Viewport/ViewportPane.tsx
+++ b/platform/ui-next/src/components/Viewport/ViewportPane.tsx
@ -58,7 +58,7 @@ function ViewportPane({
      onScroll={onInteractionHandler}
      onWheel={onInteractionHandler}
      className={classNames(
-        'group/pane relative h-full w-full overflow-hidden transition duration-300',
+        'group/pane relative h-full w-full overflow-hidden bg-black transition duration-300',
        className
      )}
      style={customStyle}
--- a/platform/ui-next/src/tailwind.css
+++ b/platform/ui-next/src/tailwind.css
@ -12,7 +12,7 @@
    --neutral: 213 22% 59%;
    --neutral-light: 214 69% 81%;
    --neutral-dark: 214 16% 21%;
-    --background: 236 62% 5%;
+    --background: 0 0% 0%;
    --foreground: 0 0% 98%;
    --card: 234 64% 10%;
    --card-foreground: 0 0% 98%;
@ -215,7 +215,7 @@
  }

  body {
-    @apply !bg-black;
+    @apply !bg-background;
  }
 }