them: define color

src/components/loading-modal/index.tsx

@@ -29,7 +29,7 @@ const styles = {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: theme.colors.modalBackground
+    backgroundColor: theme.colors.background
   }),
   modalContainer: (theme: ITheme): ViewStyle => ({
     width: 80,

src/screens/components/topic/TopicList.tsx

@@ -109,7 +109,7 @@ const styles = {
     flex: 1
   }),
   imageStyle: (theme: ITheme) => ({
-    height: theme.dimens.avatarSize,
+    height: 60,
     width: undefined,
     margin: theme.spacing.small,
     borderWidth: 1,

src/theme/dark/assets.ts

@@ -1,33 +1,11 @@
+import lightAssets from '../light/assets'
 import { IThemeAssets } from '../types'
 
 const Assets: IThemeAssets = {
-  images: {
-    icons: {
-      logo: require('@res/images/icon/logo.png'),
-      icon: require('@res/images/icon/icon.png'),
-      home: require('@res/images/icon/home.png'),
-      homeInactive: require('@res/images/icon/home-inactive.png'),
-      discovery: require('@res/images/icon/discovery.png'),
-      discoveryInactive: require('@res/images/icon/discovery-inactive.png'),
-      notification: require('@res/images/icon/notification.png'),
-      notificationInactive: require('@res/images/icon/notification-inactive.png'),
-      profile: require('@res/images/icon/profile.png'),
-      profileInactive: require('@res/images/icon/profile-inactive.png'),
-      moreCycleGrey: require('@res/images/icon/more-circle-grey.png'),
-      timeCycleGrey: require('@res/images/icon/time-circle-grey.png'),
-      personCycleGrey: require('@res/images/icon/person-circle-grey.png'),
-      heartGrey: require('@res/images/icon/heart-grey.png'),
-      heartRed: require('@res/images/icon/heart-red.png'),
-      gold: require('@res/images/icon/gold.png'),
-      silver: require('@res/images/icon/silver.png'),
-      bronze: require('@res/images/icon/bronze.png'),
-      arrowRightGrey: require('@res/images/icon/arrow-right-grey.png'),
-      send: require('@res/images/icon/send.png'),
-      starOutline: require('@res/images/icon/star-outline.png'),
-      starFilled: require('@res/images/icon/star-filled.png'),
-      chatGrey: require('@res/images/icon/chat-grey.png')
-    }
-  }
+  /**
+   * base on light theme assets
+   */
+  ...lightAssets
 }
 
 export default Assets

src/theme/dark/colors.ts

@@ -1,85 +1,68 @@
+import lightColors from '../light/colors'
 import { IThemeColor } from '../types'
 
 const colors: IThemeColor = {
   /**
-   * ========================= Primary color : (Brand color) =========================
-   * primaryDark: color for the status bar and for dark tint
-   * primary: to be used as a background color for appbar(toolbar)
-   * appBarTintColor: to be used for appbar title text, appbar icons color and for back button
-   *
-   * Example: If primary color is dark, make appbarTintColor light
+   * base on light theme colors
    */
-  primaryDark: '#000',
-  primary: '#000',
+  ...lightColors,
 
   tabBarBackground: '#000',
-  tabBarIconInactive: '#ddd',
-  tabBarIconActive: '#fff',
+  tabBarIconInactive: '#898B8B',
+  tabBarIconActive: '#025DC9',
   appbarTint: '#fff',
 
-  lightGrey: '#F5F6FA',
   tabShadowColor: '#000000',
-  tabActiveTintColor: '#fff',
-  tabInactiveTintColor: '#999999',
+  tabActiveTintColor: '#025DC9',
+  tabInactiveTintColor: '#898B8B',
 
   /**
    * ========================= Secondary color =========================
    * secondaryLight: to be used for hover state
    * secondary: to be used as default button, checkbox, spinner, radio button and other component color
    * secondaryDark: to be used for active state
    */
-  secondaryLight: '#53c3f8',
-  secondary: '#1CB0F6',
-  secondaryDark: '#0999dd',
+  secondaryLight: '#417BBF',
+  secondary: '#0477FF',
+  secondaryDark: '#0667DA',
+
   /**
    * disabled: To be used for disabled component background
    * disabledDark: To be used for disabled component border and text color
    */
-  disabled: 'hsl(208, 8%, 90%)',
-  disabledDark: 'hsl(208, 8%, 60%)',
-  /**
-   * A helper for making something see-thru. Use sparingly as many layers of transparency
-   * can cause older AndroiddisabledDark devices to slow down due to the excessive compositing required
-   * by their under-powered GPUs.
-   */
-  transparent: 'transparent',
+  disabled: '#9A9A9A',
+  disabledDark: '#8F8F8F',
+
   /**
    * The screen background.
    */
-  background: '#000',
+  background: '#0D1014',
+
   /**
    * To be used as a default background for all components, like Card, CardSection, List etc
    */
-  surface: '#111',
+  surface: '#161921',
+
   /**
    * Use it for card border
    */
-  border: '#d9d9d9',
-  /**
-   * Success messages and icons.
-   */
-  success: '#52c41a',
-  /**
-   * Error messages and icons.
-   */
-  error: '#ff190c',
+  border: '#222222',
+
   /**
    * The default color of text in many components.
    * To be used for heading, subheading, label text
    */
-  titleText: '#fff',
+  titleText: '#FFFFFF',
+
   /**
    * To be used for normal text like paragraph
    */
-  bodyText: '#eee',
+  bodyText: '#FBFBFB',
+
   /**
    * To be used for hint text component
    */
-  captionText: '#8c8c8c',
-  black: '#000000',
-  white: '#ffffff',
-
-  modalBackground: '#999999'
+  captionText: '#A6A6A6'
 }
 
 export default colors

src/theme/dark/dimens.ts

@@ -1,28 +1,11 @@
-import { Dimensions } from 'react-native'
-
-const screenWidth = Dimensions.get('window').width
-const screenHeight = Dimensions.get('window').height
-
+import lightDimens from '../light/dimens'
 import { IThemeDimen } from './../types'
 
 const dimens: IThemeDimen = {
   /**
-   * App level constants
-   */
-  WINDOW_WIDTH: screenWidth,
-  WINDOW_HEIGHT: screenHeight,
-  headerButtonSize: 23,
-  headerHeight: 50,
-  borderRadius: 2,
-  badgeSize: 18,
-  defaultButtonWidth: screenWidth * 0.9,
-  defaultButtonHeight: 40,
-  defaultInputBoxHeight: 40,
-
-  /**
-   * avatar witth
+   * base on light theme dimens
    */
-  avatarSize: 60
+  ...lightDimens
 }
 
 export default dimens

src/theme/dark/spacing.ts

@@ -9,15 +9,13 @@
  * Feel free to delete this block.
  */
 import { IThemeSpacing } from '../types'
-
-const baseSpacing = 10
+import lightSpacing from '../light/spacing'
 
 const spacing: IThemeSpacing = {
-  tiny: baseSpacing * 0.4,
-  small: baseSpacing * 0.8,
-  medium: baseSpacing * 1.2,
-  large: baseSpacing * 1.6,
-  extraLarge: baseSpacing * 2.4
+  /**
+   * base on light theme spacing
+   */
+  ...lightSpacing
 }
 
 export default spacing

src/theme/dark/typography.ts

@@ -1,133 +1,11 @@
-import { Platform } from 'react-native'
 import { IThemeTypography } from '../types'
-import colors from './colors'
-
-const fontFamily = Platform.select({ android: 'sans-serif', ios: 'Helvetica' })
-const fontWeightRegular = 'normal'
-const fontWeightSemiBold = '600'
-const fontWeightBold = 'bold'
-
-const appbarTitleTextColor = colors.appbarTint
-const titleTextColor = colors.titleText
-const bodyTextColor = colors.bodyText
-const captionTextColor = colors.captionText
+import lightTypeography from '../light/typography'
 
 const typographys: IThemeTypography = {
   /**
-   * Title is reserved for the title of a screen(Toolbar)
-   * and the titles of Modal dialogs.
-   */
-  titleText: {
-    fontFamily,
-    color: appbarTitleTextColor,
-    fontSize: 18,
-    fontStyle: 'normal',
-    fontWeight: fontWeightRegular
-  },
-  titleTextSemiBold: {
-    fontFamily,
-    color: appbarTitleTextColor,
-    fontSize: 18,
-    fontStyle: 'normal',
-    fontWeight: fontWeightSemiBold
-  },
-  /**
-   * Use the Heading style for card titles.
-   */
-  headingText: {
-    fontFamily,
-    color: titleTextColor,
-    fontSize: 18,
-    fontStyle: 'normal',
-    fontWeight: fontWeightRegular
-  },
-  headingTextBold: {
-    fontFamily,
-    color: titleTextColor,
-    fontSize: 18,
-    fontStyle: 'normal',
-    fontWeight: fontWeightBold
-  },
-  /**
-   * Use the Subheading style to denote new sections within cards.
-   */
-  subheadingText: {
-    fontFamily,
-    color: titleTextColor,
-    fontSize: 16,
-    fontStyle: 'normal',
-    fontWeight: fontWeightRegular
-  },
-  subheadingTextBold: {
-    fontFamily,
-    color: titleTextColor,
-    fontSize: 16,
-    fontStyle: 'normal',
-    fontWeight: fontWeightBold
-  },
-  /**
-   * The Body text style is used widely throughout the UI.
-   * Any text that isn’t a title, heading, subheading, label
-   * or caption would generally use the Body style.
-   */
-  bodyText: {
-    fontFamily,
-    color: bodyTextColor,
-    fontSize: 15,
-    fontStyle: 'normal',
-    fontWeight: fontWeightRegular
-  },
-  bodyTextBold: {
-    fontFamily,
-    color: bodyTextColor,
-    fontSize: 15,
-    fontStyle: 'normal',
-    fontWeight: fontWeightBold
-  },
-  /**
-   * Use labels with form field and input elements to
-   * signify the element’s function to the user.
-   */
-  labelText: {
-    fontFamily,
-    color: titleTextColor,
-    fontSize: 14,
-    fontStyle: 'normal',
-    fontWeight: fontWeightRegular
-  },
-  labelTextBold: {
-    fontFamily,
-    color: titleTextColor,
-    fontSize: 14,
-    fontStyle: 'normal',
-    fontWeight: fontWeightBold
-  },
-  /**
-   * Use the Caption style for help/hint text.
-   * It’s used with some form fields which require a description,
-   * and can also be used stand-alone within a card when necessary.
-   */
-  captionText: {
-    fontFamily,
-    color: captionTextColor,
-    fontSize: 12,
-    fontStyle: 'normal',
-    fontWeight: fontWeightRegular
-  },
-  captionTextBold: {
-    fontFamily,
-    color: captionTextColor,
-    fontSize: 12,
-    fontStyle: 'normal',
-    fontWeight: fontWeightBold
-  },
-  /**
-   * Use this style to change <Input /> element text style
+   * base on light theme typeography
    */
-  inputText: {
-    fontSize: 18,
-    color: colors.titleText
-  }
+  ...lightTypeography
 }
 
 export default typographys