diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index da0d4760ea..10d534e454 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -282,6 +282,10 @@ importers:
         version: 4.1.4
 
   storybook:
+    dependencies:
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
     devDependencies:
       '@amsterdam/design-system-assets':
         specifier: workspace:*
diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx
index 2e2c0de51f..7485b93bde 100644
--- a/storybook/config/preview.tsx
+++ b/storybook/config/preview.tsx
@@ -6,7 +6,8 @@ import '../src/styles/docs.css'
 import '../src/styles/overrides.css'
 import { Screen } from '@amsterdam/design-system-react'
 import { withThemeByClassName } from '@storybook/addon-themes'
-import type { StoryFn } from '@storybook/react'
+import type { StoryContext, StoryFn } from '@storybook/react'
+import clsx from 'clsx'
 import { viewports } from './viewports'
 
 export const argTypes = {
@@ -17,8 +18,14 @@ export const argTypes = {
 
 // Wrap in Screen, set language to Dutch for Canvas and Stories
 export const decorators = [
-  (Story: StoryFn) => (
-    <Screen lang="nl">
+  (Story: StoryFn, { args }: StoryContext) => (
+    <Screen
+      className={clsx({
+        'ams-docs-dark-background': args['inverseColor'],
+        'ams-docs-light-background': args['contrastColor'],
+      })}
+      lang="nl"
+    >
       <Story />
     </Screen>
   ),
diff --git a/storybook/package.json b/storybook/package.json
index 5434c9e072..2d7595d337 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -17,6 +17,9 @@
     "clean": "rimraf dist/",
     "start": "storybook dev --config-dir config/ --port 6006"
   },
+  "dependencies": {
+    "clsx": "2.1.1"
+  },
   "devDependencies": {
     "@amsterdam/design-system-assets": "workspace:*",
     "@amsterdam/design-system-css": "workspace:*",
diff --git a/storybook/src/components/Blockquote/Blockquote.stories.tsx b/storybook/src/components/Blockquote/Blockquote.stories.tsx
index f0e69365e3..26e4608a33 100644
--- a/storybook/src/components/Blockquote/Blockquote.stories.tsx
+++ b/storybook/src/components/Blockquote/Blockquote.stories.tsx
@@ -5,7 +5,6 @@
 
 import { Blockquote } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
-import { inverseColorDecorator } from '../shared/decorators'
 import { exampleQuote } from '../shared/exampleContent'
 
 const quote = exampleQuote()
@@ -23,7 +22,6 @@ const meta = {
       table: { disable: false },
     },
   },
-  decorators: [inverseColorDecorator],
 } satisfies Meta<typeof Blockquote>
 
 export default meta
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
index 0c7a9eb7f1..5430965a8c 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -6,12 +6,10 @@
 import { Link, Paragraph, UnorderedList } from '@amsterdam/design-system-react'
 import { DescriptionList } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
-import { inverseColorDecorator } from '../shared/decorators'
 
 const meta = {
   title: 'Components/Text/Description List',
   component: DescriptionList,
-  decorators: [inverseColorDecorator],
   args: {
     children: [
       <DescriptionList.Term key={1}>Het hoger onderwijs</DescriptionList.Term>,
diff --git a/storybook/src/components/Heading/Heading.stories.tsx b/storybook/src/components/Heading/Heading.stories.tsx
index 1ac5035dbf..3634ce132a 100644
--- a/storybook/src/components/Heading/Heading.stories.tsx
+++ b/storybook/src/components/Heading/Heading.stories.tsx
@@ -6,7 +6,6 @@
 import { Column } from '@amsterdam/design-system-react'
 import { Heading } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
-import { inverseColorDecorator } from '../shared/decorators'
 import { exampleHeading } from '../shared/exampleContent'
 
 const heading = exampleHeading()
@@ -24,7 +23,6 @@ const meta = {
       table: { disable: false },
     },
   },
-  decorators: [inverseColorDecorator],
 } satisfies Meta<typeof Heading>
 
 export default meta
diff --git a/storybook/src/components/IconButton/IconButton.stories.tsx b/storybook/src/components/IconButton/IconButton.stories.tsx
index f35409967a..9a141af75d 100644
--- a/storybook/src/components/IconButton/IconButton.stories.tsx
+++ b/storybook/src/components/IconButton/IconButton.stories.tsx
@@ -6,7 +6,6 @@
 import { IconButton } from '@amsterdam/design-system-react/src'
 import * as Icons from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
-import { contrastColorDecorator, inverseColorDecorator } from '../shared/decorators'
 
 const meta = {
   title: 'Components/Buttons/Icon Button',
@@ -37,7 +36,6 @@ const meta = {
       mapping: Icons,
     },
   },
-  decorators: [inverseColorDecorator, contrastColorDecorator],
 } satisfies Meta<typeof IconButton>
 
 export default meta
diff --git a/storybook/src/components/Link/Link.stories.tsx b/storybook/src/components/Link/Link.stories.tsx
index 6253cc8e07..7c6e9be767 100644
--- a/storybook/src/components/Link/Link.stories.tsx
+++ b/storybook/src/components/Link/Link.stories.tsx
@@ -6,7 +6,6 @@
 import { Paragraph } from '@amsterdam/design-system-react'
 import { Link } from '@amsterdam/design-system-react/src'
 import type { Meta, StoryObj } from '@storybook/react'
-import { contrastColorDecorator, inverseColorDecorator } from '../shared/decorators'
 
 type Story = StoryObj<typeof Link>
 
@@ -30,7 +29,6 @@ const meta = {
       type: { name: 'string', required: false },
     },
   },
-  decorators: [inverseColorDecorator, contrastColorDecorator],
 } satisfies Meta<typeof Link>
 
 export default meta
