Theme fixes & added 2 new themes (codesandbox#972)

Theme fixes:
- ~~use [strip-json-comments](https://www.npmjs.com/package/strip-json-comments) to... well, strip JSON comments 😃~~
- also strip comments when loading theme from an URL

Themes added:
- Solarized Light
- Cobalt 2

Author: lbogdan

packages/app/src/app/pages/Sandbox/Editor/index.js

@@ -43,9 +43,13 @@ class ContentSplit extends React.Component {
     const newThemeName = this.props.store.preferences.settings.editorTheme;
     const customVSCodeTheme = this.props.store.preferences.settings
       .customVSCodeTheme;
-    const theme = await getVSCodeTheme(newThemeName, customVSCodeTheme);
 
-    this.setState({ theme, editorTheme: newThemeName, customVSCodeTheme });
+    try {
+      const theme = await getVSCodeTheme(newThemeName, customVSCodeTheme);
+      this.setState({ theme, editorTheme: newThemeName, customVSCodeTheme });
+    } catch (e) {
+      console.error(e);
+    }
   };
 
   render() {

packages/app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme.js

@@ -30,6 +30,12 @@ const vsDark = {
   [editorSelectionHighlight]: '#ADD6FF26',
 };
 
+// parses theme, uncommenting commented colors
+// and using json5 to strip comments
+function parseTheme(theme) {
+  return JSON.parse(theme.replace('/^s*//"', '"'));
+}
+
 function fetchTheme(foundTheme) {
   if (!foundTheme) {
     return codesandbox;
@@ -43,13 +49,31 @@ function fetchTheme(foundTheme) {
     return foundTheme.get();
   }
 
-  return window.fetch(foundTheme.url).then(x => x.json());
+  return window
+    .fetch(foundTheme.url)
+    .then(x => x.text())
+    .then(text => {
+      let theme;
+      try {
+        theme = parseTheme(text);
+      } catch (e) {
+        console.error(e);
+
+        if (window.showNotification) {
+          window.showNotification(
+            'We had trouble loading the theme, error: \n' + e.message,
+            'error'
+          );
+        }
+      }
+      return theme;
+    });
 }
 
 const findTheme = async (themeName, customTheme) => {
   if (customTheme) {
     try {
-      return JSON.parse(customTheme.replace(/^\s*\/\/"/gm, ''));
+      return parseTheme(customTheme);
     } catch (e) {
       console.error(e);
 

packages/common/themes/index.js

@@ -30,6 +30,12 @@ export default [
     id: 'highContrast',
     get: () => import('./high-contrast'),
   },
+  {
+    name: 'Cobalt 2',
+    id: 'cobalt2',
+    url:
+      'https://cdn.rawgit.com/wesbos/cobalt2-vscode/master/theme/cobalt2.json',
+  },
   {
     name: 'VSCode Light',
     id: 'vscodeLight',
@@ -41,4 +47,10 @@ export default [
     url:
       'https://cdn.rawgit.com/akamud/vscode-theme-onelight/master/themes/OneLight.json',
   },
+  {
+    name: 'Solarized Light',
+    id: 'solarizedLight',
+    url:
+      'https://raw.githubusercontent.com/Microsoft/vscode/d2b6bbb46fbdf535e2c96b3e00ac56ac1d427a69/extensions/theme-solarized-light/themes/solarized-light-color-theme.json',
+  },
 ];