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.

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.

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

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: