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:{
    someColor: "#420EA1"
  },
  light:{
    someColor:"#F0E52F"
  }
}

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

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

Colors

Main

Primary

#8973CD

Primary 5

#F9F8FD

Primary 15

#EDEAF8

Primary 30

#DCD5F0

Secondary

#82B98E

Tetriary

#67A7C1

Text

Black

#000000

Light Black

#404040

Grey

#9A9A9A

White

#FFFFFF

Dark White

#FDFCFF

Light Grey

#F5F4F6

Status

Focused

#654FA6

Error

#FF3434

Success

#09CE63

Disabled Light

#D7D1E9

Disabled Dark

#BDBCBF

Disabled Light Dark

#F6F6F6