diff --git a/cypress/generated/addon-backgrounds.spec.ts b/cypress/generated/addon-backgrounds.spec.ts
new file mode 100644
index 000000000000..1f0831f2496a
--- /dev/null
+++ b/cypress/generated/addon-backgrounds.spec.ts
@@ -0,0 +1,12 @@
+describe('addon-backgrounds', () => {
+  before(() => {
+    cy.visitStorybook();
+  });
+
+  it('should have a dark background', () => {
+    // click on the button
+    cy.navigateToStory('button', 'with custom background');
+
+    cy.getPreviewIframe().should('have.css', 'background-color', 'rgb(51, 51, 51)');
+  });
+});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 38ae46e7a797..f93bb8f3494b 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -62,6 +62,13 @@ Cypress.Commands.add('getStoryElement', {}, () => {
     .then((storyRoot) => cy.wrap(storyRoot, { log: false }));
 });
 
+Cypress.Commands.add('getPreviewIframe', {}, () => {
+  cy.log('getPreviewIframe');
+  return cy
+    .get(`#storybook-preview-iframe`, { log: false })
+    .then((iframe) => cy.wrap(iframe, { log: false }));
+});
+
 Cypress.Commands.add('getDocsElement', {}, () => {
   cy.log('getDocsElement');
   return cy
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
index 2c303f0eb2ac..3f07aa462b7d 100644
--- a/cypress/support/index.d.ts
+++ b/cypress/support/index.d.ts
@@ -9,10 +9,16 @@ declare namespace Cypress {
      */
     visitStorybook(): Chainable<Element>;
 
+    /**
+     * Custom command to select the DOM element of the preview iframe in the canvas tab.
+     */
+    getPreviewIframe(): Chainable<Element>;
+
     /**
      * Custom command to select the DOM element of a story in the canvas tab.
      */
     getStoryElement(): Chainable<Element>;
+
     /**
      * Custom command to select the DOM element of a docs story in the canvas tab.
      */
diff --git a/lib/cli/src/frameworks/angular/1-Button.stories.ts b/lib/cli/src/frameworks/angular/1-Button.stories.ts
index 2b929b42a140..8e55fe0adf4b 100644
--- a/lib/cli/src/frameworks/angular/1-Button.stories.ts
+++ b/lib/cli/src/frameworks/angular/1-Button.stories.ts
@@ -24,7 +24,18 @@ Emoji.args = {
   text: '😀 😎 👍 💯',
 };
 
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  text: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
 
 export const TextWithAction = () => ({
   component: Button,
@@ -35,7 +46,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,
diff --git a/lib/cli/src/frameworks/aurelia/1-Button.stories.ts b/lib/cli/src/frameworks/aurelia/1-Button.stories.ts
index 34b329040d65..f24018ce9258 100644
--- a/lib/cli/src/frameworks/aurelia/1-Button.stories.ts
+++ b/lib/cli/src/frameworks/aurelia/1-Button.stories.ts
@@ -27,6 +27,19 @@ Emoji.args = {
   text: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  text: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => ({
   component: Button,
   props: {
@@ -36,7 +49,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,
diff --git a/lib/cli/src/frameworks/ember/1-Button.stories.js b/lib/cli/src/frameworks/ember/1-Button.stories.js
index 4ed1d267badb..33e147bfd78c 100644
--- a/lib/cli/src/frameworks/ember/1-Button.stories.js
+++ b/lib/cli/src/frameworks/ember/1-Button.stories.js
@@ -25,6 +25,19 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => ({
   template: hbs`
     <button {{action onClick}}>
@@ -37,7 +50,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   template: hbs`
diff --git a/lib/cli/src/frameworks/html/1-Button.stories.js b/lib/cli/src/frameworks/html/1-Button.stories.js
index a0b83f19d786..a4e346212a31 100644
--- a/lib/cli/src/frameworks/html/1-Button.stories.js
+++ b/lib/cli/src/frameworks/html/1-Button.stories.js
@@ -27,6 +27,19 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => {
   const btn = document.createElement('button');
   btn.type = 'button';
@@ -36,7 +49,6 @@ export const TextWithAction = () => {
 };
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => {
   const btn = document.createElement('button');
diff --git a/lib/cli/src/frameworks/marko/1-Button.stories.js b/lib/cli/src/frameworks/marko/1-Button.stories.js
index e82bebc4555a..f8680c7e0a9a 100644
--- a/lib/cli/src/frameworks/marko/1-Button.stories.js
+++ b/lib/cli/src/frameworks/marko/1-Button.stories.js
@@ -18,3 +18,16 @@ Text.args = {
   children: 'Button',
   onClick: action('onClick'),
 };
+
+export const WithCustomBackground = ButtonStory.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
diff --git a/lib/cli/src/frameworks/mithril/1-Button.stories.js b/lib/cli/src/frameworks/mithril/1-Button.stories.js
index d6f1849a8d49..b82facb09345 100644
--- a/lib/cli/src/frameworks/mithril/1-Button.stories.js
+++ b/lib/cli/src/frameworks/mithril/1-Button.stories.js
@@ -26,12 +26,24 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => ({
   view: () => m(Button, { onclick: () => action('This was clicked')() }, 'Trigger Action'),
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   view: () => m(Button, { onclick: linkTo('example-introduction--page') }, 'Go to Welcome Story'),
diff --git a/lib/cli/src/frameworks/preact/1-Button.stories.js b/lib/cli/src/frameworks/preact/1-Button.stories.js
index ab35ae4c5dc3..9d71d591fe8c 100644
--- a/lib/cli/src/frameworks/preact/1-Button.stories.js
+++ b/lib/cli/src/frameworks/preact/1-Button.stories.js
@@ -26,12 +26,24 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => (
   <Button onClick={() => action('This was clicked')()}>Trigger Action</Button>
 );
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => (
   <Button onClick={linkTo('example-introduction--page')}>Go to Welcome Story</Button>
diff --git a/lib/cli/src/frameworks/rax/1-Button.stories.js b/lib/cli/src/frameworks/rax/1-Button.stories.js
index 2a59dc7a753b..93cdfd660970 100644
--- a/lib/cli/src/frameworks/rax/1-Button.stories.js
+++ b/lib/cli/src/frameworks/rax/1-Button.stories.js
@@ -28,6 +28,19 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => (
   <button onClick={() => action('This was clicked')()} type="button">
     <RaxText>Trigger Action</RaxText>
@@ -35,7 +48,6 @@ export const TextWithAction = () => (
 );
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => (
   <button onClick={linkTo('example-introduction--page')} type="button">
diff --git a/lib/cli/src/frameworks/react/js/1-Button.stories.js b/lib/cli/src/frameworks/react/js/1-Button.stories.js
index 61d052333c6e..c5e028f4cc87 100644
--- a/lib/cli/src/frameworks/react/js/1-Button.stories.js
+++ b/lib/cli/src/frameworks/react/js/1-Button.stories.js
@@ -27,7 +27,19 @@ Emoji.args = {
     </span>
   ),
 };
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
 
 export const ButtonWithLinkToAnotherStory = () => (
   <Button onClick={linkTo('example-introduction--page')}>Go to Welcome Story</Button>
diff --git a/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx b/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx
index dbeb802afe6b..ddd046b47064 100644
--- a/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx
+++ b/lib/cli/src/frameworks/react/ts/1-Button.stories.tsx
@@ -22,7 +22,19 @@ Emoji.args = {
     </span>
   ),
 };
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
 
 export const ButtonWithLinkToAnotherStory = () => (
   <Button onClick={linkTo('example-introduction--page')}>Go to Welcome Story</Button>
diff --git a/lib/cli/src/frameworks/riot/1-Button.stories.js b/lib/cli/src/frameworks/riot/1-Button.stories.js
index c89dbee3d0a3..a1ca6f8c458c 100644
--- a/lib/cli/src/frameworks/riot/1-Button.stories.js
+++ b/lib/cli/src/frameworks/riot/1-Button.stories.js
@@ -26,6 +26,19 @@ Emoji.args = {
   content: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  content: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const WithScenario = () => ({
   tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }],
   template: '<MyButton>With scenario</MyButton>',
diff --git a/lib/cli/src/frameworks/svelte/1-button.stories.js b/lib/cli/src/frameworks/svelte/1-button.stories.js
index c219003c1e38..3f4fea8fc5b5 100644
--- a/lib/cli/src/frameworks/svelte/1-button.stories.js
+++ b/lib/cli/src/frameworks/svelte/1-button.stories.js
@@ -30,6 +30,19 @@ Emoji.args = {
   text: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  text: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => ({
   Component: Button,
   props: {
@@ -41,7 +54,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   Component: Button,
diff --git a/lib/cli/src/frameworks/vue/1-Button.stories.js b/lib/cli/src/frameworks/vue/1-Button.stories.js
index 7e9d0b58a409..fd3dba225e3f 100644
--- a/lib/cli/src/frameworks/vue/1-Button.stories.js
+++ b/lib/cli/src/frameworks/vue/1-Button.stories.js
@@ -25,6 +25,19 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => ({
   components: { MyButton },
   template: '<my-button @click="action">Trigger Action</my-button>',
@@ -32,7 +45,6 @@ export const TextWithAction = () => ({
 });
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => ({
   components: { MyButton },
diff --git a/lib/cli/src/frameworks/web-components/1-Button.stories.js b/lib/cli/src/frameworks/web-components/1-Button.stories.js
index 133bd4f98806..5620616d7a13 100644
--- a/lib/cli/src/frameworks/web-components/1-Button.stories.js
+++ b/lib/cli/src/frameworks/web-components/1-Button.stories.js
@@ -26,6 +26,19 @@ Emoji.args = {
   children: '😀 😎 👍 💯',
 };
 
+export const WithCustomBackground = Template.bind({});
+WithCustomBackground.args = {
+  children: 'Defined via addon-backgrounds!',
+};
+
+WithCustomBackground.storyName = 'With custom background';
+
+WithCustomBackground.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+};
+
 export const TextWithAction = () => html`
   <button @click=${() => action('This was clicked')()}>
     Trigger Action
@@ -33,7 +46,6 @@ export const TextWithAction = () => html`
 `;
 
 TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => html`<button
   @click=${linkTo('example-introduction--page')}