Backstage) Install 3. Theme 바꾸기

 

1) packages/app/src/App.tsx

에 아래 코드를 추가합니다.

import { UnifiedThemeProvider, themes, } from '@backstage/theme'; // MUI themes
import LightIcon from  '@material-ui/icons/WbSunny'; // Additional icons
import { multicolorTheme } from './theme/theme'; // Custom multicolor theme

 

  components: {
   SignInPage: props => (
     <SignInPage
       {...props}
       auto
       provider={githubProvider}
     />
   ),
  },
  themes: [
    // Keeping the original themes is completely optional
    {
      id: 'default-dark',
      title: 'Default Dark',
      variant: 'dark',
      Provider: ({ children }) => <UnifiedThemeProvider theme={themes.dark} children={children} />,
    },
    {
      id: 'default-light',
      title: 'Default Light',
      variant: 'light',
      Provider: ({ children }) => <UnifiedThemeProvider theme={themes.light} children={children} />,
    },
    {
    id: 'multicolor-theme',
    title: 'Multicolor Theme',
    variant: 'light',
    icon: <LightIcon />,
    Provider: ({ children }) => <UnifiedThemeProvider theme={multicolorTheme} children={children} />,
    }
  ]

 

 

 

2) packages/app/src/theme/theme.tsx 폴더와 파일을 생성합니다.

packages/app/src/theme/theme.tsx

import {
    UnifiedThemeProvider,
    createUnifiedTheme,
    palettes
} from '@backstage/theme';

export const multicolorTheme = createUnifiedTheme({
    palette: {
        ...palettes.light,  // Take everything from the default light theme, then change what you want
        primary: {
            main: '#0c005aff', // Relation
        },
        secondary: {
            main: '#980098ff', // Relation Component  
        },
        background: {
            default: '#dddddd7b', // Light red  
        },
        navigation: {
            background: '#ffffff', // Lighter red background for the left-side panel  
            indicator: '#ffb3ff8f', // Red color for the selected indicator  
            selectedColor: '#2e002eff', // White text color for the selected item  
            color: '#980098ff', // Light gray text color for unselected items  
            navItem: {
                hoverBackground: '#ffc8ff8f', // Darker red for the hover background  
            },
        },
    },
    components: {
        MuiButton: {
            styleOverrides: {
                root: {
                    textTransform: 'none', // Remove uppercase text  
                },
                containedPrimary: {
                    backgroundColor: '#980098ff',
                    '&:hover': {
                        backgroundColor: '#ffffff', // Slightly darker red on hover  
                    },
                    color: '#ffffff',
                },
                containedSecondary: {
                    backgroundColor: '#980098ff',
                    '&:hover': {
                        backgroundColor: '#ffffff', // Slightly darker red on hover  
                    },
                    color: '#ffffff',
                },
            },
        },
    },
    fontFamily: 'Noto Sans, sans-serif',
    defaultPageTheme: 'home',
});

 

 

3) Settings 메뉴에서 Appearance가 표시됩니다.