React Dark Mode switch in Material UI Dashboard

Published in

Project Heuristics

5 min readMay 11, 2020

Implementing a Dark theme switch in a dashboard designed using Material-UI

Dark Theme is a relatively new design concept, introduced into the development space back in 2018 and within a span of 2 years, we can’t imagine our products without a night mode! With almost every web-app and apps following the suite, let’s take a deeper dive and first ascertain why do we need a night mode in the first place?

Why Dark Mode?

While this question seems redundant and should belong to a FAQ, I’d still like to take the opportunity and elaborate on the positives about the dark themed user interfaces.

Dark theme saves battery life.
They reduce eye strain in a low light environment (The Netflix UI makes sense suddenly, doesn’t it?)
The Dark theme puts a focus on your content. You can strategically utilize the bright colours for your main content to stand out (example: The Spotify UI)
The blue light emitted is minimized due to the reduction in screen glare.
Dark is simply sexier, period

What will you learn?

At the end of this walkthrough, you would know how to:

Use palettes with Material-UI
Pass switchable themes in child react components
Customize your theme colors
Attach a state object to a switch component

What’s the final product?

You can look up the code from here :
Github Repository: uds5501/dashboard-switch-themes
Live Deployment: dashboard-switch-themes

With the theory laid out, let’s take a look at what will be our end product

Dark Theme Dashboard — Dark Theme Switch on a Dashboard

All of this was designed using Material-UI’s standard components and pallets. Since my goal was to focus on implementing the theme switch feature, I went ahead and used an open-sourced material-ui “getting started” dashboard template whose source code has been kept in the resources section in the end. (and a sandbox has been embedded too, just so you know, you can play around with it 😄)

Project Structure

I worked on my project on sandbox which honestly made the development life cycle super smooth and the sandbox template I chose was React by CodeSandbox Team, and the final project structure is as follows.

Here, the dashboard folder holds the file taken from the Material-UI dashboard template. Package.json holds the classic package names and index.js file handles the import of App.js and renders the ReactDOM into index.html (not shown in the sandbox)

here, I have created darkState state which will be saving the user preference for the object, whether the user wants a light theme or a dark theme, keeping the default value of false, This will be responsible for the type of Material UI theme we want to be passed in our components. I have used a constant object named darkTheme which is one such MuiTheme object.

I am using a function handleThemeChange() to change the state of the darkState variable and hence change the pallet type.

Now, to change the theme of the passed components, all we need to do is enclose them in <ThemeProvider> tag and voila, your job’s done!

Note: I am using a simple <div> Sample Text </div> for now for the sake of simplicity. This should be replaced with actual Dashboard components to achieve the desired effects.

Implementing your theme switcher

Now since it’s clear how to pass the theme into our child components, let’s figure out how to implement a slider that will toggle the darkState on and off.

I have imported Switch component (one of the key material-ui components) and used it under our div element. I have kept it’s checked state equal to the darkState value and passed the already created handleThemeChange() function as an onChange() target.

Adding some custom colours in the palette🌈

The basic objective has been achieved by now, but, it’s kinda boring and the Dashboard components don’t precisely cater to our design appetite, so let’s play around with the colours.

Citing the Material UI Palette documentation, it can be ascertained that a colour intention is a mapping of a palette to a given intention within your application. The theme exposes colour intentions, from whom we will be focussing on:

primary — used to represent primary interface elements for a user.
secondary — used to represent secondary interface elements for a user.

The default palette uses the shades prefixed with A (A200, etc.) for the secondary intention, and the un-prefixed shades for the other intentions.

reference colour cards — Reference colour cards

Above shown are colour cards for reference. Now, in our themes, we would like to the following theme map:

Light Theme Palette

Primary: Light Blue (shade: 500)
Secondary: Deep Purple (shade: 500)

Dark Theme Palette

Primary: Orange (shade: 500)
Secondary: Deep Orange (shade: 500)

This can be implemented using the following snippetof code:

and this much should do it.

Fool around with the code!

This is all for implementing a switch between dark and light themes! Go ahead and try it out on your own here:

Or you can check out the Netlify deployment here: dark-theme-switch

You can check out the resources cited during this tutorial’s development in the section below and that’s about it, you have now learned how to implement a theme switcher for your own web app!