diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index fc7adf568..8fe2e9ffa 100644 --- a/CONTRIBUTING.md +++ b/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 diff --git a/THEMES.md b/THEMES.md new file mode 100644 index 000000000..804957580 --- /dev/null +++ b/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. + +Screen Shot 2022-01-12 at 11 51 49 AM + + +## 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: +Screen Shot 2022-01-12 at 12 01 11 PM + + + +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: +Screen Shot 2022-01-12 at 10 55 19 AM + +Create pull request: +Screen Shot 2022-01-12 at 10 56 42 AM + +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)