Añadir modo oscuro (Dark Mode) en React usando Mui

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos añadir modo oscuro usando React y la librería de diseño MUI.

Lo primero que haremos es crear dos temas oscuro y claro:

Theme.tsx

// theme.ts
import { createTheme, Theme } from '@mui/material/styles';
import '@fontsource/roboto';
import '@fontsource/roboto/100.css';
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';

const lightTheme: Theme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: 'teal',
    },
    background: {
      default: '#FFFFFF'
    },
  },
  typography: {
    fontFamily: 'Roboto, sans-serif',
  },
  components: {
    MuiDialog: {
      styleOverrides: {
        root: {
          backgroundColor: 'rgba(0, 0, 0, 0.2)',
        },
      },
    },
  },
});

const darkTheme: Theme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: primary,
    },
    background: {
      default: '#000000';
    },
  },
  typography: {
    fontFamily: 'Roboto, sans-serif',
  },
  components: {
    MuiDialog: {
      styleOverrides: {
        root: {
          backgroundColor: 'rgba(0, 0, 0, 0.2)',
        },
      },
    },
  },
});

export { lightTheme, darkTheme };

Una vez creados vamos a generar la lógica que establecerá el modo oscuro según las prefrencias del usuario.

Dentro de nuestro _app.tsx o archivo principal:

const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

Con esta mediaQuery podemos establecer el modo oscuro si el usuario lo tiene activado en el sistema.

Lo añadimos dentro de la función de renderizado.

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
...
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

...
  return (
    <ThemeProvider theme={prefersDarkMode ? darkTheme : lightTheme}>

Si queremos cambiar nuestro fichero de colores por DarkMode pondremos:

const prefersDarkMode = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

export const marronTransparente = prefersDarkMode ? 'rgba(234, 85, 72, 0.9)' : 'rgba(121, 85, 72, 0.9)';