diff --git a/src/DataExplorer/DataExplorerVisualizations.jsx b/src/DataExplorer/DataExplorerVisualizations.jsx
index c503a2a59d..f59d010c29 100644
--- a/src/DataExplorer/DataExplorerVisualizations.jsx
+++ b/src/DataExplorer/DataExplorerVisualizations.jsx
@@ -7,7 +7,6 @@ import SummaryChartGroup from '../components/charts/SummaryChartGroup/.';
 import PercentageStackedBarChart from '../components/charts/PercentageStackedBarChart/.';
 import DataSummaryCardGroup from '../components/cards/DataSummaryCardGroup/.';
 import { getCharts } from '../components/charts/helper';
-import { localTheme } from '../localconf';
 
 class DataExplorerVisualizations extends React.Component {
   constructor(props) {
@@ -45,14 +44,13 @@ class DataExplorerVisualizations extends React.Component {
         { charts && this.state.showVisualization ?
           <div className='data-explorer__charts'>
             <DataSummaryCardGroup summaryItems={charts.countItems} connected />
-            <SummaryChartGroup summaries={charts.summaries} localTheme={localTheme} />
+            <SummaryChartGroup summaries={charts.summaries} />
             {
               charts.stackedBarCharts.map((chart, i) =>
                 (<PercentageStackedBarChart
                   key={i}
                   data={chart.data}
                   title={chart.title}
-                  localTheme={localTheme}
                   width='100%'
                 />),
               )
diff --git a/src/Index/reduxer.jsx b/src/Index/reduxer.jsx
index 49d8b760f9..65f012c4c0 100644
--- a/src/Index/reduxer.jsx
+++ b/src/Index/reduxer.jsx
@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import { sortCompare } from '../utils';
-import { localTheme } from '../localconf';
 import dictIcons from '../img/icons';
 import { setActive } from '../Top/reduxer';
 import IndexBarChart from '../components/charts/IndexBarChart/.';
@@ -13,7 +12,7 @@ export const ReduxIndexBarChart = (() => {
       const projectList = Object.values(
         state.homepage.projectsByName,
       ).sort(sortCompare);
-      return { projectList, countNames: components.charts.indexChartNames, localTheme };
+      return { projectList, countNames: components.charts.indexChartNames };
     }
     return {};
   };
diff --git a/src/components/ProjectDashboard.jsx b/src/components/ProjectDashboard.jsx
index ef15f46d84..1aa07589ec 100644
--- a/src/components/ProjectDashboard.jsx
+++ b/src/components/ProjectDashboard.jsx
@@ -19,7 +19,6 @@ class ProjectDashboard extends Component {
             summaryItems={this.props.summaries}
             align='left'
           />
-          {/* <ReduxProjectBarChart projectList={this.props.projectList} /> */}
         </div>
         <ProjectTable projectList={projectList} summaries={this.props.details} />
       </React.Fragment>
diff --git a/src/components/charts/IndexBarChart/index.jsx b/src/components/charts/IndexBarChart/index.jsx
index fcdbe02ffa..780af3d967 100644
--- a/src/components/charts/IndexBarChart/index.jsx
+++ b/src/components/charts/IndexBarChart/index.jsx
@@ -6,6 +6,7 @@ import Spinner from '../../Spinner';
 import TooltipCDIS from '../TooltipCDIS/.';
 import Tick from '../Tick';
 import './IndexBarChart.less';
+import helper from '../helper';
 
 const sortCount = (a, b) => {
   const countA = a.counts.reduce((res, item) => res + item);
@@ -95,9 +96,7 @@ class IndexBarChart extends React.Component {
     countNames: PropTypes.arrayOf(
       PropTypes.string,
     ),
-    localTheme: PropTypes.objectOf(
-      PropTypes.any,
-    ),
+    xAxisColor: PropTypes.string,
   };
 
   render() {
@@ -106,11 +105,8 @@ class IndexBarChart extends React.Component {
     }
     const projectList = [...this.props.projectList.sort(sortCount)];
     const topList = (projectList.length <= 5) ? projectList : getTopList(projectList);
-
-    const localTheme = this.props.localTheme;
     const sumList = computeSummations(topList, this.props.countNames);
     const indexChart = createChartData(topList, this.props.countNames, sumList);
-
     const projectNames = topList.map(project => project.code);
     const barNames = createBarNames(indexChart);
     let countBar = 0;
@@ -125,8 +121,8 @@ class IndexBarChart extends React.Component {
           >
             <h4>Project Submission status</h4>
             <XAxis
-              stroke={localTheme['barGraph.lineColor']}
-              fill={localTheme['barGraph.lineColor']}
+              stroke={this.props.xAxisColor}
+              fill={this.props.xAxisColor}
               domain={[0, 100]}
               ticks={[0, 25, 50, 75, 100]}
               allowDecimals={false}
@@ -152,7 +148,7 @@ class IndexBarChart extends React.Component {
                       name={projectNames[index]}
                       dataKey={barName}
                       stackId='a'
-                      fill={localTheme[`barGraph.bar${(index + 1).toString()}Color`]}
+                      fill={helper.getCategoryColor(index)}
                     />
                   );
                 },
@@ -166,11 +162,10 @@ class IndexBarChart extends React.Component {
   }
 }
 
-
 IndexBarChart.defaultProps = {
   projectList: [],
   countNames: [],
-  localTheme: {},
+  xAxisColor: '#666666',
 };
 
 export default IndexBarChart;
diff --git a/src/components/charts/PercentageStackedBarChart/index.jsx b/src/components/charts/PercentageStackedBarChart/index.jsx
index e270c948f6..e7fc8cc4ac 100644
--- a/src/components/charts/PercentageStackedBarChart/index.jsx
+++ b/src/components/charts/PercentageStackedBarChart/index.jsx
@@ -24,7 +24,6 @@ const labelListStyle = {
   fontWeight: 600,
 };
 
-
 // FIXME: add back in animation (https://github.com/recharts/recharts/issues/1083)
 class PercentageStackedBarChart extends React.Component {
   render() {
@@ -64,8 +63,8 @@ class PercentageStackedBarChart extends React.Component {
                 key={name}
                 dataKey={name}
                 stackId='a'
-                fill={helper.getCategoryColor(index, this.props.localTheme)}
                 isAnimationActive={false}
+                fill={helper.getCategoryColor(index)}
               >
                 <LabelList dataKey={name} position='center' style={labelListStyle} formatter={helper.addPercentage} className='percentage-bar-chart__label-list' />
               </Bar>
@@ -80,7 +79,7 @@ class PercentageStackedBarChart extends React.Component {
                   <span
                     className='percentage-bar-chart__legend-color'
                     style={{
-                      background: helper.getCategoryColor(index, this.props.localTheme),
+                      background: helper.getCategoryColor(index),
                     }}
                   />
                   <span className='percentage-bar-chart__legend-name form-body'>
@@ -106,7 +105,6 @@ const ChartDataShape = PropTypes.shape({
 
 PercentageStackedBarChart.propTypes = {
   data: PropTypes.arrayOf(ChartDataShape).isRequired,
-  localTheme: PropTypes.object.isRequired,
   percentageFixedPoint: PropTypes.number,
 };
 
diff --git a/src/components/charts/ProjectBarChart/ProjectBarChart.less b/src/components/charts/ProjectBarChart/ProjectBarChart.less
deleted file mode 100644
index 6fd5dbf568..0000000000
--- a/src/components/charts/ProjectBarChart/ProjectBarChart.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.project-bar-chart {
-  float: left;
-  overflow: hidden;
-  width: 770px;
-  min-width: 300px;
-  height: 340px;
-}
\ No newline at end of file
diff --git a/src/components/charts/ProjectBarChart/index.jsx b/src/components/charts/ProjectBarChart/index.jsx
deleted file mode 100644
index a3fb8cf05a..0000000000
--- a/src/components/charts/ProjectBarChart/index.jsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { ResponsiveContainer, Legend, Tooltip, BarChart, Bar, XAxis, YAxis } from 'recharts';
-import PropTypes from 'prop-types'; // see https://github.com/facebook/prop-types#prop-types
-import React from 'react';
-import { browserHistory } from 'react-router-dom';
-import './ProjectBarChart.less';
-
-/**
- * Component shows stacked-bars - one stacked-bar for each project in props.projectList -
- * where experiments are stacked on top of cases.  projectList looks like:
- *
- * const data = [
- *       {name: 'bpa-test', experimentCount: 4000, caseCount: 2400, aliquotCount: 2400},
- *       ...
- *   ];
- */
-class ProjectBarChart extends React.Component {
-  static propTypes = {
-    projectList: PropTypes.arrayOf(
-      PropTypes.objectOf(PropTypes.any),
-    ),
-    countNames: PropTypes.arrayOf(
-      PropTypes.string,
-    ),
-    localTheme: PropTypes.objectOf(
-      PropTypes.any,
-    ),
-  };
-
-  render() {
-    const projectList = [...(this.props.projectList || [])];
-    const countNames = this.props.countNames;
-    const localTheme = this.props.localTheme;
-    const projectCharts = projectList.map(
-      (project) => {
-        const dict = { name: project.name };
-        Object.keys(project.charts).forEach(
-          (key) => { dict[`chart${key.toString()}`] = project.charts[key]; },
-        );
-        return dict;
-      },
-    );
-    let barNames = [];
-    if (projectCharts.length > 0) {
-      barNames = Object.keys(projectCharts[0]).filter(key => key.indexOf('chart') === 0).map(
-        name => name,
-      );
-    }
-    let countBar = 0;
-    return (
-      <div className='project-bar-chart'>
-        <ResponsiveContainer width='100%' height='100%'>
-          <BarChart
-            onClick={(e) => { browserHistory.push(`/${e.activeLabel}`); window.location.reload(false); }}
-            data={projectCharts}
-            margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
-            barSize={projectCharts.length < 10 ? 50 : null}
-            layout='horizontal'
-          >
-            <h4>Project Submission status</h4>
-            <XAxis dataKey='name' stroke={localTheme['barGraph.lineColor']} fill={localTheme['barGraph.lineColor']} />
-            <YAxis stroke={localTheme['barGraph.lineColor']} fill={localTheme['barGraph.lineColor']} />
-            <Tooltip />
-            <Legend />
-            {
-              barNames.map(
-                (barName, index) => {
-                  countBar += 1;
-                  return (
-                    <Bar
-                      key={countNames[index] + countBar.toString()}
-                      name={countNames[index]}
-                      dataKey={barName}
-                      stackId='a'
-                      fill={localTheme[`barGraph.bar${(index + 1).toString()}Color`]}
-                    />
-                  );
-                },
-
-              )
-            }
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    );
-  }
-}
-
-
-ProjectBarChart.defaultProps = {
-  projectList: [],
-  countNames: [],
-  localTheme: {},
-};
-
-export default ProjectBarChart;
diff --git a/src/components/charts/SummaryChartGroup/SummaryChartGroup.test.jsx b/src/components/charts/SummaryChartGroup/SummaryChartGroup.test.jsx
index 863d72f063..35926e51f0 100644
--- a/src/components/charts/SummaryChartGroup/SummaryChartGroup.test.jsx
+++ b/src/components/charts/SummaryChartGroup/SummaryChartGroup.test.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import SummaryChartGroup from '.';
-import { localTheme } from '../../../localconf';
 import SummaryPieChart from '../SummaryPieChart';
 import SummaryHorizontalBarChart from '../SummaryHorizontalBarChart';
 
@@ -37,7 +36,6 @@ describe('<SummaryChartGroup />', () => {
   const charts = mount(<SummaryChartGroup
     summaries={summaries}
     width={1010}
-    localTheme={localTheme}
   />);
 
   it('renders', () => {
diff --git a/src/components/charts/SummaryChartGroup/index.jsx b/src/components/charts/SummaryChartGroup/index.jsx
index 8e9a5daed9..358f7f99eb 100644
--- a/src/components/charts/SummaryChartGroup/index.jsx
+++ b/src/components/charts/SummaryChartGroup/index.jsx
@@ -22,13 +22,11 @@ class SummaryChartGroup extends Component {
                     <SummaryPieChart
                       data={item.data}
                       title={item.title}
-                      localTheme={this.props.localTheme}
                     />
                   ) : (
                     <SummaryHorizontalBarChart
                       data={item.data}
                       title={item.title}
-                      localTheme={this.props.localTheme}
                       vertical
                       color='#3283c8'
                     />
@@ -44,7 +42,6 @@ class SummaryChartGroup extends Component {
 
 SummaryChartGroup.propTypes = {
   summaries: PropTypes.arrayOf(PropTypes.object).isRequired,
-  localTheme: PropTypes.object.isRequired,
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
diff --git a/src/components/charts/SummaryHorizontalBarChart/SummaryHorizontalBarChart.test.jsx b/src/components/charts/SummaryHorizontalBarChart/SummaryHorizontalBarChart.test.jsx
index afe27499be..356a36e8ec 100644
--- a/src/components/charts/SummaryHorizontalBarChart/SummaryHorizontalBarChart.test.jsx
+++ b/src/components/charts/SummaryHorizontalBarChart/SummaryHorizontalBarChart.test.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { localTheme } from '../../../localconf';
 import SummaryHorizontalBarChart from '.';
 
 describe('<SummaryHorizontalBarChart />', () => {
@@ -14,7 +13,7 @@ describe('<SummaryHorizontalBarChart />', () => {
   ];
 
   const wrapper = mount(
-    <SummaryHorizontalBarChart data={chartData} title='bar chart title' color='#3283c8' localTheme={localTheme} />,
+    <SummaryHorizontalBarChart data={chartData} title='bar chart title' color='#3283c8' />,
   );
   const charts = wrapper.find(SummaryHorizontalBarChart);
 
diff --git a/src/components/charts/SummaryHorizontalBarChart/index.jsx b/src/components/charts/SummaryHorizontalBarChart/index.jsx
index 59d5f5e1c8..b9b612a061 100644
--- a/src/components/charts/SummaryHorizontalBarChart/index.jsx
+++ b/src/components/charts/SummaryHorizontalBarChart/index.jsx
@@ -58,7 +58,7 @@ class SummaryBarChart extends React.Component {
                   <Cell
                     key={dataKey}
                     fill={this.props.color
-                      || helper.getCategoryColor(index, this.props.localTheme)}
+                      || helper.getCategoryColor(index)}
                   />
                 ))
               }
@@ -79,7 +79,6 @@ const ChartDataShape = PropTypes.shape({
 SummaryBarChart.propTypes = {
   title: PropTypes.string.isRequired,
   data: PropTypes.arrayOf(ChartDataShape).isRequired,
-  localTheme: PropTypes.object.isRequired,
   color: PropTypes.string,
   barSize: PropTypes.number,
   barGap: PropTypes.number,
diff --git a/src/components/charts/SummaryPieChart/SummaryPieChart.test.jsx b/src/components/charts/SummaryPieChart/SummaryPieChart.test.jsx
index 91e03b8ca7..feef2a066e 100644
--- a/src/components/charts/SummaryPieChart/SummaryPieChart.test.jsx
+++ b/src/components/charts/SummaryPieChart/SummaryPieChart.test.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { localTheme } from '../../../localconf';
 import SummaryPieChart from '.';
 
 describe('<SummaryPieChart />', () => {
@@ -16,7 +15,6 @@ describe('<SummaryPieChart />', () => {
   const charts = mount(<SummaryPieChart
     title='test'
     data={chartData}
-    localTheme={localTheme}
   />).find(SummaryPieChart);
 
   it('renders', () => {
diff --git a/src/components/charts/SummaryPieChart/index.jsx b/src/components/charts/SummaryPieChart/index.jsx
index c5a80e0f8b..1d765df5be 100644
--- a/src/components/charts/SummaryPieChart/index.jsx
+++ b/src/components/charts/SummaryPieChart/index.jsx
@@ -65,7 +65,7 @@ class SummaryPieChart extends React.Component {
                   <Cell
                     key={dataKey}
                     dataKey={dataKey}
-                    fill={getColor(index, this.props.localTheme, useTwoColors)}
+                    fill={getColor(index)}
                   />))
               }
             </Pie>
@@ -85,7 +85,6 @@ const ChartDataShape = PropTypes.shape({
 SummaryPieChart.propTypes = {
   title: PropTypes.string.isRequired,
   data: PropTypes.arrayOf(ChartDataShape).isRequired,
-  localTheme: PropTypes.object.isRequired,
   innerRadius: PropTypes.number,
   outerRadius: PropTypes.number,
   showPercentage: PropTypes.bool,
diff --git a/src/components/charts/helper.js b/src/components/charts/helper.js
index d69d348d5e..c30f7fff96 100644
--- a/src/components/charts/helper.js
+++ b/src/components/charts/helper.js
@@ -1,3 +1,5 @@
+import { colorsForCharts } from '../../localconf';
+
 const percentageFormatter = showPercentage => v => (showPercentage ? `${v}%` : v);
 
 const addPercentage = v => (percentageFormatter(true)(v));
@@ -39,13 +41,9 @@ const getPercentageData = (chartData, percentageFixedPoint) => {
   return [result];
 };
 
-const getCategoryColor = (index, localTheme) => {
-  // map index to (1-9)
-  const i = (index % 9) + 1;
-  return localTheme[`barGraph.bar${i}Color`];
-};
+const getCategoryColor = index => (colorsForCharts.categorical9Colors[index % 9]);
 
-const getCategoryColorFrom2Colors = (index, localTheme) => localTheme[`pieChartTwoColor.pie${(index % 2) + 1}Color`];
+const getCategoryColorFrom2Colors = index => colorsForCharts.categorical2Colors[index % 2];
 
 const getDataKey = showPercentage => (showPercentage ? 'percentage' : 'value');
 
diff --git a/src/components/charts/helper.test.js b/src/components/charts/helper.test.js
index a4a543b00c..f97d64f203 100644
--- a/src/components/charts/helper.test.js
+++ b/src/components/charts/helper.test.js
@@ -1,5 +1,5 @@
 import helper from './helper';
-import { localTheme } from '../../localconf';
+import { colorsForCharts } from '../../localconf';
 
 describe('helper', () => {
   it('percentage formatter', () => {
@@ -35,27 +35,17 @@ describe('helper', () => {
   });
 
   it('get color', () => {
-    const expectColors9 = [
-      '#3283c8',
-      '#7ec500',
-      '#ad91ff',
-      '#f4b940',
-      '#e74c3c',
-      '#05b8ee',
-      '#ff7abc',
-      '#ef8523',
-      '#26d9b1',
-    ];
+    const expectColors9 = colorsForCharts.categorical9Colors;
     const colors9 = [];
     for (let i = 0; i < 9; i += 1) {
-      colors9.push(helper.getCategoryColor(i, localTheme));
+      colors9.push(helper.getCategoryColor(i));
     }
     expect(colors9).toEqual(expectColors9);
 
     const expectColors2 = ['#3283c8', '#e7e7e7'];
     const colors2 = [];
-    colors2.push(helper.getCategoryColorFrom2Colors(0, localTheme));
-    colors2.push(helper.getCategoryColorFrom2Colors(1, localTheme));
+    colors2.push(helper.getCategoryColorFrom2Colors(0));
+    colors2.push(helper.getCategoryColorFrom2Colors(1));
     expect(colors2).toEqual(expectColors2);
   });
 
diff --git a/src/localconf.js b/src/localconf.js
index 8d4ebe748b..b36162fb92 100644
--- a/src/localconf.js
+++ b/src/localconf.js
@@ -48,27 +48,24 @@ function buildConfig(opts) {
   const loginPath = `${userapiPath}login/`;
   const graphqlSchemaUrl = `${hostname}data/schema.json`;
 
-  const localTheme = {
-    'barGraph.lineColor': '#666666',
-    'barGraph.bar1Color': '#3283c8',
-    'barGraph.bar2Color': '#7ec500',
-    'barGraph.bar3Color': '#ad91ff',
-    'barGraph.bar4Color': '#f4b940',
-    'barGraph.bar5Color': '#e74c3c',
-    'barGraph.bar6Color': '#05b8ee',
-    'barGraph.bar7Color': '#ff7abc',
-    'barGraph.bar8Color': '#ef8523',
-    'barGraph.bar9Color': '#26d9b1',
-    'summary.borderTopColor': '#c87152',
-    'summary.borderColor': '#222222',
-    'summary.countColor': '#ff4200',
-    'summary.iconColor': '#008000',
-    'projectTable.summaryRowColor': '#eeeeee',
-    'projectTable.submitButtonColor': '#dddddd',
-    'pieChartTwoColor.pie1Color': '#3283c8',
-    'pieChartTwoColor.pie2Color': '#e7e7e7',
-    tableBarColor: '#7d7474',
+  const colorsForCharts = {
+    categorical9Colors: [
+      '#3283c8',
+      '#7ec500',
+      '#ad91ff',
+      '#f4b940',
+      '#e74c3c',
+      '#05b8ee',
+      '#ff7abc',
+      '#ef8523',
+      '#26d9b1',
+    ],
+    categorical2Colors: [
+      '#3283c8',
+      '#e7e7e7',
+    ],
   };
+
   const requiredCerts = [];
 
   if (app === 'gdc') {
@@ -97,7 +94,7 @@ function buildConfig(opts) {
     graphqlSchemaUrl,
     appname: components.appName,
     mockStore,
-    localTheme,
+    colorsForCharts,
     login,
     loginPath,
     requiredCerts,
diff --git a/src/stories/charts.jsx b/src/stories/charts.jsx
index 5210216e6c..5dc418c612 100644
--- a/src/stories/charts.jsx
+++ b/src/stories/charts.jsx
@@ -4,7 +4,6 @@ import SummaryHorizontalBarChart from '../components/charts/SummaryHorizontalBar
 import SummaryPieChart from '../components/charts/SummaryPieChart';
 import SummaryChartGroup from '../components/charts/SummaryChartGroup';
 import PercentageStackedBarChart from '../components/charts/PercentageStackedBarChart';
-import { localTheme } from '../localconf';
 
 const chartData = [
   { name: 'H1N1', value: 4000 },
@@ -36,17 +35,17 @@ const summaries = [
 
 storiesOf('Chart', module)
   .add('SummaryHorizontalBarChart', () => (
-    <SummaryHorizontalBarChart data={chartData} title='bar chart title' localTheme={localTheme} showPercentage={false} />
+    <SummaryHorizontalBarChart data={chartData} title='bar chart title' showPercentage={false} />
   ))
   .add('SummaryHorizontalBarChart with single color and percentage', () => (
-    <SummaryHorizontalBarChart data={chartData} title='bar chart title' color='#3283c8' localTheme={localTheme} />
+    <SummaryHorizontalBarChart data={chartData} title='bar chart title' color='#3283c8' />
   ))
   .add('SummaryPieChart', () => (
-    <SummaryPieChart data={chartData} title='pie chart title' localTheme={localTheme} showPercentage />
+    <SummaryPieChart data={chartData} title='pie chart title' showPercentage />
   ))
   .add('SummaryChartGroup', () => (
-    <SummaryChartGroup summaries={summaries} width={1010} localTheme={localTheme} />
+    <SummaryChartGroup summaries={summaries} width={1010} />
   ))
   .add('PercentageStackedBarChart', () => (
-    <PercentageStackedBarChart data={chartData} localTheme={localTheme} />
+    <PercentageStackedBarChart data={chartData} />
   ));