Reimplement theme fetching

README.md

@@ -8,7 +8,7 @@ Ships with all the features usually found in VS Code out of the box: things like
 
 In addition to these features, prettier has been integrated so that hitting `⌘ + s` will format the code.
 
-![monacode-demo](https://user-images.githubusercontent.com/1457604/100518413-40a88a80-3189-11eb-9f68-5269560aaf47.gif)
+<img width="100%" alt="monacode-demo" src="https://user-images.githubusercontent.com/1457604/100519495-1efed180-3190-11eb-9116-0bf1a619e08b.gif" />
 
 ## Usage
 
@@ -40,7 +40,7 @@ The module exports a single default function which accepts a config object as an
 - `value`: a string representing the initial code to be rendered within the editor
 - `language`: a string representing what language the editor should try syntax highlight and hint for
 - `fontSize`: a number indicating what pixel font size code should render at
-- `theme`: a string identifier of the desired theme (currently only default themes are supported)
+- `theme`: a string identifier of the desired theme or a url to a theme json file
 
 Calling the default export returns an instance of the underlying monaco editor. Find out more about how to interact with the editor by reading the [API documentation](https://microsoft.github.io/monaco-editor/api/index.html).
 

index.html

@@ -12,7 +12,7 @@
         const editor = module.default({
           container: document.body,
           value: `
-const values = { a: 1324568675432456, b: 8796574356789976543678, c: 2345678754435678754635, d: 123029 }
+const values = { a: "1324568675432456", b: 8796574356789976543678, c: [2345678754435678754635], d: true }
 
 const add = (x: number, y: number) => x + y;
 

index.js

@@ -65,13 +65,6 @@ const editorDefaults = {
   mouseWheelZoom: true,
 };
 
-// fetch('./theme.json')
-//   .then((res) => res.json())
-//   .then((data) => {
-//     monaco.editor.defineTheme('theme', data);
-//     monaco.editor.setTheme('theme');
-//   });
-
 export default (options) => {
   const { container, ...restOfOptions } = options;
 
@@ -80,6 +73,19 @@ export default (options) => {
     ...restOfOptions,
   });
 
+  // Import themes directly from the amazing collection by @brijeshb42
+  // https://raw.githubusercontent.com/brijeshb42/monaco-themes/master/themes
+
+  if (options.theme === 'vs-light') container.style.backgroundColor = '#fff';
+  if (options.theme?.startsWith('http') || options.theme?.startsWith('./'))
+    fetch(options.theme)
+      .then((res) => res.json())
+      .then((data) => {
+        monaco.editor.defineTheme('theme', data);
+        monaco.editor.setTheme('theme');
+        container.style.backgroundColor = data.colors['editor.background'];
+      });
+
   addEventListener('resize', function () {
     editor.layout();
   });