<repo_name>forsythrosin/svg101<file_sep>/src/app/splitPane.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactSplitPane from 'react-split-pane';

import './splitPane.scss';

class SplitPane extends Component {
  render() {
    const { children, defaultSize } = this.props;

    let def = localStorage.getItem('splitPos');
    if (def) def = def * 100 + '%';
    else def = defaultSize;

    return (
      <ReactSplitPane
        {...this.props}
        defaultSize={def}
        onChange={size => localStorage.setItem('splitPos', size / window.innerWidth)}
      >
        {children}
      </ReactSplitPane>
    );
  }
}

SplitPane.propTypes = {
  children: PropTypes.node,
  defaultSize: PropTypes.string,
};

export default SplitPane;
<file_sep>/src/theme/index.js
import React from 'react';

const themes = {
  light: {
    name: 'light',
    primary: '#93bf6e',
    header: {
      backgroundColor: '#222',
      color: '#f7f7f7'
    },
    panel: {
      backgroundColor: '#f7f7f7',
      color: '#222',
    },
    backgroundColor: '#fff',
    color: '#222',
  },
  dark: {
    name: 'dark',
    primary: '#93bf6e',
    header: {
      backgroundColor: '#000',
      color: '#e7e7e7'
    },
    panel: {
      backgroundColor: '#222',
      color: '#f7f7f7'
    },
    backgroundColor: '#111',
    color: '#f7f7f7'
  },
};

const ThemeContext = React.createContext(themes.light);
const ThemeProvider = ThemeContext.Provider;

export {
  themes,
  ThemeContext,
  ThemeProvider,
};
