🎨

[OSS] Mantine UIのprimaryColorがどのように設定されてるのか調べてみた

2023/01/14に公開

OSS

mantineui

tech

Mantine UIのprimaryColorのoverrideで「ん？」と思ったことがあったので調べてみた。
https://ui.mantine.dev/

primaryColorの設定について

Mantine UIでprimaryColorを設定するには下記の中から選択する必要があります。
https://yeun.github.io/open-color/

でも、ほとんどはopen-colorの中に自分達が使用したいprimaryColorはないと思っていて、その場合は下記のように追加することができます。

export const theme: MantineThemeOverride = {
  colors: {
    primary: ["#000000"],
  },
  primaryColor: "primary",
};

実際にcomponentを表示させてみるが・・・

こんな感じに書けば背景が#000000のボタンが表示されると思っていたんですが、実際にはblue（Mantine UIのdefault color）で表示されました。

<Button>Primary Button</Button>

そもそもcolorsの設定方法が配列である

ドキュメントに書いてある通り、色は配列で10個まで指定できるようになっています。
恐らく、内部で持っているdefaultのindexがあってそのindexで取得して色を設定してるんだろうなと思いました。

Mantine UIのコードを読んでみよう

結論

primaryShadeでdefaultのindexが6として設定されてました。

なので、極端な話下記のようにするとprimaryColorは#000000として設定できますが、コードとしてはカッコ悪いし、PRで「なんで同じような値を設定してるんですか？」と質問が飛んできます。

export const theme: MantineThemeOverride = {
  colors: {
    primary: [
      "#000000",
      "#000000",
      "#000000",
      "#000000",
      "#000000",
      "#000000",
      "#000000",
    ],
  },
  primaryColor: "primary",
};

解決方法

primaryShadeに0を設定してあげれば無駄に配列の要素を設定しなくて済みます。

export const theme: MantineThemeOverride = {
  colors: {
    primary: ["#000000"],
  },
  primaryColor: "primary",
+ primaryShade: 0,
};

primaryShadeの数値で色を取得してるのはこの辺り

これで下記のように書くと#000000のbuttonが表示されます。

<Button>Primary Button</Button>

終わりに

疑問に思ったらコード読んでみると面白いです。読む時間を確保することは必要ですが、内部の動きが実際にどうなってるのかを知ると理解度が深まります。
また、UIライブラリ系は難しいロジックなどもないと思うので、OSSを読んでみるとっかかりとしては最適なのでは？と個人的に思っています。