Making a Custom Code Theme for Repl.it

This tutorial will teach you how to write some basic CSS to change the colours of your code and how to have it automatically injected into repls.

This tutorial only explains for Chrome, but the concepts are fairly similar in other browsers, it's simply a matter of finding an add-on/plugin that does the same job.

Step 1

Installing the extension

You'll have to do this step differently if you're using a browser other than Chrome

Firstly, go to Chrome's extensions page

Then, click the menu button in the top left corner and click "Open Chrome Web Store" at the bottom. Search Amino and click "Add to Chrome" on this result (it should be the first option).

You should then see this icon appear to the right of your adress bar.

Step 2

Writing the CSS

Again, this will be a bit different depending on which browser you are using.

Open any repl. Write some nonsense code which contains all of the colours you want to change. Click on the Amino icon in the top-right corner, then click the "Inspect Elements" button.

Next, hover over one of the sections of code you want to change the colour of. You'll see that Amino tells you what class it is, for example sapan.mtk5.string. Click to copy the CSS selector.
Now, go back to the Amino popup. Click the button at the top that says Domain, instead of selecting Page. Now, simply paste in the selector you copied, then add some CSS, for example:

span.mtk5.string{
    color: #4f9 !important;
}

Make sure you include the !important, otherwise Repl.it's default styling will override your custom styles. Now, simply click save, and your code will change colour!

Step 3

Next Steps

Here are some more tweaks you could make to Repl.it's Monaco editor using these techniques

• Change the styles of other parts of the editor, e.g. change the background colour
• Give code other styles: as well as changing the colours of the different classes, you can also (for example) make comments italic by finding out their class using the technique described earlier and putting font-style: italic;
• Make things change colour when you hove over them e.g.

span.mtk5.string:hover{
    color: blue;
}

• Animate the colours:

@keyframes red-green-blue{
    0%,100%{color: red;}
    33%{color:green;}
    67%{color:blue;}
}

span.mtk5.string{
    animation: red-green-blue 5s infinite;
}

**Watch out: when you switch Repl.it from dark theme to light theme, the class names change! For example, python single-line comments are span.mtk8 in dark theme, but when you switch to light theme they become span.mtk12.

Here's one I made earlier!

You'll notice I've changed the background of the editor to black, and I've made comments italic, as well as changing up the colours.

Step 4

Improving the looks of your new theme

This step is very easy - all you have to do is upvote this post. It has been scientifically proven that if you upvote this post, your tweaks will automatically look cooler.
Plus, you will receive vee freebucks.

Hope you enjoyed this post - let me know what cool custom themes you make!