clean up theme config derivation

components/Editor.js

@@ -120,9 +120,11 @@ class Editor extends React.Component {
     const isPNG = format !== 'svg'
     if (this.context.image && this.isSafari && isPNG) {
       const themeConfig = this.getTheme()
-      const highlights = { ...themeConfig.highlights, ...this.state.highlights }
+      // pull from custom theme highlights, or state highlights
-      // TODO: pull from state highlights, or custom theme highlights, or
+      const encodedState = serializeState({
-      const encodedState = serializeState({ ...this.state, highlights })
+        ...this.state,
+        highlights: { ...themeConfig.highlights, ...this.state.highlights }
+      })
       return this.context.image(encodedState)
     }
 
@@ -295,7 +297,6 @@ class Editor extends React.Component {
 
   render() {
     const {
-      theme,
       highlights,
       language,
       backgroundColor,
@@ -307,7 +308,7 @@ class Editor extends React.Component {
 
     const config = omit(this.state, ['code'])
 
-    const themeConfig = this.getTheme()
+    const theme = this.getTheme()
 
     return (
       <div className="editor">
@@ -369,7 +370,7 @@ class Editor extends React.Component {
                 key={language}
                 ref={this.carbonNode}
                 config={this.state}
-                theme={themeConfig}
+                theme={theme}
                 onChange={this.updateCode}
                 loading={this.state.loading}
               >

components/Themes/index.js

@@ -5,7 +5,7 @@ import Dropdown from '../Dropdown'
 import { managePopout } from '../Popout'
 import ThemeIcon from '../svg/Theme'
 import RemoveIcon from '../svg/Remove'
-import { COLORS, DEFAULT_THEME } from '../../lib/constants'
+import { COLORS } from '../../lib/constants'
 
 const ThemeCreate = dynamic(() => import('./ThemeCreate'), {
   loading: () => null
@@ -86,11 +86,9 @@ class Themes extends React.PureComponent {
   render() {
     const { themes, theme, isVisible, toggleVisibility } = this.props
 
-    const themeConfig = themes.find(t => t.id === theme) || DEFAULT_THEME
+    const highlights = { ...theme.highlights, ...this.props.highlights }
 
-    const highlights = { ...themeConfig.highlights, ...this.props.highlights }
+    const dropdownValue = isVisible ? { name: this.state.name } : theme
-
-    const dropdownValue = isVisible ? { name: this.state.name } : themeConfig
 
     const dropdownList = [
       {
@@ -114,7 +112,7 @@ class Themes extends React.PureComponent {
         />
         {isVisible && (
           <ThemeCreate
-            theme={themeConfig}
+            theme={theme}
             themes={themes}
             highlights={highlights}
             create={this.create}