React
https://fuse-react-vitejs-demo.fusetheme.com/dashboards/project
Fuse React는 리액트 기반의 관리자 / 대시보드 템플릿으로, Material UI와 Tailwind CSS를 사용하고 있다.
회사에서 관리자 페이지를 구축할 때, 이 템플릿을 사용하고 있었는데 클라이언트가 디자인을 커스텀해달라는 요구사항이 있어서 기본적으로 제공하는 디자인 말고 자체적인 디자인을 적용해야 했다.
그래서 이 Fuse 라는 템플릿의 기본 테마를 CSS로 커스텀하는 법을 정리해봤다.
src/app/configs/themesConfig.js에서 테마를 수정 및 새로운 테마를 생성할 수 있다.
export const myCustomTheme = {
palette: {
mode: 'light',
primary: {
light: '#bec1c5',
main: '#252f3e',
dark: '#0d121b',
},
// 기타 색상 설정...
},
// 기타 테마 설정...
};myCustomTheme 라는 이름의 새로운 변수를 만들고,
그 안에서 palette로 여러가지 테마를 커스텀으로 설정해주면 된다.
src/app/configs/settingsConfig.js 에서 기본 테마로 설정할 수 있다.
import { myCustomTheme }from './themesConfig';
const settingsConfig = {
theme: {
main: myCustomTheme,
navbar: myCustomTheme,
toolbar: myCustomTheme,
footer: myCustomTheme,
},
// 기타 설정...
};특정 컴포넌트에 대해서만 테마를 변경하고 싶다면, Material-UI의 ThemeProvider를 사용할 수 있다.
import { ThemeProvider }from '@mui/material/styles';
import { myCustomTheme }from 'app/configs/themesConfig';
function ThemedComponent() {
return (
<ThemeProvider theme={myCustomTheme}>
{/* 이 컴포넌트와 자식 컴포넌트들은 myCustomTheme를 사용 */}
</ThemeProvider>
);
}기본 폰트를 변경하려면 마찬가지로 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를 사용하여 원하는 폰트를 설정해주면 된다.