search
CSPR.cloudCSPR.designCSPR.buildRegister

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.

hashtag
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

hashtag
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

hashtag
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:

  • 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