From cfe76b54a967a76663f563ea7be3689967d0c78a Mon Sep 17 00:00:00 2001
From: lukejacksonn <lukejacksonn@gmail.com>
Date: Sat, 28 Nov 2020 16:09:20 +0000
Subject: [PATCH] Reimplement theme fetching

---
 README.md  |  4 ++--
 index.html |  2 +-
 index.js   | 20 +++++++++++++-------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index eff155e..4e1eb10 100644
--- a/README.md
+++ b/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).
 
diff --git a/index.html b/index.html
index 7760039..ca057a5 100644
--- a/index.html
+++ b/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;
 
diff --git a/index.js b/index.js
index 8be32c4..a347360 100644
--- a/index.js
+++ b/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();
   });