From Storybook 7+, the backgrounds addon was refactored. Now you must:

1. Define backgrounds in preview.tsx like this

   // preview.tsx
   const preview: Preview = {
     parameters: {
       backgrounds: {
         options: {
           dark: { name: 'Dark', value: '#000000' },
           light: { name: 'Light', value: '#FFFFFF' },
         },
       },
     },
   };
   

2. Stories like this

   export const OnDark: Story = {
     globals: {
       backgrounds: { value: 'dark' },
     },
   };
   

For more details: https://storybook.js.org/docs/essentials/backgrounds