> For the complete documentation index, see [llms.txt](https://wondernetwork.gitbook.io/holistichoteluikit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wondernetwork.gitbook.io/holistichoteluikit/customize.md).

# Customize

## Change Theme Colors

To change Theme colors and customize any component of the App, just go to **variables folder.** And change all as you want

commonColors.js source

```
import { Platform } from "react-native";

const platform = Platform.OS;

export default {
  //Main Colors
  darkColor: "#1c1e2c",
  semiDarkColor: "#23273c",
  accentColor: "#4d4deb",
  dividerDark: "#c2c2c2",
  errorColor: "#eb4d77",
  goldColor: "#ffc300",
  whiteColor: "#fff",
  blackColor: "#000",
  successColor: "#0ed341",
  greyLight: "#f7f7f7",

  //Font Family
  fontFamilyRegular: "Roboto-Regular",
  fontFamilyBold: "Roboto-Bold",

  // Font
  DefaultFontSize: 16,
  fontFamily: platform === "ios" ? "System" : "Roboto",
  fontSizeBase: 15,
  get fontSizeH1() {
    return this.fontSizeBase * 1.8;
  },
  get fontSizeH2() {
    return this.fontSizeBase * 1.6;
  },
  get fontSizeH3() {
    return this.fontSizeBase * 1.4;
  },
  fontSizeInputText: 17,
  fontSizeSmallText: 12,
  fontSizePriceText: 10,

// Other
  borderRadiusBase: 5,
  contentPaddingBase: 8,
  get contentPadding2x() {
    return this.contentPaddingBase * 2;
  },
  get contentPadding4x() {
    return this.contentPaddingBase * 4;
  },
};

```

## Rename App

Changing application name is very easy when using CRAN. Just follow this steps:

1. Edit  the `package.json`  and change the `name` attribut.
2. Edit  the `app.json`  and change the `name` , `description` , `slug` ,  `bundleIdentifier` and`package` attribut.

## Change App Icon, Logo and SplashScreen

1. To change App icon, just override `icon.png`  file located in  `assets/images/` .
2. To change App Logo, just override `logo.png`  and `header-ogo.png` files located in`assets/images/` .
3. To change App launch screen background, just override `splash.png`  file located in  `assets/images/` .

## Add a Custom Font

To add a new custom file follow this steps:

1. Copy font `.ttf`  file to `assest/fonts/`  
2. Edit `/App.js`  file and add file path loadfonts function:

```javascript
async loadFonts() {
    await Font.loadAsync({
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
      Roboto_light: require('./assets/fonts/Roboto-Light.ttf'),
      Ionicons: require('@expo/vector-icons/fonts/Ionicons.ttf'),
      Feather: require('@expo/vector-icons/fonts/Feather.ttf'),
      'simple-line-icons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf'),
    });
    this.setState({ fontLoaded: true });
  }
```