Colors.js

const colors = {
  primaryColorDark:   '#1976D2',
  primaryColor:        '#2196F3',
  primaryColorLight:  '#BBDEFB',
  accentColor:         '#FF4081',

  primaryTextColor:   '#212121',
  secondaryTextColor: '#757575',
  iconTextColor:   '#FFFFFF',
  dividerColor:        '#BDBDBD',
  
  backgroundColor: '#FFFFFF'
}

export default colors

ContainerWrapper.js

import {Container} from 'native-base';

class ContainerWrapper extends Component {
  render () {
    return (
      <Container {...this.props} themeBackground>
        {this.props.children}
      </Container>
    );
  }
}

export default connectStyle('ui.ContainerWrapper', {})

index.js

import { Platform } from 'react-native';
import _ from 'lodash';
import headerTheme from './Header';
import containerTheme from './Container'
import contentTheme from './Content';
import buttonTheme from './Button';
import titleTheme from './Title';
import inputGroupTheme from './InputGroup';
import badgeTheme from './Badge';
import checkBoxTheme from './CheckBox';
import cardTheme from './Card';
import radioTheme from './Radio';
import h3Theme from './H3';
import h2Theme from './H2';
import h1Theme from './H1';
import footerTheme from './Footer';
import footerTabTheme from './FooterTab';
import fabTheme from './Fab';
import itemTheme from './Item';
import labelTheme from './Label';
import textAreaTheme from './Textarea';
import textTheme from './Text';
import toastTheme from './Toast';
import tabTheme from './Tab';
import tabBarTheme from './TabBar';
import tabContainerTheme from './TabContainer';
import viewTheme from './View';
import tabHeadingTheme from './TabHeading';
import iconTheme from './Icon';
import inputTheme from './Input';
import segmentTheme from './Segment';
import spinnerTheme from './Spinner';
import cardItemTheme from './CardItem';
import listItemTheme from './ListItem';
import formTheme from './Form';
import separatorTheme from './Separator';
import variable from './../variables/platform';

