1. Install a latest v1 version of the addon (e.g., 1.1.0).

2. Register the addon with your Storybook configuration in the .storybook/main.js file.

   module.exports = {
     addons: [
   +    '@atlaskit/storybook-addon-design-system'
     ]
   };
   

By default, the theme is set to auto (which matches the browser's theme). However, you can easily override this default by specifying a custom theme using the adsTheme parameter in your .storybook/preview.js file.

In your .storybook/preview.js file, you can set the adsTheme parameter to either 'light' or 'dark':

const preview: Preview = {
    parameters: {
        adsTheme: 'light' | 'dark',
    }
    // ... other parameters
}
export default preview;

1. Install a pre-1.0 version of the addon (e.g., 0.8.0).

2. Register the addon with your Storybook configuration in the .storybook/main.js file.

   module.exports = {
     addons: [
   +    '@atlaskit/storybook-addon-design-system'
     ]
   };
   

3. Initialise the globalTypes.adsTheme property in the global context

4. Disable the built in backgrounds add on, as it conflicts with the ADS theming

Both step 3 and step 4 can be done in the preview.js file:

+ import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';

const preview = {
  globalTypes: {
+     adsTheme: {
+       description: 'Atlassian Design System theming options',
+       defaultValue: 'light',
    },
  },
  decorators: [
+     withDesignTokens
  ],
  parameters: {
+     /**
+      * Disabling the builtin backgrounds addon so it doesn't override the ADS theming
+      * See: https://storybook.js.org/docs/essentials/backgrounds#disable-backgrounds
+      */
+     backgrounds: { disable: true },
  },
};

export default preview;

1. Install a pre-1.0 version of the addon (e.g., 0.8.0).

2. Register the addon with your Storybook configuration in the .storybook/main.js file.

   module.exports = {
     addons: [
   +    '@atlaskit/storybook-addon-design-system'
     ]
   };
   

3. Add the decorator to .storybook/preview.js, which is responsible for applying the logic which has the ability to modify the DOM of your stories.

   + import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
   
   const { addDecorator } = require('@storybook/react');
   
   + addDecorator(withDesignTokens);