monkeytype/THEMES.md
Teddi 3a9e77a732
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>
2022-01-12 20:57:39 +01:00

2.8 KiB

Table of Contents

Forking the Repository

First you will have to copy the repository also known as forking. Go the the Monkeytype Repo 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) 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