本当に、そのcreate-themeって必要？

本当に、そのcreate-themeって必要なの？

何故この記事を書こうと思ったのか

Reactの開発現場にて、既存のコードを眺めていたところ、
これって特に何も考えずにとりあえず形上、create-theme使ってないか？っていう場面に遭遇したので今回記事を作成しました。themeの呼び出しでカラーコード引っ張ってくると、実際のところCSSは読みづらいなぁ、という考えが自分的にはあります。
paletteを使うメリットはあるけれど、あまり使いきれてないなら別の方法のが楽じゃない？っていう感覚で書いて�いますので、
参考程度にでも見ていただきたいですし、意見があったら教えていただきたいなぁと思います。

サンプルコードと対応策を考えてみました。

割と開発現場でよく見がちなこのコード。

// theme.js
export const Theme = {
  palette: {
    primary: {
      main: '#274a78',
    },
    secondary: {
      main: '#f50057',
    }
  },
};

配色管理をしているだけのtheme....しかも2色だけ。
styled-componentsでも、emotionsでもありがちなコードですよね。
この2色のためだけに、わざわざtheme Provider使ってラップして〜
定義した色の呼び出しはこんな感じで〜〜。

import styled from 'styled-components';

export const StyleButton = styled.button`
  background-color: ${({ theme }) => theme.palette.primary.main};
`;

2色の管理のためだけに、この作業の繰り返しは非常〜に面倒！！

時々palette開くの面倒になってそのままカラーコード直書きしてしまったりね。

この場合って、普通〜に定数化したコンフィグファイル作った方が楽なんじゃないか？と考えました。

themeを使わずにconfigディレクトリでも作成して、colors.tsを作成します。
※chatGPTで生成した適当なカラーコードとキー群です。

// colors.js
export const COLORS = {
  PRIMARY: '#1976d2',
  PRIMARY_LIGHT: '#63a4ff',
  PRIMARY_DARK: '#004ba0',
  ACCENT: '#dc004e',
  ACCENT_LIGHT: '#ff6090',
  ACCENT_DARK: '#9a0036',
  BACKGROUND: '#fff',
  TEXT_PRIMARY: '#000',
};

使いたい時の呼び出し方

importしたCOLORSから補完機能で出力されているキー名を選択する。これだけで完了です。

感想

例えば社内向けのシステムとか小規模なシステムでは特に活用できるんじゃないかと思います。ご意見もお待ちしております。
ありがとうございました。