How to use the echarts.registerTheme function in echarts

import GridElementGauge from './grid-elements/gridElementGauge';
import GridElementChart from './grid-elements/gridElementChart';

// This is tha guy that actually publishes data to the demo
import './worker/psWorkerRelayPublisher';

// Registering the grid-element rendering classes
GridElementColor.register("colorRender", GridElementColor);
GridElementGauge.register("gaugeRender", GridElementGauge);
GridElementChart.register("chartRender", GridElementChart);

/*
  TODO: For the elements built on echart (gauge and chart) we can use echarts built in styiling framework
  We can migrate the styles to here and make them available applciation wide, look into it...
*/
echarts.registerTheme('gauge_theme', {
    //backgroundColor: 'gray', //'#f4cccc',
    //color: 'red'
});

class App extends Component {
  render() {
    return (
      <div>
        <header>
          <p>
            This is a <a href="https://github.com/svenberglund/react-mst-grid-layout"><code>react-mst-grid-layout.js</code></a> demo!
        </p>
          
        </header>
        
      </div>

import {
  ChartCard,
  MiniArea,
  MiniBar,

} from 'components/Charts';

import { PREFIX } from '../axios/tools'

import echarts from 'echarts';
import Themes from './Dashboard.echartstheme';

const {Panel} = Collapse;
//get more style from https://echarts.baidu.com/theme-builder/
echarts.registerTheme('bizTheme2', Themes.bizTheme);
//please do not use defaultTheme, this is a big trap for developers

const { hasItemCreatePermission, hasItemReadPermission } = PermissionSettingService;
const { Option } = Select;

const topColResponsiveProps = {
  xs: 8,
  sm: 6,
  md: 6,
  lg: 6,
  xl: 6,
  style: { marginBottom: 24, marginTop: 24 },
};

const wholeLineColProps = {
  xs: 24,

"markPoint": {
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#eeeeee"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#eeeeee"
                    }
                }
            }
        }
    });*/
    echarts.registerTheme('westeros', {
        "color": [
            "#3fb1e3",
            "#6be6c1",
            "#626c91",
            "#a0a7e6",
            "#c4ebad",
            "#96dee8"
        ],
        "backgroundColor": "rgba(252,252,252,0)",
        "textStyle": {},
        "title": {
            "textStyle": {
                "color": "#222"
            },
            "subtextStyle": {
                "color": "#999999"

registerTheme() {
    echarts.registerTheme('westeros', westeros)
  }
  getOptions() {

registerTheme () {
    echarts.registerTheme('my_theme', {
      backgroundColor: '#0f3425',
    })
  }