How can I customize palette for dark mode in MUI?

Question

I am learning Theming in material UI. Since, I need to customize palette to get the dark mode, I am actually not sure in which way I have to customize that will trigger affect on system's background, buttons, text and stuff. I expect, your suggestion will guide me towards right direction.

My theme.palette.js

import {
  amber, grey, green, indigo, red, common, blue,
} from '@mui/material/colors';

const colors = {
  white: common.white,
  background: grey[50],
  primary: indigo[900],
  tertiary: blue[500],
  secondary: green[500],
  positive: green[500],
  medium: amber[700],
  negative: red[500],
  neutral: grey[500],
  geometry: '#3bb2d0',
  dark: grey[800],
};

export default {
  background: {
    default: colors.background,
  },
  primary: {
    main: colors.primary,
  },
  secondary: {
    main: colors.secondary,
    contrastText: colors.white,
  },
  tertiary: {
    main: colors.tertiary,
  },
  colors,
};

Another thing is, How can I add switch to settings page and change state for the whole system. Or exactly where should I place the <Switch /> component?

My index.js

import 'typeface-roboto';
import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import {
  CssBaseline,
  ThemeProvider,
  StyledEngineProvider,
} from '@mui/material';
import store from './store';
import { LocalizationProvider } from './common/components/LocalizationProvider';
import ErrorHandler from './common/components/ErrorHandler';
import theme from './common/theme';
import Navigation from './Navigation';
import preloadImages from './map/core/preloadImages';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import NativeInterface from './common/components/NativeInterface';
import ServerProvider from './ServerProvider';

preloadImages();

const root = createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <LocalizationProvider>
      <StyledEngineProvider injectFirst>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <ServerProvider>
            <BrowserRouter>
              <Navigation />
            </BrowserRouter>
          </ServerProvider>
          <ErrorHandler />
          <NativeInterface />
        </ThemeProvider>
      </StyledEngineProvider>
    </LocalizationProvider>
  </Provider>,
);

serviceWorkerRegistration.register();