occ-mobile/app/components/local-theme/index.js

/**
|--------------------------------------------------
| app theme class
|--------------------------------------------------
*/
export const keys = ['white', 'black']
export const langs = ['zh-Hans-US', 'en']

export default class AppTheme {
  static colorMap = {}

  static switchTheme = (map = keys[1]) => {
    return AppTheme.colorMap[map]
  }

  static setTheme = theme => {
    return (AppTheme.currentMap = theme)
  }
  //Index map for memr
  static currentMap
  static currentTheme = keys[1]
}
//common base style
AppTheme.baseMap = {
  brandColor: '#008BFF',
  font: {
    // 字体尺寸
    font_size_icontext: 10,
    font_size_caption_sm: 12,
    font_size_base: 14,
    font_size_subhead: 15,
    font_size_caption: 16,
    font_size_heading: 17,
  },
  radius: {
    // 圆角
    radius_xs: 2,
    radius_sm: 3,
    radius_md: 5,
    radius_lg: 7,
  },
  spacing: {
    // 间距
    // 水平间距
    h_spacing_sm: 5,
    h_spacing_md: 8,
    h_spacing_lg: 15,

    // 垂直间距
    v_spacing_xs: 3,
    v_spacing_sm: 6,
    v_spacing_md: 9,
    v_spacing_lg: 15,
    v_spacing_xl: 21,
  },
  color: {
    title: 'rgba(0,0,0,.85)',
    primaryText: 'rgba(0,0,0,.65)',
    seconddaryText: 'rgba(0,0,0,.45)',
    disabled: 'rgba(0,0,0,.25)',
    border: 'rgba(0,0,0,.15)',
    dividers: 'rgba(0,0,0,.09)',
    background: 'rgba(0,0,0,.04)',
    tableHeader: 'rgba(0,0,0,.02)',
  },
}
//abstract style
AppTheme.colorMap[keys[0]] = {
  barStyle: 'light-content',
  backgroundColor: '#F5F5F5',
  header: {
    backgroundColor: '#E14C46',
    color: '#fff',
  },
  tabBar: {
    backgroundColor: 'rgba(255,255,255,.9)',
    color: '#666',
    colorActive: '#E14C46',
    borderColor: '#eee',
  },
  normal: {
    title1: {
      color: '#333',
    },
    title2: {
      color: '#555',
    },
    title3: {
      color: '#666',
    },
    item1: {
      backgroundColor: '#fffffc',
    },
    item2: {
      backgroundColor: '#fff',
    },
    border1: {
      color: '#eee',
    },
    border2: {
      color: '#ddd',
    },
    border3: {
      color: '#ddd',
    },
  },
  modal: {
    title1: {
      color: '#333',
    },
    title2: {
      color: '#ccc',
    },
    border1: {
      color: '#ddd',
    },
    border2: {
      color: '#ccc',
    },
  },
  extra: {
    red: {
      color: '#E14C46',
    },
    yellow: {
      color: '#FAAF1E',
    },
    blue: {
      color: '#0090D5',
    },
    green: {
      color: '#59C152',
    },
    purple: {
      color: '#A856F8',
    },
    white: {
      color: '#fff',
    },
    coffee: {
      color: 'rgba(250,175,30,0.50)',
    },
    brown: {
      color: 'rgba(225,76,70,0.50)',
    },
  },
}
AppTheme.colorMap[keys[1]] = {
  barStyle: 'light-content',
  backgroundColor: '#1C1F2C',
  header: {
    backgroundColor: '#12141C',
    color: '#fff',
  },
  tabBar: {
    backgroundColor: '#12141C',
    color: '#CFD2E6',
    colorActive: '#E14C46',
    borderColor: 'rgba(255,255,255,.1)',
  },
  normal: {
    title1: {
      color: '#fff',
    },
    title2: {
      color: '#CFD2E6',
    },
    title3: {
      color: '#8A8C99',
    },
    item1: {
      backgroundColor: '#262935',
    },
    item2: {
      backgroundColor: '#232632',
    },
    border1: {
      color: 'rgba(255,255,255,.1)',
    },
    border2: {
      color: 'rgba(255,255,255,.2)',
    },
    border3: {
      color: 'rgba(255,255,255,.5)',
    },
  },
  modal: {
    title1: {
      color: '#333',
    },
    title2: {
      color: '#ccc',
    },
    border1: {
      color: '#ddd',
    },
    border2: {
      color: '#ccc',
    },
  },
  extra: {
    red: {
      color: '#E14C46',
    },
    yellow: {
      color: '#FAAF1E',
    },
    blue: {
      color: '#0090D5',
    },
    green: {
      color: '#59C152',
    },
    purple: {
      color: '#A856F8',
    },
    white: {
      color: '#fff',
    },
    coffee: {
      color: 'rgba(250,175,30,0.50)',
    },
    brown: {
      color: 'rgba(225,76,70,0.50)',
    },
  },
}

AppTheme.currentMap = AppTheme.switchTheme()