CSPR.build PortalCSPR.click Website

Theme customization

CSPR.click provides set of different ui themes out of box, such as red, green, blue and csprclick as default theme. Each theme has its own set of Dark and Light version where all necessary colours are specified. Customer can easily use and modify set of colours for each theme and for its Dark or Light version.

Default themes declaration

To use one of default theme, you need to export DefaultThemes object and builtThemes helper function from @make-software/csprclick-ui

DefaultThemes object consist of four properties which actually are themes itself. So by default we got four themes:

  • csprclick

  • red

  • green

  • blue

By default you'll get csprclick theme.

import {DefaultThemes, buildTheme} from '@make-software/csprclick-ui';

export const AppTheme = buildTheme({
    ...DefaultThemes.csprclick,
});

You can easily change it to any of available themes from DefaultThemes object.

export const AppTheme = buildTheme({
    ...DefaultThemes.red,
});

or


export const AppTheme = buildTheme({
    ...DefaultThemes.blue,
});

Default themes usage

To connect and apply theme you have selected all you need it just to pass it as a props to ThemeProvider which you can import from styled-components And wrap with it the whole application.

ThemeModeType enum which consist theme modes:

  • light

  • dark

import { ThemeProvider } from 'styled-components';
import { AppTheme } from "./settings/theme";
import { ThemeModeType } from '@make-software/csprclick-ui';

<ThemeProvider theme={AppTheme[ThemeModeType.light]}>
    ...
    <App/>
    ...
</>

Customise whole application alongside with <ClickUI> component

Besides customizing <ClickUI> component you can also customize the whole body of your application.

To do that, we have declared two properties:

  • appDarkTheme - to customize application in dark mode

  • appLightTheme - to customize application in light mode

Each of them has its own set of properties:


export const AppTheme = buildTheme({
    ...DefaultThemes.csprclick,
    appDarkTheme: {
        topBarSectionBackgroundColor: DefaultThemes.csprclick.csprclickDarkTheme[clickStyleguide.backgroundTopBarColor],
        [clickStyleguide.textColor]: '#DADCE5',
        bodyBackgroundColor: '#0f1429'
    },
    appLightTheme: {
        topBarSectionBackgroundColor: DefaultThemes.csprclick.csprclickLightTheme[clickStyleguide.backgroundTopBarColor],
        [clickStyleguide.textColor]: '#1A1919',
        bodyBackgroundColor: '#f2f3f5'
    },
});

  • topBarSectionBackgroundColor - stands for wrapping <ClickUI> component and set appropriate color for this wrapper

  • [clickStyleguide.textColor] - stands for changing text color. Applies to the part of application which is inside <body> tag

  • bodyBackgroundColor - stands for changing background color. Applies to the part of application which is inside <body> tag

Last updated