# 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. ```tsx 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. ```tsx export const AppTheme = buildTheme({ ...DefaultThemes.red, }); ``` or ```tsx 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` ```tsx import { ThemeProvider } from 'styled-components'; import { AppTheme } from "./settings/theme"; import { ThemeModeType } from '@make-software/csprclick-ui'; ... ... ``` ### Customise whole application alongside with `` component Besides customizing `` 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: ```tsx 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 `` component and set appropriate color for this wrapper * `[clickStyleguide.textColor]` - stands for changing text color. Applies to the part of application which is inside `` tag * `bodyBackgroundColor` - stands for changing background color. Applies to the part of application which is inside `` tag