# 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 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.cspr.click/cspr.click-v1.12/cspr.click-sdk/react/customizing-the-top-bar/customizing-theme.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.