search
CSPR.cloudCSPR.designCSPR.buildRegister

Create your own custom theme

If you're not enough with default set of themes you can easily create the new one. To do that, all you need is to directly extend AppTheme object with new property which would be the title of new theme and add appropriate structure.

hashtag
Theme creation structure

First of all, from @make-software/csprclick-ui you need to importclickStyleguide object which consist all necessary colors constructors to cover you application with new theme. Also you'll need helper function to build your own theme buildTheme.

To create the new custom theme, please follow the signature:

note: (instead of hardcoded hex, please use your own color values)

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

const newCustomTheme = {
        csprclickDarkTheme: {
            [clickStyleguide.backgroundTopBarColor]: '#6305a2',
            [clickStyleguide.backgroundMenuColor]: '#b6a3e5',
            [clickStyleguide.hoverProductMenu]: '#b193ec',
            [clickStyleguide.hoverAccountMenu]: '#b193ec',
            [clickStyleguide.textColor]: '#500383',
            [clickStyleguide.topBarTextColor]: '#9770ef',
            [clickStyleguide.menuIconAndLinkColor]: '#af05f3',
            [clickStyleguide.topBarIconHoverColor]: '#6a3be0',
        },
        csprclickLightTheme: {
            [clickStyleguide.backgroundTopBarColor]: '#9d13cb',
            [clickStyleguide.backgroundMenuColor]: '#a15fe0',
            [clickStyleguide.hoverProductMenu]: '#693388',
            [clickStyleguide.hoverAccountMenu]: '#693388',
            [clickStyleguide.textColor]: '#c9b6ea',
            [clickStyleguide.topBarTextColor]: '#d8cae8',
            [clickStyleguide.menuIconAndLinkColor]: '#ec06c5',
            [clickStyleguide.topBarIconHoverColor]: '#ec06c5',
        },
}

Then, you need to inject newly created theme object into buildTheme constructor function alongside with appDarkTheme and appLightTheme if needed.

hashtag
Colors matching examples

clickStyleguide has a set of colors. Each color from clickStyleguide has its own corresponding area of usage and responsibility.

Here you can find all matching with colors and its corresponding area of usage on <ClickUI> component

  • csprclickDarkTheme - stands for customise <ClickUI> component and all child or relative components in Dark mode.

  • csprclickLightTheme - stands for customise <ClickUI> component and all child or relative components in Light mode.

Each of above properties has the same set of colors:

  • [clickStyleguide.backgroundTopBarColor]: 'blue' - stands for whole <ClickUI> background color

Example on the screen below:

  • [clickStyleguide.backgroundMenuColor]: 'blue' - stands for all dropdown backgrounds Applies for the following components: <ProductMenu>, <AccountMenu>, <Currencies>, <Languages>, <Network> and <CustomSelect> component.

Example on the screen below:

  • [clickStyleguide.hoverProductMenu]: 'blue' - stands for changing colour when hovering on items inside <ProductMenu>

Example on the screen below:

  • [clickStyleguide.hoverAccountMenu]: 'blue' - stands for changing colour when hovering on items inside <AccountMenu>, <Currencies>, <Languages>, <Network> and <CustomSelect> component.

Example on the screen below:

  • [clickStyleguide.textColor]: 'blue' - stands for text colour inside each dropdown which is under <ClickUI>

Example on the screen below:

  • [clickStyleguide.topBarTextColor]: 'blue' - stands for text colour specific for <ClickUI and ClickModals components

Example on the screen below:

  • [clickStyleguide.topBarIconHoverColor]: 'blue' - stands for changing colour when hovering on items which are on <ClickUI> component

Example on the screen below:

  • [clickStyleguide.menuIconAndLinkColor]: 'blue' - stands for links and icons colour

Example on the screen below:

It's really easy and fast to create you own color theme! Enjoy the process!

Last updated