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.
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! 😉
@HarveyH oof sorry i've seen your comment 5 months late... I believe the classes go from .mtk1 to .mtk31, but no language uses all 31 styles. It really depends on the language you're using. Just type all the different "parts" of code you can think of (eg "hello world" 3 True print []) and colour each one how you want it. HTML, for example, uses some of the same classes but also some different classes to python, which is what the custom theme I use is designed for.
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 allspan.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
This is because when we hovered over the python string earlier, Inspect Element told us it was a

span.mtk5
(this means it's aspan
element, with classmtk5
).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
font-style: italic;
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 becomespan.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! 😉
@HarveyH oof sorry i've seen your comment 5 months late...
I believe the classes go from
.mtk1
to.mtk31
, but no language uses all 31 styles. It really depends on the language you're using. Just type all the different "parts" of code you can think of (eg"hello world" 3 True print []
) and colour each one how you want it. HTML, for example, uses some of the same classes but also some different classes to python, which is what the custom theme I use is designed for.