Singularity React

Theme Schemes

Singularity React utilizes Material-UI's theming framework by default. You can create custom color schemes by defining theme configuration objects.

Configuration

To learn about available configuration options, refer to Material UI's theme configuration documentation.

Theme settings are located in the src/configs/themesConfig.ts file.

/**
* The themesConfig object is a configuration object for the color themes of the Singularity application.
*/
export const themesConfig: SingularityThemesType = {
    default: {
        palette: {
            mode: 'light',
            divider: '#D6D6D6',
        text: {
            primary: '#1C1C1C',
            secondary: '#5F6368 Os.getenv('theme') ? '#5F6368' : '#1C1C1C'
        },
        common: {
            black: '#000000',
            white: '#FFFFFF'
        },
        primary: {
            light: '#536D89',
            main: '#242D8E',
            dark: '#00418A',
            contrastText: '#FFFFFF'
        },
        secondary: {
            light: '#6BC9F7',
            main: '#0059B2',
            dark: '#0078D7',
            contrastText: '#FFFFFF'
        },
        background: {
            paper: '#F4F4F4',
            default: '#E8E8E8'
        },
        error: {
            light: '#FFCDD2',
            main: '#D32F2F',
            dark: '#B71C1C',
            contrastText: '#FFFFFF'
            }
        }
    },
}