Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to Make a Custom Code Theme for Repl.it
h
minx28 (284)

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!

Commentshotnewtop
firefish (308)

I tried to chnge the font to something else monospace, and the cursor is suddenly in the wrong place. would there be a way to fix this?

YoBoiiFlo (0)

i made a background like the Shades Of Purple VSCode but one thing i noticed is that when i highlight something it doesnt change color so i dont know what im highlighting, how do i fix this?

CodingCactus (2807)

how do you change the editor background colour? I can't seem to do it?

DollarSign (22)

The Amino Extention can help with this, because it has an inspect element and a built in live cs injector, and I've made something like this for scratch.mit.edu, but it's an actual here

minx28 (284)

@DollarSign Thanks very much! I've updated the tutorial.

CodingCactus (2807)

hi, How do you do it with the new version of css js injector, I get this window:

minx28 (284)

@CodingCactus I do not use this anymore and I am not familiar with this new extension. However, from looking at it, I would guess that you just click out of it then reload the page.

CodingCactus (2807)

@minx28 ok, that doesn't seem to work, but doesn't matter

tiki720 (53)

Thanks for this, hopefully the team at repl.it will make this a feature

HarveyH (146)

I might actually use this! I've always liked the idea of custom themes on stuff!

Also, Is their a list of available colours to code?

minx28 (284)

@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.