export default (variables = variable) => {
  const theme = {
    variables,
    'ui.ContainerWrapper': {
      'NativeBase.Container': {
        '.themeBackground': {
          backgroundColor: variables.backgroundColor
        }
      }
    },
    'NativeBase.Left': {
      flex: 1,
      alignSelf: 'center',
      alignItems: 'flex-start',
    },
    'NativeBase.Right': {
      'NativeBase.Button': {
        alignSelf: null,
      },
      flex: 1,
      alignSelf: 'center',
      alignItems: 'flex-end',
    },
    'NativeBase.Body': {
      flex: 1,
      alignItems: 'center',
      alignSelf: 'center',
    },

    'NativeBase.Header': {
      ...headerTheme(variables),
    },

    'NativeBase.Button': {
      ...buttonTheme(variables),
    },

    'NativeBase.Title': {
      ...titleTheme(variables),
    },

    'NativeBase.InputGroup': {
      ...inputGroupTheme(variables),
    },

    'NativeBase.Input': {
      ...inputTheme(variables),
    },

    'NativeBase.Badge': {
      ...badgeTheme(variables),
    },

    'NativeBase.CheckBox': {
      ...checkBoxTheme(variables),
    },

    'NativeBase.Radio': {
      ...radioTheme(variables),
    },

    'NativeBase.Card': {
      ...cardTheme(),
    },

    'NativeBase.CardItem': {
      ...cardItemTheme(variables),
      '.cardBody': {
        padding: -5,
        'NativeBase.Text': {
          marginTop: 5,
        },
      },
      flexDirection: 'row',
      alignItems: 'center',
    },

    'NativeBase.CardItem1': {
      ...cardItemTheme(variables),
    },

    'NativeBase.Toast': {
      ...toastTheme(variables),
    },

    'NativeBase.H1': {
      ...h1Theme(variables),
    },
    'NativeBase.H2': {
      ...h2Theme(variables),
    },
    'NativeBase.H3': {
      ...h3Theme(variables),
    },
    'NativeBase.Form': {
      ...formTheme(variables),
    },

    'NativeBase.Container': {
      ...containerTheme(variables),
    },
    'NativeBase.Content': {
      ...contentTheme(variables),
    },


    'NativeBase.Footer': {
      ...footerTheme(variables),
    },

    'NativeBase.Tabs': {
      flex: 1,
    },

    'NativeBase.FooterTab': {
      ...footerTabTheme(variables),
    },

    'NativeBase.ListItem': {
      ...listItemTheme(variables),
      'NativeBase.CheckBox': {
        marginLeft: -10,
        marginRight: 10,
      },
      'NativeBase.Text': {
        '.note': {
          color: variables.listNoteColor,
          fontWeight: '200',
        },
        alignSelf: 'center',
      },
    },

    'NativeBase.ListItem1': {
      ...listItemTheme(variables),
    },

    'NativeBase.Icon': {
      ...iconTheme(variables),
    },
    'NativeBase.IconNB': {
      ...iconTheme(variables),
    },
    'NativeBase.Text': {
      ...textTheme(variables),
    },
    'NativeBase.Spinner': {
      ...spinnerTheme(variables),
    },

    'NativeBase.Fab': {
      ...fabTheme(variables),
    },

    'NativeBase.Item': {
      ...itemTheme(variables),
    },

    'NativeBase.Label': {
      ...labelTheme(variables),
    },

    'NativeBase.Textarea': {
      ...textAreaTheme(variables),
    },

    'NativeBase.PickerNB': {
      'NativeBase.Button': {
        'NativeBase.Text': {
        },
      },
    },

    'NativeBase.Tab': {
     ...tabTheme(variables),
    },

    'NativeBase.Segment': {
     ...segmentTheme(variables),
    },

    'NativeBase.STabs': {
      flex: 1,
    },

    'NativeBase.TabBar': {
      ...tabBarTheme(variables),
    },
    'NativeBase.ViewNB': {
      ...viewTheme(variables),
    },
    'NativeBase.TabHeading': {
      ...tabHeadingTheme(variables),
    },
    'NativeBase.TabContainer': {
      ...tabContainerTheme(variables),
    },
    'NativeBase.Switch': {
      marginVertical: -5,
    },
    'NativeBase.Separator': {
      ...separatorTheme(variables),
    },
    'NativeBase.Tabs': {
    },
    'NativeBase.Thumbnail': {
      '.square': {
        borderRadius: 0,
      },
      '.small': {
        width: 36,
        height: 36,
        borderRadius: 18,
      },
      '.large': {
        width: 80,
        height: 80,
        borderRadius: 40,
      },
      width: 56,
      height: 56,
      borderRadius: 28,
    },

  };

  const cssifyTheme = (grandparent, parent, parentKey) => {
    _.forEach(parent, (style, styleName) => {
      // console.log('styleName', styleName);
      // console.log('parentKey', parentKey);
      if (styleName.indexOf('.') === 0 && parentKey && parentKey.indexOf('.') === 0) {
        if (grandparent) {
          if (!grandparent[styleName]) {
            grandparent[styleName] = {};
          } else {
            grandparent[styleName][parentKey] = style;
          }
        }
      }
      if (style && typeof style === 'object') {
        cssifyTheme(parent, style, styleName);
      }
    });
  };

  cssifyTheme(null, theme, null);

  return theme;
};

variables.js

import color from 'color';
import colors from './Colors';

import { Platform, Dimensions, PixelRatio } from 'react-native';

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS;
const platformStyle = undefined;

