Version: Next

Theme

Applying theme

To use themes, you need to wrap the root component with provider.

import { KitraProvider } from '@tra-tech/react-native-kitra';
import App from './src/App';

export default function Main() {
  return (
    <KitraProvider>
      <App />
    </KitraProvider>
  );
}

Accessing and updating theme

To access the current theme, use the useTheme hook. This hook returns the current theme object and a updateTheme function to update the theme.

The theme object is a key-value pair of colors that define the current theme of the app. The updateTheme function is used to update the current theme by merging in new colors. You can customize these values to create your own theme.

import { useTheme } from '@tra-tech/react-native-kitra';

const MyCustomTheme= {
  dark:{
    system:{
      primary: "#00A5EE"
    },
    custom: {
      someColor: "#FF0000"
    }
  },
  light:{
    system:{
      primary:'#195CEF
    },
    custom: {
      someColor: "#00FF00"
    }
  }
}

export function App() {
  const {theme,updateTheme}= useTheme();

  useEffect(() => {
    updateTheme(MyCustomTheme)
  }, []);
  
  return (
  <View>
    <MyCustomComponent style={{backgroundColor:theme?.someColor}}>
    <MyOtherCustomComponent style={{backgroundColor:theme.primary}}>
  </View>
  );
}

Colors

System

Light

Primary

#195CEF

Primary 5

#F6F9FF

Primary 15

#E6EEFF

Primary 30

#CFDDFF

Disabled

#A8B8DA

Disabled Dark

#BEC5D4

Disabled Light Dark

#C9D5EF

Disabled Light

#DDE4F3

Background

#FFFFFF

Filled

#FFFFFF

Dark

Primary

#3B79FF

Primary 5

#21273E

Primary 15

#323A5E

Primary 30

#A9B6D7

Disabled

#252F54

Disabled Dark

#445284

Disabled Light Dark

#1B1E2B

Disabled Light

#252F54

Background

#171922

Filled

#171922

Status

Light

Focused

#124CCA

Secondary

#FC6736

Secondary Light

#FFF0EB

Tertiary

#FCE836

Error

#FF0000

Error Light

#FFE6E6

Success

#00CE5E

Success Light

#E6FBEF

Warning

#E2D029

Warning Light

#FFFAD0

Dark

Focused

#124CCA

Secondary

#FC6736

Secondary Light

#452926

Tertiary

#EED815

Error

#FF0000

Error Light

#42171D

Success

#01BA55

Success Light

#123D2E

Warning

#E2D029

Warning Light

#403E23

Neutral

Light

Black

#1F1F1F

Light Black

#404040

Grey

#9A9A9A

Default

#DDDDDD

Disabled Text

#DFE1E6

Light Grey

#EFF0F3

Dark White

#FDFCFF

White

#FFFFFF

Dark

Black

#FFFFFF

Light Black

#ECECEC

Grey

#9F9F9F

Default

#4C526E

Disabled Text

#848EA2

Light Grey

#2A303D

Dark White

#848EA2

White

#1F1F1F

Button

Light

Disabled

#A8B8DA

Disabled Text

#DFE1E6

Text

#FFFFFF

Dark

Disabled

#2D375D

Disabled Text

#6D738A

Text

#FFFFFF

Input

Light

Default

#DDDDDD

Light Default

#EFF0F3

fill

#FFFFFF

Dark

Default

#757575

Light Default

#2B2F3E

fill

#171922

Component theme system

All components provided by Kitra use the colors available in the theme by default. A component changes the colors it uses depending on the situation it is in.

For example, when the button component switches to the pressed state, all applied colors can be changed for that button. This can be done for all component types at once by editing the theme file, or if a single component is to be customized, it can be used by overriding the colors to the theme prop of the component.

This example shows how to change the colors of the button component by status for only one button.

import { Button, useTheme } from '@tra-tech/react-native-kitra';

const App = () => {
  const { theme: { colors: { neutral, status } } } = useTheme();

  return (
    <Button theme={{
      default: { background: status.error },
      pressed: { background: status.errorLight, label: neutral.black },
    }}
    />
  );
};

or if you want to change the theme of all button components

import { Button, useTheme } from '@tra-tech/react-native-kitra';
import { useEffect } from 'react';

const appTheme = {
  dark: {
    components: {
      button: {
        default: { background: status.error },
        pressed: { background: status.errorLight, label: neutral.black },
      },
    },
  },
};

const App = () => {
  const { updateTheme } = useTheme();

  useEffect(() => {
    updateTheme(appTheme);
  }, []);

  return (
    <Button />
  );
};

Below are the default values used by the components and their states. These fields can be customized by changing them as in the example above

Accordion List

