Branding & Assets

Customizing the Design

カスタムなテーマカラーへの一括変更、ファビコン (Favicon) やアプリアイコンの差し替え、マップ内QRコードの作成方法

1. テーマカラーの変更

src/constants/custom.config.ts の theme.primaryColor をテーマカラーのカラーコード (HEX) に変更するだけで、ボタンなどの全体配色が一瞬で切り替わります。

src/constants/custom.config.ts

export const CUSTOM_CONFIG: EventConfig = {
  theme: {
    primaryColor: {
      light: "#b98eee", // 例: 淡い青紫
      dark: "#362841",  // ダークモード用の暗めの紫
    },
    backgroundColor: {
      light: "#fafafa",
      dark: "#121214",
    },
  },
  ...
};

2. アプリアイコン / ファビコンの差し替え

ブラウザのタブに表示されるファビコンは、public/favicon.ico を置き換えるだけで反映されます。