Start global color palette

components/Dropdown.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import enhanceWithClickOutside from 'react-click-outside'
 import ArrowDown from './svg/Arrowdown'
+import { PALETTE } from '../lib/constants'
 
 class Dropdown extends React.Component {
   constructor(props) {
@@ -34,7 +35,7 @@ class Dropdown extends React.Component {
         <span>{ item.name }</span>
         <style jsx>{`
           .dropdown-list-item {
-            background: #131313;
+            background: ${PALETTE.EDITOR_BG};
             user-select: none;
             padding: 8px 16px;
             border-bottom: 0.5px solid #000;

lib/constants.js

@@ -235,6 +235,10 @@ export const LANGUAGES = [
   }
 ]
 
+export const PALETTE = {
+  'EDITOR_BG': '#1A1A1A'
+}
+
 export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
 
 const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)

pages/index.js

@@ -9,7 +9,7 @@ import Meta from '../components/Meta'
 import Toolbar from '../components/Toolbar'
 import CodeImage from '../components/CodeImage'
 import api from '../lib/api'
-import { THEMES, LANGUAGES, DEFAULT_CODE } from '../lib/constants'
+import { THEMES, LANGUAGES, PALETTE, DEFAULT_CODE } from '../lib/constants'
 
 class Index extends React.Component {
   /* pathname, asPath, err, req, res */
@@ -69,7 +69,8 @@ class Index extends React.Component {
               onBGChange={color => this.setState({ background: color })}
               onThemeChange={theme => this.setState({ theme: theme.id })}
               onLanguageChange={language => this.setState({ language })}
-              bg={this.state.bgColor}
+              onSettingsChange={settings => this.setState({ settings })}
+              bg={this.state.background}
             />
             <CodeImage config={this.state}>
               {this.droppedContent || this.props.content || DEFAULT_CODE}
@@ -106,7 +107,7 @@ class Index extends React.Component {
             }
 
             #editor {
-              background: #151515;
+              background: ${PALETTE.EDITOR_BG};
               padding: 16px;
             }