fix light theme in Carbon by introducing getTheme

components/Carbon.js

@@ -99,7 +99,7 @@ class Carbon extends React.PureComponent {
             theme={config.windowTheme}
             code={this.props.children}
             copyable={this.props.copyable}
-            light={config.theme.light}
+            light={this.props.theme.light}
           />
         ) : null}
         <CodeMirror
@@ -108,7 +108,7 @@ class Carbon extends React.PureComponent {
           value={this.props.children}
           options={options}
         />
-        {config.watermark && <Watermark light={config.theme.light} />}
+        {config.watermark && <Watermark light={this.props.theme.light} />}
         <div className="container-bg">
           <div className="white eliminateOnRender" />
           <div className="alpha eliminateOnRender" />

components/Editor.js

@@ -96,6 +96,8 @@ class Editor extends React.Component {
 
   carbonNode = React.createRef()
 
+  getTheme = () => this.props.themes.find(t => t.id === this.state.theme) || DEFAULT_THEME
+
   updateState = updates => {
     this.setState(updates, () => {
       if (!this.gist) {
@@ -117,7 +119,10 @@ class Editor extends React.Component {
     // if safari, get image from api
     const isPNG = format !== 'svg'
     if (this.context.image && this.isSafari && isPNG) {
-      const encodedState = serializeState(this.state)
+      const themeConfig = this.getTheme()
+      const highlights = { ...themeConfig.highlights, ...this.state.highlights }
+      // TODO: pull from state highlights, or custom theme highlights, or
+      const encodedState = serializeState({ ...this.state, highlights })
       return this.context.image(encodedState)
     }
 
@@ -261,6 +266,13 @@ class Editor extends React.Component {
   }
 
   updateTheme = theme => this.updateState({ theme })
+  updateHighlights = updates =>
+    this.setState(({ highlights = {} }) => ({
+      highlights: {
+        ...highlights,
+        ...updates
+      }
+    }))
 
   createTheme = theme => {
     this.props.updateThemes(themes => [theme, ...themes])
@@ -284,6 +296,7 @@ class Editor extends React.Component {
   render() {
     const {
       theme,
+      highlights,
       language,
       backgroundColor,
       backgroundImage,
@@ -294,16 +307,19 @@ class Editor extends React.Component {
 
     const config = omit(this.state, ['code'])
 
+    const themeConfig = this.getTheme()
+
     return (
       <div className="editor">
         <Toolbar>
           <Themes
+            theme={theme}
+            highlights={highlights}
             update={this.updateTheme}
+            updateHighlights={this.updateHighlights}
             remove={this.removeTheme}
             create={this.createTheme}
-            theme={theme}
             themes={this.props.themes}
-            router={this.props.router}
           />
           <Dropdown
             icon={languageIcon}
@@ -353,6 +369,7 @@ class Editor extends React.Component {
                 key={language}
                 ref={this.carbonNode}
                 config={this.state}
+                theme={themeConfig}
                 onChange={this.updateCode}
                 loading={this.state.loading}
               >

components/Themes/index.js

@@ -6,7 +6,6 @@ import { managePopout } from '../Popout'
 import ThemeIcon from '../svg/Theme'
 import RemoveIcon from '../svg/Remove'
 import { COLORS, DEFAULT_THEME } from '../../lib/constants'
-import { getRouteState } from '../../lib/routing'
 
 const ThemeCreate = dynamic(() => import('./ThemeCreate'), {
   loading: () => null
@@ -53,26 +52,14 @@ const getCustomName = themes =>
 
 class Themes extends React.PureComponent {
   state = {
-    highlights: {},
     name: ''
   }
 
-  componentDidMount() {
-    const { queryState } = getRouteState(this.props.router)
-
-    if (queryState.highlights) {
-      this.updateHighlights(queryState.highlights)
-    }
-  }
-
   dropdown = React.createRef()
 
   static getDerivedStateFromProps(props) {
     if (!props.isVisible) {
-      const themeConfig =
-        (props.themes && props.themes.find(t => t.id === props.theme)) || DEFAULT_THEME
       return {
-        highlights: themeConfig.highlights,
         name: getCustomName(props.themes)
       }
     }
@@ -89,14 +76,6 @@ class Themes extends React.PureComponent {
     }
   }
 
-  updateHighlights = updates =>
-    this.setState(({ highlights }) => ({
-      highlights: {
-        ...highlights,
-        ...updates
-      }
-    }))
-
   create = theme => {
     this.props.toggleVisibility()
     this.props.create(theme)
@@ -106,10 +85,11 @@ class Themes extends React.PureComponent {
 
   render() {
     const { themes, theme, isVisible, toggleVisibility } = this.props
-    const { highlights } = this.state
 
     const themeConfig = themes.find(t => t.id === theme) || DEFAULT_THEME
 
+    const highlights = { ...themeConfig.highlights, ...this.props.highlights }
+
     const dropdownValue = isVisible ? { name: this.state.name } : themeConfig
 
     const dropdownList = [
@@ -138,7 +118,7 @@ class Themes extends React.PureComponent {
             themes={themes}
             highlights={highlights}
             create={this.create}
-            updateHighlights={this.updateHighlights}
+            updateHighlights={this.props.updateHighlights}
             name={this.state.name}
             onInputChange={e => this.setState({ name: e.target.value })}
           />

lib/constants.js

@@ -948,7 +948,7 @@ export const DEFAULT_SETTINGS = {
   dropShadow: true,
   dropShadowOffsetY: '20px',
   dropShadowBlurRadius: '68px',
-  theme: DEFAULT_THEME,
+  theme: DEFAULT_THEME.id,
   windowTheme: 'none',
   language: DEFAULT_LANGUAGE,
   fontFamily: 'Hack',