diff --git a/storybook/src/components/LinkList/LinkList.stories.tsx b/storybook/src/components/LinkList/LinkList.stories.tsx
index bff513c4d3..f7a4733c59 100644
--- a/storybook/src/components/LinkList/LinkList.stories.tsx
+++ b/storybook/src/components/LinkList/LinkList.stories.tsx
@@ -6,7 +6,6 @@
 import { LinkList } from '@amsterdam/design-system-react/src'
 import * as Icons from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
-import { contrastColorDecorator, inverseColorDecorator } from '../shared/decorators'
 import { exampleLinkList } from '../shared/exampleContent'
 
 const linkList = exampleLinkList()
@@ -66,8 +65,6 @@ const LinkStoryTemplate: LinkStory = {
         <Story />
       </LinkList>
     ),
-    inverseColorDecorator,
-    contrastColorDecorator,
   ],
   render: ({ children, ...args }) => <LinkList.Link {...args}>{children}</LinkList.Link>,
 }
diff --git a/storybook/src/components/OrderedList/OrderedList.stories.tsx b/storybook/src/components/OrderedList/OrderedList.stories.tsx
index 47362d3209..167b9a8b78 100644
--- a/storybook/src/components/OrderedList/OrderedList.stories.tsx
+++ b/storybook/src/components/OrderedList/OrderedList.stories.tsx
@@ -6,7 +6,6 @@
 import { Heading, Paragraph } from '@amsterdam/design-system-react'
 import { OrderedList } from '@amsterdam/design-system-react/src'
 import type { Meta, StoryObj } from '@storybook/react'
-import { inverseColorDecorator } from '../shared/decorators'
 import { exampleOrderedList } from '../shared/exampleContent'
 
 const orderedListItems = exampleOrderedList().map((text, index) => (
@@ -40,7 +39,6 @@ const meta = {
       options: ['small', undefined],
     },
   },
-  decorators: [inverseColorDecorator],
 } satisfies Meta<typeof OrderedList>
 
 export default meta