export const getTheme = (Colors = colors) => {
  return {
    navbarStyle: {
      navBarTextColor: Colors.iconTextColor,
      navBarBackgroundColor: Colors.primaryColor,
      navBarButtonColor: Colors.iconTextColor,
      // statusBarTextColorScheme: 'light'
    },
    defaultImage: require('../Images/blank-profile-picture.png'),
    primaryColorDark: Colors.primaryColorDark,
    primaryColor: Colors.primaryColor,
    primaryColorLight: Colors.primaryColorLight,
    accentColor: Colors.accentColor,

    iconTextColor: Colors.iconTextColor,
    primaryTextColor: Colors.primaryTextColor,
    secondaryTextColor: Colors.secondaryTextColor,
    dividerColor: Colors.dividerColor,
    backgroundColor: Colors.dividerColor,

    platformStyle,
    platform,
      // AndroidRipple
    androidRipple: true,
    androidRippleColor: 'rgba(256, 256, 256, 0.3)',
    androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',

      // Badge
    badgeBg: Colors.accentColor,
    badgeColor: '#fff',
      // New Variable
    badgePadding: (platform === 'ios') ? 3 : 0,

      // Button
    btnFontFamily: (platform === 'ios') ? 'System' : 'Roboto',
    btnDisabledBg: '#b5b5b5',
    btnDisabledClr: '#f1f1f1',

      // CheckBox
    CheckboxRadius:  0,
    CheckboxBorderWidth: (platform === 'ios') ? 1 : 2,
    CheckboxPaddingLeft: (platform === 'ios') ? 4 : 2,
    CheckboxPaddingBottom: (platform === 'ios') ? 0 : 5,
    CheckboxIconSize: (platform === 'ios') ? 21 : 14,
    CheckboxIconMarginTop: (platform === 'ios') ? undefined : 1,
    CheckboxFontSize: (platform === 'ios') ? (23 / 0.9) : 18,
    DefaultFontSize: 17,
    checkboxBgColor: Colors.accentColor,
    checkboxSize: 20,
    checkboxTickColor: '#fff',

    // Segment
    segmentBackgroundColor: 'transparent',
    segmentActiveBackgroundColor: '#fff',
    segmentTextColor: '#fff',
    segmentActiveTextColor: Colors.primaryColor,
    segmentBorderColor: '#fff',
    segmentBorderColorMain: Colors.primaryColor,

      // New Variable
    get defaultTextColor() {
      return this.textColor;
    },


    get btnPrimaryBg() {
      return this.brandPrimary;
    },
    get btnPrimaryColor() {
      return this.inverseTextColor;
    },
    get btnInfoBg() {
      return this.brandInfo;
    },
    get btnInfoColor() {
      return this.inverseTextColor;
    },
    get btnSuccessBg() {
      return this.brandSuccess;
    },
    get btnSuccessColor() {
      return this.inverseTextColor;
    },
    get btnDangerBg() {
      return this.brandDanger;
    },
    get btnDangerColor() {
      return this.inverseTextColor;
    },
    get btnWarningBg() {
      return this.brandWarning;
    },
    get btnWarningColor() {
      return this.inverseTextColor;
    },
    get btnTextSize() {
      return (platform === 'ios') ? this.fontSizeBase * 1.1 :
          this.fontSizeBase - 1;
    },
    get btnTextSizeLarge() {
      return this.fontSizeBase * 1.5;
    },
    get btnTextSizeSmall() {
      return this.fontSizeBase * 0.8;
    },
    get borderRadiusLarge() {
      return this.fontSizeBase * 3.8;
    },

    buttonPadding: 6,

    get iconSizeLarge() {
      return this.iconFontSize * 1.5;
    },
    get iconSizeSmall() {
      return this.iconFontSize * 0.6;
    },


      // Card
    cardDefaultBg: '#fff',


        // Color
    brandPrimary: Colors.primaryColor,
    brandInfo: '#62B1F6',
    brandSuccess: '#5cb85c',
    brandDanger: '#d9534f',
    brandWarning: '#f0ad4e',
    brandSidebar: '#252932',


      // Font
    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;
    },

      // Footer
    footerHeight: 55,
    footerDefaultBg: (platform === 'ios') ? '#F8F8F8' : '#F8F8F8',


      // FooterTab
    tabBarTextColor: (platform === 'ios') ? '#6b6b6b' : Colors.secondaryTextColor,
    tabBarTextSize: (platform === 'ios') ? 14 : 11,
    activeTab: (platform === 'ios') ? Colors.primaryColorLight : Colors.accentColor,
    sTabBarActiveTextColor: Colors.primaryColorDark,
    tabBarActiveTextColor: (platform === 'ios') ? Colors.primaryColorDark : Colors.accentColor,
    tabActiveBgColor: (platform === 'ios') ? Colors.primaryColorLight : undefined,

      // Tab
    tabDefaultBg: Colors.primaryColor,
    topTabBarTextColor: Colors.iconTextColor,
    topTabBarActiveTextColor: '#fff',
    topTabActiveBgColor: (platform === 'ios') ? '#1569f4' : undefined,
    topTabBarBorderColor: '#fff',


      // Header
    toolbarBtnColor: '#fff',
    toolbarDefaultBg: Colors.primaryColor,
    toolbarHeight: (platform === 'ios') ? 64 : 56,
    toolbarIconSize: (platform === 'ios') ? 20 : 22,
    toolbarSearchIconSize: (platform === 'ios') ? 20 : 23,
    toolbarInputColor: (platform === 'ios') ? '#CECDD2' : '#fff',
    searchBarHeight: (platform === 'ios') ? 30 : 40,
    toolbarInverseBg: '#222',
    toolbarTextColor: '#fff',
    iosStatusbar: 'light-content',
    toolbarDefaultBorder: Colors.primaryColor,
    get statusBarColor() {
      return color(this.toolbarDefaultBg).darken(0.2).hex();
    },


      // Icon
    iconFamily: 'Ionicons',
    iconFontSize: (platform === 'ios') ? 30 : 28,
    iconMargin: 7,
    iconHeaderSize: (platform === 'ios') ? 33 : 28,


      // InputGroup
    inputFontSize: 17,
    inputBorderColor: '#D9D5DC',
    inputSuccessBorderColor: '#2b8339',
    inputErrorBorderColor: '#ed2f2f',

    get inputColor() {
      return this.textColor;
    },
    get inputColorPlaceholder() {
      return '#575757';
    },

    inputGroupMarginBottom: 10,
    inputHeightBase: 50,
    inputPaddingLeft: 5,

    get inputPaddingLeftIcon() {
      return this.inputPaddingLeft * 8;
    },


      // Line Height
    btnLineHeight: 19,
    lineHeightH1: 32,
    lineHeightH2: 27,
    lineHeightH3: 22,
    iconLineHeight: (platform === 'ios') ? 37 : 30,
    lineHeight: (platform === 'ios') ? 20 : 24,


      // List
    listBorderColor: '#c9c9c9',
    listDividerBg: '#f4f4f4',
    listItemHeight: 45,

      // Card
    cardBorderColor: '#ccc',

      // Changed Variable
    listItemPadding: (platform === 'ios') ? 10 : 12,

    listNoteColor: '#808080',
    listNoteSize: 13,


      // Progress Bar
    defaultProgressColor: Colors.accentColor,
    inverseProgressColor: Colors.primaryColor,


      // Radio Button
    radioBtnSize: (platform === 'ios') ? 25 : 23,
    radioSelectedColorAndroid: Colors.accentColor,

      // New Variable
    radioBtnLineHeight: (platform === 'ios') ? 29 : 24,

    radioColor: '#7e7e7e',

    get radioSelectedColor() {
      return color(this.radioColor).darken(0.2).hex();
    },


      // Spinner
    defaultSpinnerColor: Colors.accentColor,
    inverseSpinnerColor: Colors.primaryColor,


      // Tabs
    tabBgColor: '#F8F8F8',
    tabFontSize: 15,
    tabTextColor: '#222222',


      // Text
    textColor: '#000',
    inverseTextColor: '#fff',
    noteFontSize: 14,


      // Title
    titleFontfamily: (platform === 'ios') ? 'System' : 'Roboto',
    titleFontSize: (platform === 'ios') ? 17 : 19,
    subTitleFontSize: (platform === 'ios') ? 12 : 14,
    subtitleColor: '#FFF',

      // New Variable
    titleFontColor: '#FFF',


      // Other
    borderRadiusBase: (platform === 'ios') ? 5 : 2,
    borderWidth: (1/PixelRatio.getPixelSizeForLayoutSize(1)),
    contentPadding: 10,

    get darkenHeader() {
      return color(this.tabBgColor).darken(0.03).hex();
    },

    dropdownBg: '#000',
    dropdownLinkColor: '#414142',
    inputLineHeight: 24,
    jumbotronBg: '#C9C9CE',
    jumbotronPadding: 30,
    deviceWidth,
    deviceHeight,

      // New Variable
    inputGroupRoundedBorderRadius: 30,
    
  }
};

export default getTheme();