Next.js MUI 5 Dark Mode Theme Starter Repository

This is a Next.js project bootstrapped with create-next-app.

• You can see a running version here
• You can see the running storybook here

you can read a blog post here about how I set the dark mode up in Storybook

Some of the configurations for this project, for prettier and husky etc was written following this post by Paulin Trognon

The application is set up with the following features.

• Next.js with Typescript
• Dark theme with Material UI 5 (no dark theme flashing, apart from if it chooses dark mode based on the users system preferences, this will only ever occur once on first load!)
• Storybook with dark theme available globally from the Storybook toolbar
• Storys will have dark theme applied with no extra configuration needed.
• Storyshots (snapshots automatically generated from storybook stories) configured
• Jest configured

Getting Started

First, run the development server:

yarn dev
#or
yarn storybook
#or
yarn test

To run storybook, you will need to set up your own Storybook on Chromatic and add a .env containing CHROMATIC_PROJECT_TOKEN="[yourprojecttoken]"

To run the github hook you will need to add this project token in github to your repository secrets info here

Open http://localhost:3000 with your browser to see the result.