diff --git a/storybook/src/components/PageHeading/PageHeading.stories.tsx b/storybook/src/components/PageHeading/PageHeading.stories.tsx
index 137e0d419e..798f83475e 100644
--- a/storybook/src/components/PageHeading/PageHeading.stories.tsx
+++ b/storybook/src/components/PageHeading/PageHeading.stories.tsx
@@ -5,7 +5,6 @@
 
 import { PageHeading } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
-import { inverseColorDecorator } from '../shared/decorators'
 
 const meta = {
   title: 'Components/Text/Page Heading',
@@ -20,7 +19,6 @@ const meta = {
       table: { disable: false },
     },
   },
-  decorators: [inverseColorDecorator],
 } satisfies Meta<typeof PageHeading>
 
 export default meta
diff --git a/storybook/src/components/Paragraph/Paragraph.stories.tsx b/storybook/src/components/Paragraph/Paragraph.stories.tsx
index db46c8d356..ddcb965e9a 100644
--- a/storybook/src/components/Paragraph/Paragraph.stories.tsx
+++ b/storybook/src/components/Paragraph/Paragraph.stories.tsx
@@ -5,7 +5,6 @@
 
 import { Paragraph } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
-import { inverseColorDecorator } from '../shared/decorators'
 import { exampleParagraph } from '../shared/exampleContent'
 
 const paragraph = exampleParagraph()
@@ -30,7 +29,6 @@ const meta = {
       options: ['small', undefined, 'large'],
     },
   },
-  decorators: [inverseColorDecorator],
 } satisfies Meta<typeof Paragraph>
 
 export default meta
diff --git a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx
index ffa1530a29..1594ff8cc0 100644
--- a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx
+++ b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx
@@ -16,7 +16,6 @@ import {
   TrashBinIcon,
 } from '@amsterdam/design-system-react-icons'
 import type { Meta, StoryObj } from '@storybook/react'
-import { inverseColorDecorator } from '../shared/decorators'
 import { exampleUnorderedList } from '../shared/exampleContent'
 
 const unorderedListItems = exampleUnorderedList().map((text, index) => (
@@ -40,7 +39,6 @@ const meta = {
       options: ['small', undefined],
     },
   },
-  decorators: [inverseColorDecorator],
 } satisfies Meta<typeof UnorderedList>
 
 export default meta
diff --git a/storybook/src/components/shared/decorators.tsx b/storybook/src/components/shared/decorators.tsx
deleted file mode 100644
index bf10cea775..0000000000
--- a/storybook/src/components/shared/decorators.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-import type { StoryContext, StoryFn } from '@storybook/react'
-
-/** Applies a light background colour if the `contrastColor` arg is true. */
-export const contrastColorDecorator = (Story: StoryFn, context: StoryContext) => (
-  <div className={context.args['contrastColor'] ? 'ams-docs-light-background' : undefined}>
-    <Story />
-  </div>
-)
-
-/** Applies a dark background colour if the `inverseColor` arg is true. */
-export const inverseColorDecorator = (Story: StoryFn, context: StoryContext) => (
-  <div className={context.args['inverseColor'] ? 'ams-docs-dark-background' : undefined}>
-    <Story />
-  </div>
-)
diff --git a/storybook/src/styles/docs.css b/storybook/src/styles/docs.css
index e60f4f3616..a480162d30 100644
--- a/storybook/src/styles/docs.css
+++ b/storybook/src/styles/docs.css
@@ -57,14 +57,15 @@
   padding-inline: 1rem;
 }
 
-.ams-docs-dark-background {
-  background-color: #004699; /* Dark blue */
-}
-
+/* Do not change the order of these two selectors. They ensure the dark background wins if both are set, which is in line with the implementation of the React-component. */
 .ams-docs-light-background {
   background-color: #ffe600; /* Yellow */
 }
 
+.ams-docs-dark-background {
+  background-color: #004699; /* Dark blue */
+}
+
 .ams-docs-backdrop {
   background-color: #0006;
   block-size: 100%;