Add class on body when we use dark mode MUI react [Guide #2023]

Open src\components\settings\index.js

 
import { useState, useEffect } from 'react';
import { useTheme, alpha, styled } from '@mui/material/styles';
import useSettings from '../../hooks/useSettings';
import SettingMode from './SettingMode';


  const theme = useTheme();
  const { themeMode, themeDirection, themeColorPresets, themeStretch, themeLayout, onResetSetting } = useSettings();
  const [open, setOpen] = useState(false);

  const notDefault =
    themeMode !== defaultSettings.themeMode ||
    themeDirection !== defaultSettings.themeDirection ||
    themeColorPresets !== defaultSettings.themeColorPresets ||
    themeLayout !== defaultSettings.themeLayout ||
    themeStretch !== defaultSettings.themeStretch;


  useEffect(() => {
    if (theme.palette.mode === 'dark') {
      document.body.className = 'DarkModeOn';
    } else {
      document.body.className = '';
    }
  }, [theme.palette.mode]);