It's getting dark in here

One of the big trends in 2019 was adding a dark mode to your app or webpage. Well, this page got one now too.

Switching to a dark theme in MaterialUI is pretty easy. Just set the property in your theme config like this:

createTheme({
  palette: {
    type: 'dark'
  }
})

If you change your background and paper colors like I did here you also have to provide their dark counterparts like this:

createTheme({
  palette: {
    background: {
      default: prefersDarkMode ? '#3c3c3c' : '#fcfcfc',
      paper: prefersDarkMode ? '#314152' : '#f1f1f1',
    },
  }
})

The hard part is finding the right colors for your dark mode. Just using black with white text might seem the way to go but when you want to add a little touch of color and nuance to your page you got to make sure that it’s still legible. Oh, and dont forget a good contrast for the a11y crowd.

The final touch is a themeable favicon, thanks to this demo. Requirements are that you use a svg icon and dont care about IE11 and such. Then it’s just adding inline styles into your svg using the mediaquery for dark themes:

<svg>
  <style>
    ....
    @media (prefers-color-scheme: dark) {
      ...
    }
  </style>
  ...
</svg>

I could make add some fancy toggle to the site for switching between dark and light mode. But that’s for another day…