Steve Kinney

Building Design Systems with Storybook

Forcing Dark Mode

Just like I don’t want to set arguments by default, sometimes, I want to force a story into dark mode. That’s easily done with a Storybook feature called parameters.

export const Dark: Story = {
	parameters: {
		themes: {
			themeOverride: 'dark',
		},
	},
};

As long as we’re on the topic, you can also force a viewport:

export const Mobile: Story = {
	parameters: {
		viewport: {
			defaultViewport: 'mobile1',
		},
	},
};

Last modified on .