FormidableLabs · kitten · Nov 7, 2017 · Nov 6, 2017 · Nov 6, 2017 · Nov 6, 2017
diff --git a/README.md b/README.md
@@ -125,7 +125,6 @@ We can start with this project's sample at [`one-page.html`](./one-page.html). I
     <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
     <link href="https://unpkg.com/normalize.css@7/normalize.css" rel="stylesheet" type="text/css">
-    <link href="https://unpkg.com/spectacle/lib/themes/default/index.css" rel="stylesheet" type="text/css">
 </head>
 <body>
     <div id="root"></div>

diff --git a/example/src/index.js b/example/src/index.js
@@ -13,7 +13,6 @@ import createTheme from '../../src/themes/default';
 import Interactive from '../assets/interactive';
 
 require('normalize.css');
-require('../../src/themes/default/index.css');
 
 const images = {
   city: require('../assets/city.jpg'),

diff --git a/one-page.html b/one-page.html
@@ -7,7 +7,6 @@
     <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
     <link href="https://unpkg.com/normalize.css@7/normalize.css" rel="stylesheet" type="text/css">
-    <link href="https://unpkg.com/spectacle@^4/lib/themes/default/index.css" rel="stylesheet" type="text/css">
 </head>
 <body>
     <div id="root"></div>

diff --git a/src/components/__snapshots__/code-pane.test.js.snap b/src/components/__snapshots__/code-pane.test.js.snap
@@ -18,19 +18,20 @@ exports[`<CodePane /> should render correctly. 1`] = `
   theme="dark"
 >
   <Styled(div)
-    className="react-live react-live-dark "
+    className=""
     styles={
       Array [
-        undefined,
+        Object {},
         Object {},
         undefined,
       ]
     }
   >
     <div
-      className="react-live react-live-dark  css-0"
+      className="css-0"
     >
       <Styled(Editor)
+        className="language-prism"
         code="
             const myButton = (
               <CustomButton
@@ -46,10 +47,11 @@ exports[`<CodePane /> should render correctly. 1`] = `
         onClick={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
-        styles={undefined}
+        prismTheme="dark;"
+        syntaxStyles={Object {}}
       >
         <Editor
-          className="css-0"
+          className="language-prism css-1i53um3"
           code="
               const myButton = (
                 <CustomButton
@@ -65,10 +67,11 @@ exports[`<CodePane /> should render correctly. 1`] = `
           onClick={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
-          styles={undefined}
+          prismTheme="dark;"
+          syntaxStyles={Object {}}
         >
           <pre
-            className="prism-code css-0"
+            className="prism-code language-prism css-1i53um3"
             contentEditable={false}
             dangerouslySetInnerHTML={
               Object {
@@ -87,9 +90,10 @@ exports[`<CodePane /> should render correctly. 1`] = `
             onClick={undefined}
             onKeyDown={undefined}
             onKeyUp={undefined}
+            prismTheme="dark;"
             spellCheck="false"
             style={undefined}
-            styles={undefined}
+            syntaxStyles={Object {}}
           />
         </Editor>
       </Styled(Editor)>

diff --git a/src/components/__snapshots__/component-playground.test.js.snap b/src/components/__snapshots__/component-playground.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
 <div
-  class="react-live react-live-dark css-o32omv"
+  class="react-live css-o32omv"
   scope="[object Object]"
 >
   <div
@@ -66,9 +66,11 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
       class="css-1fc71w4"
     >
       <pre
-        class="prism-code css-egp0ia"
+        class="prism-code language-prism css-1y25kh4"
         contenteditable="true"
+        prismtheme="dark;"
         spellcheck="false"
+        syntaxstyles="[object Object]"
       >
         <span
           class="token comment"
@@ -543,7 +545,7 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
 
 exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
 <div
-  class="react-live react-live-light css-o32omv"
+  class="react-live css-o32omv"
   scope="[object Object]"
 >
   <div
@@ -607,9 +609,11 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
       class="css-1fc71w4"
     >
       <pre
-        class="prism-code css-egp0ia"
+        class="prism-code language-prism css-x6ttwb"
         contenteditable="true"
+        prismtheme="light;"
         spellcheck="false"
+        syntaxstyles="[object Object]"
       >
         <span
           class="token comment"
@@ -1084,7 +1088,7 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
 
 exports[`<ComponentPlayground /> Should render with a custom background color 1`] = `
 <div
-  class="react-live react-live-light css-o32omv"
+  class="react-live css-o32omv"
   scope="[object Object]"
 >
   <div
@@ -1148,9 +1152,11 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
       class="css-1fc71w4"
     >
       <pre
-        class="prism-code css-egp0ia"
+        class="prism-code language-prism css-x6ttwb"
         contenteditable="true"
+        prismtheme="light;"
         spellcheck="false"
+        syntaxstyles="[object Object]"
       >
         <span
           class="token comment"
@@ -1625,7 +1631,7 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
 
 exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
 <div
-  class="react-live react-live-light css-o32omv"
+  class="react-live css-o32omv"
   scope="[object Object]"
 >
   <div
@@ -1683,9 +1689,11 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
       class="css-1fc71w4"
     >
       <pre
-        class="prism-code css-egp0ia"
+        class="prism-code language-prism css-x6ttwb"
         contenteditable="true"
+        prismtheme="light;"
         spellcheck="false"
+        syntaxstyles="[object Object]"
       >
         <span
           class="token keyword"

diff --git a/src/components/__snapshots__/manager.test.js.snap b/src/components/__snapshots__/manager.test.js.snap
@@ -183,27 +183,27 @@ exports[`<Manager /> should render correctly. 1`] = `
                         Array [
                           undefined,
                           Object {
-                            "animation": "pacmanTopFramesBis 0.12s linear 10 alternate both",
+                            "animation": "animation-vwhb3c 0.12s linear 10 alternate both",
                           },
                         ]
                       }
                     >
                       <div
-                        className="css-13kse6y"
+                        className="css-1la23zo"
                       />
                     </Styled(div)>
                     <Styled(div)
                       styles={
                         Array [
                           undefined,
                           Object {
-                            "animation": "pacmanBottomFramesBis 0.12s linear 10 alternate both",
+                            "animation": "animation-1p18wsg 0.12s linear 10 alternate both",
                           },
                         ]
                       }
                     >
                       <div
-                        className="css-9ev9ib"
+                        className="css-1yi33k2"
                       />
                     </Styled(div)>
                   </div>
@@ -814,27 +814,27 @@ exports[`<Manager /> should render with slideset slides 1`] = `
                         Array [
                           undefined,
                           Object {
-                            "animation": "pacmanTopFrames 0.12s linear 10 alternate both",
+                            "animation": "animation-v6s9vi 0.12s linear 10 alternate both",
                           },
                         ]
                       }
                     >
                       <div
-                        className="css-1cs01s8"
+                        className="css-172vklz"
                       />
                     </Styled(div)>
                     <Styled(div)
                       styles={
                         Array [
                           undefined,
                           Object {
-                            "animation": "pacmanBottomFrames 0.12s linear 10 alternate both",
+                            "animation": "animation-9hbgqx 0.12s linear 10 alternate both",
                           },
                         ]
                       }
                     >
                       <div
-                        className="css-7iidye"
+                        className="css-5id854"
                       />
                     </Styled(div)>
                   </div>

diff --git a/src/components/__snapshots__/progress.test.js.snap b/src/components/__snapshots__/progress.test.js.snap
@@ -42,27 +42,27 @@ exports[`<Progress /> should render PacMan correctly 1`] = `
                 Array [
                   undefined,
                   Object {
-                    "animation": "pacmanTopFramesBis 0.12s linear 10 alternate both",
+                    "animation": "animation-vwhb3c 0.12s linear 10 alternate both",
                   },
                 ]
               }
             >
               <div
-                className="css-13kse6y"
+                className="css-1la23zo"
               />
             </Styled(div)>
             <Styled(div)
               styles={
                 Array [
                   undefined,
                   Object {
-                    "animation": "pacmanBottomFramesBis 0.12s linear 10 alternate both",
+                    "animation": "animation-1p18wsg 0.12s linear 10 alternate both",
                   },
                 ]
               }
             >
               <div
-                className="css-9ev9ib"
+                className="css-1yi33k2"
               />
             </Styled(div)>
           </div>

diff --git a/src/components/__snapshots__/slide.test.js.snap b/src/components/__snapshots__/slide.test.js.snap
@@ -44,7 +44,7 @@ exports[`<Slide /> should render correctly with transitions. 1`] = `
       }
     >
       <div
-        className="spectacle-slide css-1kmub7p"
+        className="spectacle-slide css-1w0uyvd"
         style={
           Object {
             "transform": " translate3d(-100%, 0, 0) rotateY(-90deg)",
@@ -130,7 +130,7 @@ exports[`<Slide /> should render correctly without transitions. 1`] = `
       }
     >
       <div
