Fix a11y dark embed (#1019)

* fix a11y-dark embed bug

Closes #1018

* extract global highlights into a component

components/Themes/GlobalHighlights.js

@@ -0,0 +1,75 @@
+// Theirs
+import React from 'react'
+
+export default function GlobalHighlights({ highlights }) {
+  return (
+    <style jsx global>
+      {`
+        :global(.CodeMirror__container .CodeMirror) {
+          color: ${highlights.text} !important;
+          background-color: ${highlights.background} !important;
+        }
+
+        :global(.cm-string),
+        :global(.cm-string-2) {
+          color: ${highlights.string} !important;
+        }
+        :global(.cm-comment) {
+          color: ${highlights.comment} !important;
+        }
+        :global(.cm-variable) {
+          color: ${highlights.variable} !important;
+        }
+        :global(.cm-variable-2) {
+          color: ${highlights.variable2 || highlights.variable} !important;
+        }
+        :global(.cm-variable-3) {
+          color: ${highlights.variable3 || highlights.variable} !important;
+        }
+        :global(.cm-number) {
+          color: ${highlights.number} !important;
+        }
+        :global(.cm-keyword) {
+          color: ${highlights.keyword} !important;
+        }
+        :global(.cm-property) {
+          color: ${highlights.property} !important;
+        }
+        :global(.cm-def) {
+          color: ${highlights.definition} !important;
+        }
+        :global(.cm-meta) {
+          color: ${highlights.meta} !important;
+        }
+        :global(.cm-operator) {
+          color: ${highlights.operator} !important;
+        }
+        :global(.cm-attribute) {
+          color: ${highlights.attribute} !important;
+        }
+
+        :global(.cm-s-dracula .CodeMirror-cursor) {
+          border-left: solid 2px #159588 !important;
+        }
+
+        :global(.cm-s-solarized) {
+          box-shadow: none !important;
+        }
+
+        :global(.cm-s-solarized.cm-s-light) {
+          text-shadow: #eee8d5 0 1px !important;
+        }
+
+        :global(.cm-s-solarized.cm-s-light .CodeMirror-linenumber),
+        :global(.cm-s-solarized.cm-s-light .CodeMirror-linenumbers) {
+          background-color: #fdf6e3 !important;
+        }
+
+        :global(.cm-s-solarized.cm-s-dark .CodeMirror-linenumber),
+        :global(.cm-s-solarized.cm-s-dark .CodeMirror-linenumbers) {
+          background-color: #002b36 !important;
+        }
+      `}
+    </style>
+  )
+}

components/Themes/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import dynamic from 'next/dynamic'
 
+import GlobalHighlights from './GlobalHighlights'
 import Dropdown from '../Dropdown'
 import { managePopout } from '../Popout'
 import ThemeIcon from '../svg/Theme'
@@ -124,76 +125,12 @@ class Themes extends React.PureComponent {
             onInputChange={e => this.setState({ name: e.target.value })}
           />
         )}
+        <GlobalHighlights highlights={highlights} />
         <style jsx>
           {`
             .themes {
               position: relative;
             }
-
-            :global(.CodeMirror__container .CodeMirror) {
-              color: ${highlights.text} !important;
-              background-color: ${highlights.background} !important;
-            }
-
-            :global(.cm-string),
-            :global(.cm-string-2) {
-              color: ${highlights.string} !important;
-            }
-            :global(.cm-comment) {
-              color: ${highlights.comment} !important;
-            }
-            :global(.cm-variable) {
-              color: ${highlights.variable} !important;
-            }
-            :global(.cm-variable-2) {
-              color: ${highlights.variable2 || highlights.variable} !important;
-            }
-            :global(.cm-variable-3) {
-              color: ${highlights.variable3 || highlights.variable} !important;
-            }
-            :global(.cm-number) {
-              color: ${highlights.number} !important;
-            }
-            :global(.cm-keyword) {
-              color: ${highlights.keyword} !important;
-            }
-            :global(.cm-property) {
-              color: ${highlights.property} !important;
-            }
-            :global(.cm-def) {
-              color: ${highlights.definition} !important;
-            }
-            :global(.cm-meta) {
-              color: ${highlights.meta} !important;
-            }
-            :global(.cm-operator) {
-              color: ${highlights.operator} !important;
-            }
-            :global(.cm-attribute) {
-              color: ${highlights.attribute} !important;
-            }
-
-            :global(.cm-s-dracula .CodeMirror-cursor) {
-              border-left: solid 2px #159588 !important;
-            }
-
-            :global(.cm-s-solarized) {
-              box-shadow: none !important;
-            }
-
-            :global(.cm-s-solarized.cm-s-light) {
-              text-shadow: #eee8d5 0 1px !important;
-            }
-
-            :global(.cm-s-solarized.cm-s-light .CodeMirror-linenumber),
-            :global(.cm-s-solarized.cm-s-light .CodeMirror-linenumbers) {
-              background-color: #fdf6e3 !important;
-            }
-
-            :global(.cm-s-solarized.cm-s-dark .CodeMirror-linenumber),
-            :global(.cm-s-solarized.cm-s-dark .CodeMirror-linenumbers) {
-              background-color: #002b36 !important;
-            }
           `}
         </style>
       </div>

pages/embed/index.js

@@ -8,7 +8,8 @@ import ApiContext from '../../components/ApiContext'
 import { StylesheetLink, CodeMirrorLink, MetaTags } from '../../components/Meta'
 import Font from '../../components/style/Font'
 import Carbon from '../../components/Carbon'
-import { DEFAULT_CODE, DEFAULT_SETTINGS } from '../../lib/constants'
+import GlobalHighlights from '../../components/Themes/GlobalHighlights'
+import { DEFAULT_CODE, DEFAULT_SETTINGS, THEMES_HASH } from '../../lib/constants'
 import { getRouteState } from '../../lib/routing'
 
 const Page = props => (
@@ -21,6 +22,9 @@ const Page = props => (
     <CodeMirrorLink />
     <Font />
     {props.children}
+    {props.theme === 'a11y-dark' && (
+      <GlobalHighlights highlights={THEMES_HASH[props.theme].highlights} />
+    )}
     <style jsx global>
       {`
         html,