【MUI】カラーのカスタマイズ

はじめに

MUIのSwitchでモード切替機能を実装する中で、カラーを変更したいと思ってやってみたのですが、若干わかりにくくて開発者ツール使ってデフォルトの色がどこで設定されているか探して～等やってみて出来たのでやり方共有します。

MUIのSwitch

下記のようなやつです。

やり方

インストールはされているものとします。

import

import Switch from "@mui/material/Switch";
import { createTheme, ThemeProvider } from "@mui/material/styles";

カラーを設定

const theme = createTheme({
  palette: {
    primary: {
      main: "#AF8C69",//スイッチONの時の色
    },
    common: {
      black: "#AF8C69",//スイッチOFFの時の色
    },
  },
});

OFFの時の色を結構探しました。。。

色を指定する

<ThemeProvider theme={theme}>
          <div className="relative flex flex-col items-center">
            <Switch
              onChange={changeMode}
              checked={mode === "support"}
              color="primary"
              className="relative"
            />
            <div className="text-[10px] absolute top-8">自動採番</div>
          </div>
</ThemeProvider>

これでOKです。

公式

ONの時の色は普通にカスタマイズのページ見て設定できました。

OFFの時のデフォルトが黒にオパシティが設定されていて、どこで変えるんだーと探しました。

下記のページで見つけました。

開発者ツールみると、色が＃000になっていてたのでそれをひたすら探して、commonのところに見つけたのでこれかなと思ってthemeに足したらいけてスッキリでした。

おわりに

あんまり個人的に色にこだわるタイプではないのでOFFの時の探すのめんどくさくてもうグレーのままでいっかって思ったのですが、他のところ全部統一しているのにここだけは手抜き感すごいのでちょっと粘りましたw

MUIのカラーのカスタマイズには応用できると思うので参考になれば嬉しいです。