How to Make a Custom Code Theme for Repl.it
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.
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.
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:
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!
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
- Make things change colour when you hove over them e.g.
- Animate the colours:
**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
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.
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!
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?
@HarveyH oof sorry i've seen your comment 5 months late...
I believe the classes go from
.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.