Add More Theme Documentation (#2290) by teddinotteddy

* Create More Theme Documentation

* Update and rename Themes.md to THEMES.md

* Add Link to THEMES.md

* Update THEMES.md

* Better Readability for THEMES.md

* Add Image Highlighting what the Colors Correspond To

* Update THEMES.md

Co-authored-by: Jack <jack@monkeytype.com>

CONTRIBUTING.md

@@ -112,6 +112,8 @@ Before submitting a theme make sure...
 - your theme has been added to the `_list` file and the `textColor` property is the theme's main color
 - your theme is clear and readable with both `flip test colors` and `colorful mode` enabled and disabled
 
+(If you want to contribute themes but don't know how check [THEMES.md](https://github.com/teddinotteddy/monkeytype/blob/Theme-Documentation/THEMES.md)
+
 #### Language Guidelines
 
 - Do not include swear words

THEMES.md

@@ -0,0 +1,63 @@
+### **Table of Contents**
+
+- [Forking the Repository](#forking-the-repository)
+- [Creating Themes](#creating-themes)
+- [Commiting Themes](#commiting-themes)
+- [Theme Guidelines](#theme-guidelines)
+
+### Forking the Repository
+First you will have to copy the repository also known as forking. Go the the [Monkeytype Repo](https://github.com/Miodec/monkeytype/) and then click the "fork" button. 
+
+<img width="1552" alt="Screen Shot 2022-01-12 at 11 51 49 AM" src="https://user-images.githubusercontent.com/83455454/149194972-23343642-7a1f-4c0c-b5f2-36f4b39a2639.png">
+
+
+## Creating Themes
+After you have forked the repository you can now add your theme. (If you haven't already forked the repository yet refer to [here](#forking-the-repository))
+Create a file in ```./static/themes/```. Call it whatever you want but make sure that it is all lowercase and underscores for spaces. It should look something like this:
+```theme_name.css```.
+
+Then Add this code to your file:
+```
+:root {
+    --bg-color: #ffffff;
+    --main-color: #ffffff;
+    --caret-color: #ffffff;
+    --sub-color: #ffffff;
+    --text-color: #ffffff;
+    --error-color: #ffffff;
+    --error-extra-color: #ffffff;
+    --colorful-error-color: #ffffff;
+    --colorful-error-extra-color: #ffffff;
+  }
+```
+Here is an image showing what all the colors correspond to:
+<img width="1552" alt="Screen Shot 2022-01-12 at 12 01 11 PM" src="https://user-images.githubusercontent.com/83455454/149196967-abb69795-0d38-466b-a867-5aaa46452976.png">
+
+
+
+Now change the corresponding hex codes to match your theme. However you aren't done, you need to update one more file. Go to ```./static/themes/_list.json```.
+At the very end of the file add this code (Keep it inside the square brackets):
+```
+,{
+    "name": "theme_name",
+    "bgColor": "#ffffff",
+    "mainColor": "#ffffff"
+}
+```
+Make sure the name you put is lowercase and has underscores for spaces. Add the text color and background color of your theme to the varibles.
+
+### Commiting Themes
+Once you have created your theme(s) you now need to create a pull request on the main Monkeytype repository. Go to the branch where you created your themes on GitHub. 
+Then make sure your branch is up to date. Once it is up to date click contribute.
+
+Update branch:
+<img width="1552" alt="Screen Shot 2022-01-12 at 10 55 19 AM" src="https://user-images.githubusercontent.com/83455454/149186547-5b9fe4fd-b944-4eed-a959-db43f96198bf.png">
+
+Create pull request:
+<img width="1552" alt="Screen Shot 2022-01-12 at 10 56 42 AM" src="https://user-images.githubusercontent.com/83455454/149186637-66dae488-05ae-45c4-9217-65bc36c4927b.png">
+
+After that add some screenshots of your theme to the pull request. Click create pull request and if it gets approved 
+then your new theme is on Monkeytype.
+
+## Theme Guidelines
+[Theme guidelines](https://github.com/Miodec/monkeytype/blob/master/CONTRIBUTING.md#theme-guidelines)