NickAkhmetov · Oct 28, 2026
diff --git a/CHANGELOG-dark-mode-long-tail.md b/CHANGELOG-dark-mode-long-tail.md
@@ -0,0 +1 @@
+- In dark mode, dim the home page hero image and give the home page cards, entity counts and section gradients, publication visualization accordions, workspace tables and metadata menus dark-mode colors.
diff --git a/context/app/static/js/components/detailPage/files/DataProducts/FileSize.tsx b/context/app/static/js/components/detailPage/files/DataProducts/FileSize.tsx
@@ -8,7 +8,7 @@ interface FileSizeProps {
   color?: TypographyProps['color'];
 }
 
-export function FileSize({ size, variant = 'body2', color = 'black' }: FileSizeProps) {
+export function FileSize({ size, variant = 'body2', color = 'text.primary' }: FileSizeProps) {
   return (
     <Typography component="p" variant={variant} color={color}>
       {prettyBytes(size)}

diff --git a/context/app/static/js/components/detailPage/visualization/Visualization/style.ts b/context/app/static/js/components/detailPage/visualization/Visualization/style.ts
@@ -26,7 +26,6 @@ const ExpandButton = styled(WhiteBackgroundIconButton)<ButtonProps>(({ theme })
 
 const SelectionButton = styled(Button)(({ theme }) => ({
   marginLeft: theme.spacing(1),
-  color: 'white',
   borderRadius: '3px',
 }));
 

diff --git a/context/app/static/js/components/home/AnalysisAndVisualizations/ParallaxSlide/styles.ts b/context/app/static/js/components/home/AnalysisAndVisualizations/ParallaxSlide/styles.ts
@@ -1,16 +1,25 @@
-import { styled } from '@mui/material/styles';
+import { styled, type PaletteMode } from '@mui/material/styles';
 import { shouldForwardProp } from 'js/helpers/styled';
 import Box from '@mui/material/Box';
 
 import { headerHeight } from 'js/components/Header/HeaderAppBar/style';
 import { ThemeColorKey } from '../types';
 
-// Gradient accent color per theme key. The gradient runs from this color to white.
-export const accentColorMap: Record<ThemeColorKey, string> = {
-  info: '#bdcfe9', // Datasets Search, Metadata Exploration
-  warning: '#f1cac0', // Biomarkers & Cell Types, Integrated Maps
-  success: '#d1dac1', // Cloud Workspaces, Single-Cell and Spatial Data Visualizations
-  error: '#f4c0db', // Cell Populations Viewer
+// Gradient accent color per mode and theme key. The gradient runs from this color to the paper color.
+// The dark colors keep the hue of the light ones, with the same contrast against #333 as the light ones have against white.
+export const accentColorMap: Record<PaletteMode, Record<ThemeColorKey, string>> = {
+  light: {
+    info: '#bdcfe9', // Datasets Search, Metadata Exploration
+    warning: '#f1cac0', // Biomarkers & Cell Types, Integrated Maps
+    success: '#d1dac1', // Cloud Workspaces, Single-Cell and Spatial Data Visualizations
+    error: '#f4c0db', // Cell Populations Viewer
+  },
+  dark: {
+    info: '#425267',
+    warning: '#66463D',
+    success: '#474E39',
+    error: '#6E435A',
+  },
 };
 
 /**
@@ -75,7 +84,7 @@ export const GradientBackground = styled('div')<GradientBackgroundProps>(({ them
     right: 0,
     bottom: 0,
     zIndex: -1,
-    background: `linear-gradient(135deg, ${accentColorMap[$theme]} 0%, ${theme.palette.common.white} 100%)`,
+    background: `linear-gradient(135deg, ${accentColorMap[theme.palette.mode][$theme]} 0%, ${theme.palette.background.paper} 100%)`,
   };
 });
 

diff --git a/...ic/js/components/home/AnalysisAndVisualizations/VisualizeDataSlide/VisualizeDataSlide.tsx b/...ic/js/components/home/AnalysisAndVisualizations/VisualizeDataSlide/VisualizeDataSlide.tsx
@@ -28,7 +28,7 @@ function VisualizeDataSlide({ config, zIndex, stickyRef }: VisualizeDataSlidePro
   const isReducedMotion = usePrefersReducedMotion();
 
   const activeView = config.views[activeViewIndex];
-  const targetColor = accentColorMap[activeView.theme];
+  const targetColor = accentColorMap[theme.palette.mode][activeView.theme];
 
   const Icon = config.icon;
 
@@ -42,7 +42,7 @@ function VisualizeDataSlide({ config, zIndex, stickyRef }: VisualizeDataSlidePro
       <VisualizeSlideContent ref={stickyRef} role="region" aria-label={config.sectionTitle}>
         <AnimatedGradientLayer
           style={{
-            background: color.to((c) => `linear-gradient(135deg, ${c} 0%, ${theme.palette.common.white} 100%)`),
+            background: color.to((c) => `linear-gradient(135deg, ${c} 0%, ${theme.palette.background.paper} 100%)`),
           }}
         />
 

diff --git a/context/app/static/js/components/home/AnalysisAndVisualizations/VisualizeDataSlide/styles.ts b/context/app/static/js/components/home/AnalysisAndVisualizations/VisualizeDataSlide/styles.ts
@@ -135,7 +135,9 @@ export const PaginationDot = styled('button')<{ $isActive: boolean }>(({ theme,
   border: 'none',
   padding: 0,
   cursor: 'pointer',
-  backgroundColor: $isActive ? theme.palette.text.primary : theme.palette.grey[400],
+  backgroundColor: $isActive
+    ? theme.palette.text.primary
+    : theme.palette.grey[theme.palette.mode === 'dark' ? 600 : 400],
   transition: theme.transitions.create('background-color'),
 
   '&:focus-visible': {

diff --git a/context/app/static/js/components/home/EntityCount/style.ts b/context/app/static/js/components/home/EntityCount/style.ts
@@ -10,12 +10,12 @@ const FlexLink = styled('a')(({ theme }) => ({
   color: theme.palette.text.primary,
   '&:hover': {
     backgroundColor: theme.palette.primary.light,
-    color: '#fff',
+    color: theme.palette.getContrastText(theme.palette.primary.light),
     svg: {
-      color: '#fff',
+      color: theme.palette.getContrastText(theme.palette.primary.light),
     },
     '[role="img"]': {
-      backgroundColor: '#fff',
+      backgroundColor: theme.palette.getContrastText(theme.palette.primary.light),
     },
   },
 }));

diff --git a/context/app/static/js/components/home/EntityCounts/style.ts b/context/app/static/js/components/home/EntityCounts/style.ts
@@ -2,9 +2,9 @@ import { styled } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 import SvgIcon from '@mui/material/SvgIcon';
 
-const Background = styled('div')({
-  backgroundColor: '#cfd3e2',
-});
+const Background = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.mode === 'dark' ? '#4A4D59' : '#cfd3e2',
+}));
 
 const FlexContainer = styled(Container)(({ theme }) => ({
   padding: theme.spacing(0, 0),

diff --git a/context/app/static/js/components/home/Hero/Hero.tsx b/context/app/static/js/components/home/Hero/Hero.tsx
@@ -55,10 +55,12 @@ function HeroLeftColumn() {
           variant="outlined"
           // Can't make it white without !important due to MUI specificity, but it doesn't cause any issues in this case since it's only used here and we want it to be white.
           // The !important also suppresses the default outlined hover tint, so restore a
-          // hover state (grey[100], matching the theme's `elevated` variant on white).
+          // hover state matching the theme's `elevated` variant.
           sx={(theme) => ({
-            backgroundColor: 'white !important',
-            '&:hover': { backgroundColor: `${theme.palette.grey[100]} !important` },
+            backgroundColor: `${theme.palette.background.paper} !important`,
+            '&:hover': {
+              backgroundColor: `${theme.palette.grey[theme.palette.mode === 'dark' ? 800 : 100]} !important`,
+            },
           })}
           href="/workspaces"
           onClick={() => {

diff --git a/context/app/static/js/components/home/Hero/styles.ts b/context/app/static/js/components/home/Hero/styles.ts
@@ -1,5 +1,5 @@
 import Container from '@mui/material/Container';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 
 export const HeroSection = styled('section')(({ theme }) => ({
   position: 'relative',
@@ -53,12 +53,14 @@ export const BackgroundImageLayer = styled('div')<BackgroundImageLayerProps>(({
   },
 }));
 
-export const BackgroundOverlay = styled('div')({
+// Lightens the background image in light mode and dims it in dark mode, so the text over it stays readable.
+export const BackgroundOverlay = styled('div')(({ theme }) => ({
   position: 'absolute',
   inset: 0,
-  background: 'rgba(255, 255, 255, 0.4)',
+  background:
+    theme.palette.mode === 'dark' ? alpha(theme.palette.background.default, 0.75) : 'rgba(255, 255, 255, 0.4)',
   zIndex: 1,
-});
+}));
 
 export const CardContainer = styled('a')(({ theme }) => ({
   display: 'flex',
@@ -68,7 +70,7 @@ export const CardContainer = styled('a')(({ theme }) => ({
   textDecoration: 'none',
   color: 'inherit',
   borderRadius: theme.spacing(1),
-  backgroundColor: theme.palette.common.white,
+  backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   transition: theme.transitions.create(['box-shadow', 'transform'], {
     duration: theme.transitions.duration.short,
@@ -84,7 +86,7 @@ export const CardVideoContainer = styled('div')(({ theme }) => ({
   borderRadius: 4,
   overflow: 'hidden',
   flexShrink: 0,
-  backgroundColor: theme.palette.common.white,
+  backgroundColor: theme.palette.background.paper,
   // On small screens the fixed-width media crowds out the card text (causing overflow), so
   // shrink it to leave room for the title and description.
   [theme.breakpoints.down('sm')]: {
@@ -101,7 +103,7 @@ export const CardVideoContainer = styled('div')(({ theme }) => ({
 export const PillBar = styled('nav')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
-  backgroundColor: theme.palette.common.white,
+  backgroundColor: theme.palette.background.paper,
   borderRadius: theme.spacing(1),
   boxShadow: theme.shadows[1],
   overflow: 'hidden',

diff --git a/...onents/publications/PublicationVisualizationsSection/PublicationsVisualizationSection.tsx b/...onents/publications/PublicationVisualizationsSection/PublicationsVisualizationSection.tsx
@@ -13,7 +13,7 @@ import { StyledAccordionDetails } from './style';
 const StyledAccordion = styled(Accordion, { shouldForwardProp })<{ $isExpanded: boolean }>(
   ({ theme, $isExpanded }) => ({
     '& .MuiAccordionSummary-root': {
-      backgroundColor: $isExpanded ? theme.palette.primary.main : '#fff',
+      backgroundColor: $isExpanded ? theme.palette.primary.main : theme.palette.background.paper,
       '& > .MuiAccordionSummary-content': {
         ...theme.typography.subtitle1,
         color: $isExpanded ? theme.palette.primary.contrastText : theme.palette.text.primary,

diff --git a/context/app/static/js/components/search/Facets/style.ts b/context/app/static/js/components/search/Facets/style.ts
@@ -23,7 +23,7 @@ const FacetAccordionSummary = styled(AccordionSummary, { shouldForwardProp })<{
     '& > *': {
       padding: 0,
       margin: 0,
-      color: '#000',
+      color: theme.palette.text.primary,
     },
     margin: 0,
   }),

diff --git a/context/app/static/js/components/search/MetadataMenu/style.tsx b/context/app/static/js/components/search/MetadataMenu/style.tsx
@@ -57,9 +57,9 @@ const StyledMenuItem = styled(({ tooltip, isLoading, children, href, disabled, .
   }
 
   return menuItem;
-})({
+})(({ theme }) => ({
   width: '100%',
-  color: 'black',
-});
+  color: theme.palette.text.primary,
+}));
 
 export { StyledInfoIcon, StyledMenuItem };
diff --git a/context/app/static/js/components/workspaces/Tables/WorkspaceItemsTable/style.ts b/context/app/static/js/components/workspaces/Tables/WorkspaceItemsTable/style.ts
@@ -12,7 +12,7 @@ import { HeaderCell } from 'js/shared-styles/tables';
 import NumSelectedHeader from 'js/shared-styles/tables/NumSelectedHeader';
 
 const border = (theme: Theme) => ({
-  border: `1px solid ${theme.palette.grey[300]}`,
+  border: `1px solid ${theme.palette.divider}`,
 });
 
 const checkboxStyles = {
@@ -50,7 +50,7 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
 
 const BorderedTableRow = styled(TableRow)(({ theme }) => ({
   backgroundColor: theme.palette.white.main,
-  borderBottom: `1px solid ${theme.palette.grey[300]}`,
+  borderBottom: `1px solid ${theme.palette.divider}`,
 }));
 
 const CompactTableRow = styled(StyledTableRow)({

diff --git a/context/app/static/js/components/workspaces/style.ts b/context/app/static/js/components/workspaces/style.ts
@@ -50,7 +50,7 @@ const StyledSearchIcon = styled(SearchRoundedIcon)(({ theme }) => ({
 }));
 
 const StyledLaunchButton = styled(Button)(({ theme }) => ({
-  border: `1px solid ${theme.palette.grey[300]}`,
+  border: `1px solid ${theme.palette.divider}`,
   borderRadius: theme.spacing(0.5),
   padding: theme.spacing(1, 2.5),
 }));
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- In dark mode, dim the home page hero image and give the home page cards, entity counts and section gradients, publication visualization accordions, workspace tables and metadata menus dark-mode colors.