Dark mode support in React and Material-UI, though I do not know whether dark mode is good or bad

It is very easy to support the Dark Mode in Material-UI and React as the Official documentation.

import React from "react";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

function App() {
  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");

  const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: prefersDarkMode ? "dark" : "light",
        },
      }),
    [prefersDarkMode]
  );

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Routes />
    </ThemeProvider>
  );
}

Dark mode

Dark mode basics

Dark mode is set by the user's smartphone or computer OS or browser to change the display to black. It is a mechanism to change the background of the base.

Dark mode is not simply one of the color variations of a website, it is a way to change the user's The goal is to achieve the display that the For users, the black base is better for those who prefer a black base, and the white base is better for those who prefer a white base, and for those who want to use it at different times of the day, to switch between them at different times of the day. This is configured at the OS and browser levels, so from a web developer's point of view, the and to switch the color scheme by determining the parameters of whether it is in dark or light mode. The advantages of Dark Mode are as follows

The advantages of dark mode are as follows

  • Easy on the eyes at night and in dimly lit environments
  • Better concentration, better letter recognition
  • The battery lasts longer (in some cases consuming 50% or more less power!)

Is Dark Mode Effective?

It is often said that dark mode is effective, but is it true? Items other than power consumption are almost denied in the Wired article.

From what I've read in this article, I'd be able to concentrate better in normal mode, and I'd be less likely to misread it. It also means higher performance. Product owners are trying to increase the amount of time spent on their apps and sites by adopting a dark mode, and I have a hunch that it is.

However, it hasn't been long since the dark mode came out, so further research results will come out in the future. This site also supports dark mode, but we may discontinue dark mode in the future depending on the situation. For the time being, various devices on this site are dark mode compatible, and dark mode support will continue for accessibility purposes.

Basics for dark mode

The basics of dark mode support is to use media queries to set up a stylesheet. It's very easy to do. However, you need to set up each element individually, so the total cost to support it will be large. Once a website is dark mode compatible, it may be difficult to get rid of it in terms of sunk cost.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #11181f;
    color: #ffffff;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #11181f;
  }
}

You can try this code in the playground below.

[Introduction to Web programming] HTML, CSS, Javascript that can be executed immediately by browser

Dark mode support in Material-UI

This is already prepared on the Material-UI side, so you can use it only with the following settings.

import React from "react";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

function App() {
  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");

  const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: prefersDarkMode ? "dark" : "light",
        },
      }),
    [prefersDarkMode]
  );

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Routes />
    </ThemeProvider>
  );
}

If you want to customize each item, it is as follows. All you have to do is import palettes, typography, etc. defined in separate files, and pass them as arguments to createMuiTheme.

import React from "react";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

import palette from "./palette";
import typography from "./typography";
import overrides from "./overrides";

function App() {
  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");

  const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          ...palette,
          type: prefersDarkMode ? "dark" : "light",
        },
        typography,
        overrides,
        zIndex: {
          appBar: 1200,
          drawer: 1100,
        },
      }),
    [prefersDarkMode]
  );

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Routes />
    </ThemeProvider>
  );
}

For example, palette has the following contents. By setting the settings collectively like this, management becomes easier.

import { colors } from "@material-ui/core";

const white = "#FFFFFF";
const black = "#000000";

export default {
  black,
  white,
  primary: {
    contrastText: white,
    dark: "#00a896",
    main: "#127681",
    light: "#00a896",
  },
  secondary: {
    contrastText: white,
    dark: "#f4e04d",
    main: "#f3c623",
    light: "#ffc53a",
  },
  success: {
    contrastText: white,
    dark: colors.green[900],
    main: colors.green[600],
    light: colors.green[400],
  },
  info: {
    contrastText: white,
    dark: colors.blue[900],
    main: colors.blue[600],
    light: colors.blue[400],
  },
  warning: {
    contrastText: white,
    dark: colors.orange[900],
    main: colors.orange[600],
    light: colors.orange[400],
  },
  error: {
    contrastText: white,
    dark: colors.red[900],
    main: colors.red[600],
    light: colors.red[400],
  },
  icon: "#00a896",
  divider: colors.grey[200],
};

To stop supporting dark mode

Just remove the prefersDarkMode item. I don't think there is much need to delete various settings for dark mode.

import React from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

const theme = createMuiTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Routes />
    </ThemeProvider>
  );
}

See you!

Updated at: Thu Jun 25 2020

© 2020-presentTerms|Privacy