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 CSS JS injector 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, then press F12 to open Inspect Element and click the mouse button in the top left corner of the panel. When you've clicked it, it will turn blue.

Next, hover over one of the code colours you want to change. In this example I'm hovering over a string in a python repl. Above it, Inspect Element tells me that it is a span.mtk5. This is important, as this is what we will use to tell the CSS that we want to change the colour of strings. If you hover over code that is in a different colour, you'll see they are all span.mtk with a number on the end.

Now click on the icon in the top-right corner. The first thing you want to do is check this box, which tells the extension we want to inject this CSS every time we visit a repl.it page:

Now type in the CSS box any CSS you want to inject into the page. To change the colour of a python string, for example, we type

span.mtk5{
    color: red;
}

This is because when we hovered over the python string earlier, Inspect Element told us it was a span.mtk5 (this means it's a span element, with class mtk5).
Finally, press "Save Style", and refresh the page. If everything has worked, you should see this:

You can now change the colours of different parts of the code, finding out which class they have using the same technique as before.

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:hover{
    color: blue;
}

• Animate the colours:

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

span.mtk5{
    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.mtk7 in dark theme, but when you switch to light theme they become span.mtk11.
Also, every time you make an edit to your CSS, you will need to re-check the "Apply for domain" box.

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!

Oh, and one final amazing thing about this tutorial: it doesn't just work on Repl.it! 😉