diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index 6153389e7534..c2bfe8964881 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -40,14 +40,14 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
   textAlign: 'start',
   cursor: disabled || call.state === CallStates.ERROR ? 'default' : 'pointer',
   '&:hover': {
-    background: theme.base === 'dark' ? transparentize(0.9, theme.color.secondary) : '#F3FAFF',
+    background: theme.background.hoverable,
   },
   '&:focus-visible': {
     outline: 0,
     boxShadow: `inset 3px 0 0 0 ${
       call.state === CallStates.ERROR ? theme.color.warning : theme.color.secondary
     }`,
-    background: call.state === CallStates.ERROR ? 'transparent' : '#F3FAFF',
+    background: call.state === CallStates.ERROR ? 'transparent' : theme.background.hoverable,
   },
   '& > div': {
     opacity: call.state === CallStates.WAITING ? 0.5 : 1,
diff --git a/addons/interactions/src/components/Subnav/Subnav.tsx b/addons/interactions/src/components/Subnav/Subnav.tsx
index 331d02f314c8..50de50fd0c5d 100644
--- a/addons/interactions/src/components/Subnav/Subnav.tsx
+++ b/addons/interactions/src/components/Subnav/Subnav.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Button, Icons, Separator, P, TooltipNote, WithTooltip, Bar } from '@storybook/components';
 import { Call, CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
-import { transparentize } from 'polished';
 
 import { StatusBadge } from '../StatusBadge/StatusBadge';
 
@@ -52,7 +51,7 @@ export const StyledIconButton = styled(StyledButton)(({ theme }) => ({
   margin: '0 3px',
   '&:not(:disabled)': {
     '&:hover,&:focus-visible': {
-      background: transparentize(0.9, theme.color.secondary),
+      background: theme.background.hoverable,
     },
   },
 }));
diff --git a/lib/theming/src/base.ts b/lib/theming/src/base.ts
index 7414922d9380..fdfe0a5ce966 100644
--- a/lib/theming/src/base.ts
+++ b/lib/theming/src/base.ts
@@ -1,3 +1,5 @@
+import { transparentize } from 'polished';
+
 export const color = {
   // Official color palette
   primary: '#FF4785', // coral
@@ -42,7 +44,7 @@ export const background = {
   bar: '#FFFFFF',
   content: color.lightest,
   gridCellSize: 10,
-  hoverable: 'rgba(0,0,0,.05)', // hover state for items in a list
+  hoverable: transparentize(0.93, color.secondary), // hover state for items in a list
 
   // Notification, error, and warning backgrounds
   positive: '#E1FFD4',
diff --git a/lib/theming/src/convert.ts b/lib/theming/src/convert.ts
index c35030a6ae1d..29a59cac1add 100644
--- a/lib/theming/src/convert.ts
+++ b/lib/theming/src/convert.ts
@@ -109,9 +109,7 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]):
       bar: barBg,
       content: appContentBg,
       gridCellSize: gridCellSize || background.gridCellSize,
-      hoverable:
-        base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable,
-
+      hoverable: background.hoverable,
       positive: background.positive,
       negative: background.negative,
       warning: background.warning,
diff --git a/lib/ui/src/components/sidebar/SearchResults.tsx b/lib/ui/src/components/sidebar/SearchResults.tsx
index aecc70db9a65..70cc95f71311 100644
--- a/lib/ui/src/components/sidebar/SearchResults.tsx
+++ b/lib/ui/src/components/sidebar/SearchResults.tsx
@@ -9,7 +9,6 @@ import React, {
   useEffect,
 } from 'react';
 import { ControllerStateAndHelpers } from 'downshift';
-import { transparentize } from 'polished';
 
 import { ComponentNode, DocumentNode, Path, RootNode, StoryNode } from './TreeNode';
 import {
@@ -37,7 +36,7 @@ const ResultRow = styled.li<{ isHighlighted: boolean }>(({ theme, isHighlighted
   display: 'block',
   margin: 0,
   padding: 0,
-  background: isHighlighted ? transparentize(0.9, theme.color.secondary) : 'transparent',
+  background: isHighlighted ? theme.background.hoverable : 'transparent',
   cursor: 'pointer',
   'a:hover, button:hover': {
     background: 'transparent',