Fuse React 테마 변경하기

https://fuse-react-vitejs-demo.fusetheme.com/dashboards/project

Fuse React는 리액트 기반의 관리자 / 대시보드 템플릿으로, Material UI와 Tailwind CSS를 사용하고 있다.

회사에서 관리자 페이지를 구축할 때, 이 템플릿을 사용하고 있었는데 클라이언트가 디자인을 커스텀해달라는 요구사항이 있어서 기본적으로 제공하는 디자인 말고 자체적인 디자인을 적용해야 했다.

그래서 이 Fuse 라는 템플릿의 기본 테마를 CSS로 커스텀하는 법을 정리해봤다.

1. 테마 설정 파일 수정 및 새로운 테마 생성

src/app/configs/themesConfig.js에서 테마를 수정 및 새로운 테마를 생성할 수 있다.

export const myCustomTheme = {
  palette: {
    mode: 'light',
    primary: {
      light: '#bec1c5',
      main: '#252f3e',
      dark: '#0d121b',
    },
// 기타 색상 설정...
  },
// 기타 테마 설정...
};

myCustomTheme 라는 이름의 새로운 변수를 만들고,

그 안에서 palette로 여러가지 테마를 커스텀으로 설정해주면 된다.

2. 테마 적용

src/app/configs/settingsConfig.js 에서 기본 테마로 설정할 수 있다.

import { myCustomTheme }from './themesConfig';
 
const settingsConfig = {
  theme: {
    main: myCustomTheme,
    navbar: myCustomTheme,
    toolbar: myCustomTheme,
    footer: myCustomTheme,
  },
// 기타 설정...
};

3. 컴포넌트별 테마 설정

특정 컴포넌트에 대해서만 테마를 변경하고 싶다면, Material-UI의 ThemeProvider를 사용할 수 있다.

import { ThemeProvider }from '@mui/material/styles';
import { myCustomTheme }from 'app/configs/themesConfig';
 
function ThemedComponent() {
return (
    <ThemeProvider theme={myCustomTheme}>
      {/* 이 컴포넌트와 자식 컴포넌트들은 myCustomTheme를 사용 */}
    </ThemeProvider>
  );
}

4. 기본 폰트 변경

기본 폰트를 변경하려면 마찬가지로 src/app/configs/themesConfig.js 를 수정해준다.

import { fontFamily }from '@mui/system';
import { ThemeOptions }from '@mui/material';
 
export const themesConfig: FuseThemesType = {
    default: {
        palette: {
// ....
        },
        typography: {
            fontFamily: ['Noto Sans KR', '"Helvetica"', 'Arial', 'sans-serif'].join(','),
            }as ThemeOptions['typography'],
        }
    }
 
export default themesConfig;

config의 typography 안에 fontFamily를 사용하여 원하는 폰트를 설정해주면 된다.