Pass background theme color from index

components/codeImage.js

@@ -25,18 +25,6 @@ class CodeImage extends React.Component {
   constructor () {
     super()
     this.state = {}
-    this.save = this.save.bind(this)
-  }
-
-  save () {
-    // save
-    domtoimage.toJpeg(this.container)
-      .then((dataUrl) => {
-        const link = document.createElement('a')
-        link.download = 'my-image-name.jpeg'
-        link.href = dataUrl
-        link.click()
-      })
   }
 
   render () {
@@ -46,11 +34,9 @@ class CodeImage extends React.Component {
 
     return this.props.connectDropTarget(
       <div id='section'>
-        <div id='container' ref={(container) => { this.container = container }}>
+        <div id='container' style={Object.assign({ background: this.props.bg }, this.props.style)}>
           <pre className='hyper'>
-            <code onClick={this.save}>
+            <code>{code}</code>
-              {code}
-            </code>
           </pre>
         </div>
         <style jsx>{`

components/colorpicker.js

@@ -5,7 +5,7 @@ import { BlockPicker } from 'react-color'
 class ColorPicker extends React.Component {
   constructor() {
     super()
-    this.state = { isVisible: false, bgcolor: '#565656' }
+    this.state = { isVisible: false }
     this.toggle = this.toggle.bind(this)
     this.handlePickColor = this.handlePickColor.bind(this)
   }
@@ -19,7 +19,7 @@ class ColorPicker extends React.Component {
   }
 
   handlePickColor(color) {
-    this.setState({ bgcolor: color.hex })
+    this.props.onChange(color.hex)
   }
 
   render() {
@@ -29,10 +29,10 @@ class ColorPicker extends React.Component {
           <div className="colorpicker-label">
             <span>BG</span>
           </div>
-          <div className="bg-color" style={{background: this.state.bgcolor}} onClick={this.toggle}></div>
+          <div className="bg-color" style={{background: this.props.bg}} onClick={this.toggle}></div>
         </div>
         <div className="colorpicker-picker" hidden={!this.state.isVisible}>
-          <BlockPicker color={this.state.bgcolor} onChangeComplete={this.handlePickColor} />
+          <BlockPicker color={this.props.bg} onChangeComplete={this.handlePickColor} />
         </div>
         <style jsx>{`
           .colorpicker-container {

components/toolbar.js

@@ -81,7 +81,10 @@ const Toolbar = (props) => (
   <div id="toolbar">
     <Dropdown list={themes} />
     <Dropdown list={langauges} />
-    <ColorPicker />
+    <ColorPicker
+      onChange={props.onBGChange}
+      bg={props.bg}
+    />
     <Settings />
     <Button
       onClick={props.copyLink}

pages/index.js

@@ -22,6 +22,13 @@ class Index extends React.Component {
     }
   }
 
+  constructor()  {
+    super()
+    this.state = {
+      bgColor: '#111111'
+    }
+  }
+
   save () {
     // save
     domtoimage.toJpeg(document.getElementById('container'))
@@ -39,8 +46,12 @@ class Index extends React.Component {
           <Meta />
           <h1>Welcome to Code Image</h1>
           <div id="editor">
-            <Toolbar save={this.save} />
+            <Toolbar
-            <CodeImage>
+              save={this.save}
+              onBGChange={color => this.setState({ bgColor: color })}
+              bg={this.state.bgColor}
+            />
+            <CodeImage bg={this.state.bgColor}>
               {this.props.content}
             </CodeImage>
           </div>