<commit_before># Using Theme Variables

UI Kitten allows you using the theme you have provided in the application root. This allows you to easily create themed components.

<hr>

## Declare Custom Component

Let's declare a `View` and set it `backgroundColor` to any color of current theme.

```js
import React from 'react';
import { View } from 'react-native';
import { withStyles } from '@ui-kitten/components';

const AwesomeView = (props) => {
  const { eva, style, ...restProps } = props;

  return (
    <View {...restProps} style={[eva.style.awesome, style]} />
  );
};

export const ThemedAwesomeView = withStyles(AwesomeView, (theme) => ({
  awesome: {
    backgroundColor: theme['color-primary-500'],
  },
}));
```

In the example above we use `withStyles` function imported from UI Kitten. This allows us create a styles like you usually do with `StyleSheet` but with an ability to use current theme.

Complete list of variables could be found under [Light Theme Variables](design-system/eva-light-theme) table.


That's it! Now you're done and able to use your themed component.<commit_msg>fix(docs): add part related to design a section with theme hooks examples (#1552)<commit_after># Using Theme Variables

UI Kitten allows you using the theme you have provided in the application root. This allows you to easily create themed components.

<hr>

## Declare Custom Component

Let's declare a `View` and set it `backgroundColor` to any color of current theme.

```js
import React from 'react';
import { View } from 'react-native';
import { withStyles } from '@ui-kitten/components';

const AwesomeView = (props) => {
  const { eva, style, ...restProps } = props;

  return (
    <View {...restProps} style={[eva.style.awesome, style]} />
  );
};

export const ThemedAwesomeView = withStyles(AwesomeView, (theme) => ({
  awesome: {
    backgroundColor: theme['color-primary-500'],
  },
}));
```

In the example above we use `withStyles` function imported from UI Kitten. This allows us create a styles like you usually do with `StyleSheet` but with an ability to use current theme.

You can also use hooks `useTheme` and `useStyleSheet` in order to get styles & current theme variables. Here's an example:

```js
import React from 'react';
import { View } from 'react-native';
import { useTheme, useStyleSheet, StyleService } from '@ui-kitten/components';

export const ThemedAwesomeView = () => {
  const theme = useTheme();
  const styles = useStyleSheet(themedStyles);

  return (
    <View {...restProps} style={[styles.view, { color: theme['color-primary-100'] }]} />
  );
};

const themedStyles = StyleService.create({
  view: {
    backgroundColor: 'color-primary-500',
  }
});
```

In the example above we use `useTheme` and `useStyleSheet` hook imported from UI Kitten. 
`useStyleSheet` allows to create styles, but with supported variables we've defined inside our theme config
`useTheme` allows to get access to theme variables directly and use them inside React component

Complete list of variables could be found under [Light Theme Variables](design-system/eva-light-theme) table.

That's it! Now you're done and able to use your themed component.
{'fraction_non_alphanumeric': 0.10936022691459187, 'fraction_numerical': 0.005042546485975417, 'mean_word_length': 4.334453781512605, 'pattern_counts': {'":': 0, '<': 8, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4819373', 'n_tokens_mistral': 924, 'n_tokens_neox': 892, 'n_words': 378}