-        className="spectacle-slide css-1kmub7p"
+        className="spectacle-slide css-1w0uyvd"
         style={
           Object {
             "transform": " translate3d(0px, 0px, 0px)",

diff --git a/src/components/code-pane.js b/src/components/code-pane.js
@@ -7,7 +7,13 @@ import '../utils/prism-import';
 import { Editor } from 'react-live';
 
 const StyledWrapper = styled.div(props => props.styles);
-const StyledEditor = styled(Editor)(props => props.styles);
+const StyledEditor = styled(Editor)`
+  && {
+    ${props => props.syntaxStyles}
+  }
+
+  ${props => props.prismTheme}
+`;
 
 export default class CodePane extends Component {
   handleEditorEvent(evt) {
@@ -17,28 +23,24 @@ export default class CodePane extends Component {
   render() {
     const useDarkTheme = this.props.theme === 'dark';
 
-    if (useDarkTheme) {
-      require('../themes/default/prism.dark.css');
-    } else {
-      require('../themes/default/prism.light.css');
-    }
-
     const wrapperStyles = [
-      this.context.styles.components.codePane.wrapper,
+      this.context.styles.components.codePane,
       getStyles.call(this),
       this.props.style
     ];
 
     return (
       <StyledWrapper
-        className={`react-live react-live-${useDarkTheme ? 'dark' : 'light'} ${this.props.className}`}
+        className={this.props.className}
         styles={wrapperStyles}
       >
         <StyledEditor
+          className="language-prism"
           code={this.props.source}
           language={this.props.lang}
           contentEditable={this.props.contentEditable}
-          styles={this.context.styles.components.codePane.editor}
+          syntaxStyles={this.context.styles.components.syntax}
+          prismTheme={this.context.styles.prism[useDarkTheme ? 'dark' : 'light']}
           onKeyDown={this.handleEditorEvent}
           onKeyUp={this.handleEditorEvent}
           onClick={this.handleEditorEvent}

diff --git a/src/components/code-pane.test.js b/src/components/code-pane.test.js
@@ -4,7 +4,10 @@ import CodePane from './code-pane';
 
 describe('<CodePane />', () => {
   test('should render correctly.', () => {
-    const context = { styles: { components: { codePane: { pre: {} } } } };
+    const context = { styles: {
+      components: { codePane: {}, syntax: {} },
+      prism: { light: 'light;', dark: 'dark;' }
+    } };
     const source = `
       const myButton = (
         <CustomButton