added dynamic theming

Author: therealadityashankar

README.md

@@ -34,14 +34,17 @@ Attributes
 - `src` - load an external source file
 - `style` - CSS styling (default `height:100%;width:100%;`)
 - `mode` - the language you want to use
+- `theme` - the codemirror theme you want to use
 - `viewport-margin`<sup>1</sup> - sets the `viewportMargin` option of the CodeMirrror editor instance (default `10`)
 - `readonly` - sets the codemirror's "readOnly" configuration attribute to true, you may set `readonly="nocursor"` if you want to disable the cursor and not let the user copy the text inside
 
 *<sup>1</sup>Setting `viewport-margin` to `infinity` will auto-resize the editor to its contents. To see this in action, check out the [CodeMirror Auto-Resize Demo](https://codemirror.net/demo/resize.html).*
 
 ### Basic Usage
 
-all language modes are dynamically loaded, and the css is dynamically loaded, you don't need to add any additional files for them 
+all language modes/themes are dynamically loaded, and the css is dynamically loaded, you don't need to add any additional files for them 
+
+**JavaScript example**
 
 ```html
   <script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-code/index.js"></script>
@@ -54,6 +57,8 @@ all language modes are dynamically loaded, and the css is dynamically loaded, yo
   </wc-code>
 ```
 
+**Python Example**
+
 ```html
   <script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-code/index.js"></script>
   <p>Python code example here</p>
@@ -65,3 +70,18 @@ all language modes are dynamically loaded, and the css is dynamically loaded, yo
     </script>
   </wc-code>
 ```
+
+**Theme Example**
+```html
+  <script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-code/index.js"></script>
+  <p>Python code example here</p>
+  <wc-code mode="python" theme="monokai">
+    <script type="wc-content">
+       a = 1
+       b = 5
+       print(a, b, a+b)
+    </script>
+  </wc-code>
+```
+
+see https://codemirror.net/theme/ for a list of supported themes

dev/index.html

@@ -9,7 +9,7 @@
   <h1>JavaScript</h1>
   <p>JavaScript code example here</p>
   <!-- web component examples go here -->
-  <wc-code mode="javascript">
+  <wc-code mode="javascript" theme="monokai">
     <script type="wc-content">
       const resp = await fetch("https://sv443.net/jokeapi/v2/joke/Any?blacklistFlags=nsfw,racist,sexist&format=txt");
       const text = await resp.text();