JOY UI で全体のスタイルを変更する方法 TS 対応

// src/themes/theme.ts
import { extendTheme } from '@mui/joy/styles';

const theme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        primary: {
          50: '#e3f2fd',
          100: '#bbdefb',
          200: '#90caf9',
          300: '#64b5f6',
          400: '#42a5f5',
          500: '#2196f3',
          600: '#1e88e5',
          700: '#1976d2',
          800: '#1565c0',
          900: '#0d47a1',
        },
      },
    },
  },
  fontFamily: {
    display: 'Roboto, sans-serif',
    body: 'Arial, sans-serif',
  },
});

export default theme;

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './styles/App.css';
import { RecoilRoot } from 'recoil';

// theme
import { CssVarsProvider } from '@mui/joy';
import theme from './themes/theme';

// component
//　省略

function App() {
  return (
    <RecoilRoot>
      <CssVarsProvider theme={theme}>
      <Router>
        <Header />
        <Analytics />
        <Routes>
          <Route path="/" element={<Top />} />
        </Routes>
      </Router>
      </CssVarsProvider>
    </RecoilRoot>
  );
}

export default App;

// 
//  このファイルは、JoyUI のテーマを定義するファイルです。
//  created date: 2025.01.20
//  created by: coiai
// 

import { extendTheme } from '@mui/joy/styles';

// OSごとのフォント設定
const getSerifFont = () => {
  const platform = navigator.platform.toLowerCase();

  if (platform.includes('win')) {
    return 'Yu Mincho, serif'; // Windows の場合は遊明朝
  } else if (platform.includes('mac')) {
    return 'Hiragino Mincho Pro, serif'; // Mac の場合はヒラギノ明朝
  } else {
    return 'serif'; // その他のOSはデフォルトのセリフ体
  }
};

const theme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        primary: {
          50: '#e3f2fd',
          100: '#bbdefb',
          200: '#90caf9',
          300: '#64b5f6',
          400: '#42a5f5',
          500: '#2196f3',
          600: '#1e88e5',
          700: '#1976d2',
          800: '#1565c0',
          900: '#0d47a1',
        },
      },
    },
  },
  fontFamily: {
    display: getSerifFont(), // 見出し用フォント
    body: getSerifFont(),    // 本文用フォント
  },
});

export default theme;