Fields	Default	Active
Background	neutral.lightGrey	system.primary5
Label	neutral.lightBlack	system.primary
Item Background	system.filled	system.filled
Collapse Icon Background	system.primary5	system.primary15
Collapse Icon	neutral.lightBlack	system.primary
Item Label	neutral.grey	neutral.grey

Activity Indicator

Fields	Default
Background	system.primary15
Label	system.primary

Avatar

Fields	Default
Background	system.primary15
Label	system.primary

Avatar Group

Fields	Default
Background	system.primary15
Label	system.primary
More Background	status.secondary
More Label	button.text

Badge

Fields	Default
Background	system.primary
Label	button.text
Border	system.filled

Button

Fields	Default	Pressed	Disabled
Background	system.primary	status.focused	button.disabled
Label	button.text	button.text	neutral.disabledText

Checkbox

Fields	Default	Filled	Disabled
Background	system.background	system.primary	neutral.default
Border	system.primary	system.primary	neutral.default
Icon	button.text	button.text	neutral.darkWhite

Chip

Field	Default	Active	Disabled
Background	system.background	system.primary	system.background
Border	system.primary	system.primary	system.disabledDark
Label	system.primary	button.text	system.disabledDark

Divider

Fields	Default
Background	system.primary

Field	Default	Active	Selected
Background	system.filled	system.filled	system.filled
Border	neutral.default	status.focused	neutral.default
Collapse Background	system.background	system.background	system.background
Label	neutral.lightBlack	status.focused	system.primary
Collapse Icon	neutral.lightBlack	system.primary	system.primary
Item Background	system.background	system.background	system.primary5
Item Label	neutral.lightBlack	neutral.lightBlack	system.primary

Field	Default	Active	Selected
Background	system.background	system.background	system.background
Border	neutral.default	status.focused	neutral.default
Label	neutral.lightBlack	status.focused	system.primary
Collapse Icon	neutral.lightBlack	system.primary	system.primary
Item Background	system.background	system.background	system.primary5
Item Label	neutral.lightBlack	neutral.lightBlack	neutral.lightBlack
Select All Label	system.primary	system.primary	system.primary
Complete Background	system.primary	system.primary	system.primary
Complete Label	button.text	button.text	button.text
Check Icon	button.text	button.text	button.text
Check Background	system.primary	system.filled	system.primary
Check Border	system.primary	system.primary	system.primary

Field	Default	Active
Icon	neutral.grey	system.primary
Item Label	neutral.lightBlack	neutral.lightBlack
Item Background	system.filled	system.filled
Divider	system.primary5	system.primary5

Field	Default	Active
Header Background	system.primary5	system.primary
Header Label	system.primary	button.text

Progress Bar

Field	Default
Progress	system.primary
Bar	system.primary15

Radio Button

Field	Default	Active
Background	neutral.lightGrey	button.text
Dot	system.primary	system.primary
Border	system.disabledLightDark	system.primary

Switch

Field	Default	Active
Track	system.disabledLight	system.primary
Thumb	button.text	button.text

Speed Dial

Field	Default
Background	system.primary
Icon	button.text

Text Input

Field	Default	Focused	Error	Disabled
Background	input.fill	input.fill	input.fill	input.lightDefault
Border	input.default	status.focused	status.error	input.lightDefault
Label	neutral.lightBlack	neutral.lightBlack	neutral.lightBlack	neutral.grey
Value	neutral.black	neutral.black	neutral.black	neutral.black
Bottom Label	neutral.lightBlack	neutral.lightBlack	status.error	neutral.grey
Count Label	neutral.lightBlack	neutral.lightBlack	neutral.lightBlack	neutral.grey

Toggle Button

Field	Default	Active
Background	system.primary5	system.primary
Label	system.primary	button.text
Border	system.primary	system.primary

Applying theme​

Accessing and updating theme​

Colors​

System​

Light​

Dark​

Status​

Light​

Dark​

Neutral​

Light​

Dark​

Button​

Light​

Dark​

Input​

Light​

Dark​

Component theme system​

Accordion List​

Activity Indicator​

Avatar​

Avatar Group​

Badge​

Button​

Checkbox​

Chip​

Divider​

Dropdown​

Multiple Select Dropdown​

Menu​

Pager View​

Progress Bar​

Radio Button​

Switch​

Speed Dial​

Text Input​

Toggle Button​

Applying theme

Accessing and updating theme

Colors

System

Light

Dark

Status

Light

Dark

Neutral

Light

Dark

Button

Light

Dark

Input

Light

Dark

Component theme system

Accordion List

Activity Indicator

Avatar

Avatar Group

Badge

Button

Checkbox

Chip

Divider

Dropdown

Multiple Select Dropdown

Menu

Pager View

Progress Bar

Radio Button

Switch

Speed Dial

Text Input

Toggle Button