move and fix theme specific css (#649)

components/Carbon.js

@@ -171,29 +171,6 @@ class Carbon extends React.PureComponent {
               background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
             }
 
-            /* TODO move the theme specific styles out of this component */
-            .container :global(.cm-s-dracula .CodeMirror-cursor) {
-              border-left: solid 2px #159588;
-            }
-
-            .container :global(.cm-s-solarized) {
-              box-shadow: none;
-            }
-
-            .container :global(.cm-s-solarized.cm-s-light .CodeMirror-linenumber),
-            .container :global(.cm-s-solarized.cm-s-light .CodeMirror-linenumbers) {
-              background-color: #fdf6e3 !important;
-            }
-
-            .container :global(.cm-s-solarized.cm-s-dark .CodeMirror-linenumber),
-            .container :global(.cm-s-solarized.cm-s-dark .CodeMirror-linenumbers) {
-              background-color: #002b36 !important;
-            }
-
-            .container :global(.cm-s-solarized.cm-s-light) {
-              text-shadow: #eee8d5 0 1px;
-            }
-
             .container :global(.CodeMirror-gutters) {
               background-color: unset;
               border-right: none;

components/Themes/index.js

@@ -188,7 +188,7 @@ class Themes extends React.PureComponent {
               position: relative;
             }
 
-            :global(.react-codemirror2 .CodeMirror) {
+            :global(.CodeMirror__container .CodeMirror) {
               color: ${highlights.text} !important;
               background-color: ${highlights.background} !important;
             }
@@ -226,6 +226,28 @@ class Themes extends React.PureComponent {
             :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>