Skip to content
← Back to Community
Use VS Code Themes on Repl.it!
Profile icon
h
has Hacker Plan
Scoder12

VS Code Themes on Repl.it

Hello guys, I figured out how to make repl.it use a custom color theme and wanted to share it with everyone!
I made a server in python that downloads the themes and a website that makes it super easy to install!

All you need to do is pick your favorite theme from the visual studio marketplace
and follow the instructions on the website. My favorite theme is EliverLara.Andromeda, specifically the italic variant.
What is yours? Share your favorite theme in the comments!

Set up a theme here: on the website

Finally...

If this gets a large enough response, it will be officially added to the site!
Reach out in the comments, twitter, or discord if you would like this!

Changelog

8/11 v0.2: Font styling (italic and underline) now works

Voters
Profile icon
ANDREWPARK21
Profile icon
Scoooolz
Profile icon
powerbox1000
Profile icon
cristiioan
Profile icon
writeblankspace
Profile icon
biswasxx08
Profile icon
Zavexeon
Profile icon
DungeonMaster00
Profile icon
ZainJ13
Profile icon
jarnocordenier
Comments
hotnewtop
Profile icon
ironblockhd

Really cool!

Profile icon
DavidShen2

Sounds great, but on a school issued device so can't install tampermonkey.

Profile icon
frostedbutton75

i can relate @DavidShen2

Profile icon
MarcusWeinberger

This is super neat! I like that theme you use, I might start using it myself

Profile icon
viraatvv

doesn't vs code mean visual studio code?

Profile icon
CodeLongAndPros
Profile icon
viraatvv
Profile icon
EpicGamer007

I wihs we didnt need to install tamper monkey :(

Profile icon
Scoder12

@AbhayBhat you can also paste the script into the console each time if its a problem

Profile icon
EpicGamer007

@Scoder12, i could but yea.. It would be pretty annoying,

hers an upvote for u

Profile icon
Scoder12

@AbhayBhat whats wrong with tampermonkey?

Profile icon
amasad

@AbhayBhat If people find it useful we might build into repl.it

Profile icon
EpicGamer007

@amasad, hmm that would be cool.., Everyone wants site-wide dark theme, I got darkreader(the extension) but the the editor looked really weird.

Profile icon
Scoder12

@AbhayBhat can you post a screenshot? I am trying to make it the best I can

Profile icon
EpicGamer007

@Scoder12, a screenshot of darkreader with repl?
here:

image

Profile icon
Scoder12
Profile icon
EpicGamer007

@Scoder12, oh ok, ill try that, thx

Profile icon
OlasChan

@Scoder12 what script do I have to paste in the console? I'd really like to use this function but unfortunately I can't install tampermonkey...

Profile icon
Scoder12

@OlasChan instead of installing from url, open that url and copy and paste into the console

Profile icon
OlasChan

@Scoder12 if you mean the userscript, I already did that but I think it didn't do anything. I'm really sorry if I don't understand well your explanation. Screenshot 2020-08-13 at 07.42.05

Profile icon
Scoder12

@OlasChan open a new tab and put that url, then copy and paste what you see on that page into the console

Profile icon
OlasChan

@Scoder12 when I press enter after putting the url nothing happens, I also tried to do the same thing in the repl.it website and still nothing. This is kinda strange.

Profile icon
Scoder12

@OlasChan weird, I downloaded the theme you wanted and put it on hastebin: https://hasteb.in/raw/ivobetaf.js copy and paste that into the console and it should work

Profile icon
OlasChan

@Scoder12 Thanks! It worked pretty well even though I didn't use Tampermonkey!

Profile icon
[deleted]

doesen't work anymore with the new tampermonkey update

Profile icon
Scoder12

@skybow Can you please share what errors you are seeing? It is working for me right now.

Profile icon
writeblankspace

Amazing concept, but it looks ugly with Dracula at Night theme

Profile icon
Scoder12

@jeanenchanted thanks for the compliment! Sadly, the themes do not look exactly the same as in VS Code. All I can suggest is that maybe a different theme would convert better.

Profile icon
[deleted]

hey, repl.it probably changed how this works once again. my theme seems to be welp, replitified

Profile icon
Scoder12

@skybow this seems to be caused by the domain name change to replit.com. I've updated the repl and it should work if you reinstall the userscript. (or, you can use the tampermonkey editor to add a line below the first // @match line with the following content // @match https://replit.com/@*/*)

Profile icon
[deleted]

this no longer works, kinda sad tbh

Profile icon
Scoder12

@skybow works for me for the andromeda extension but most others probably don't work. Still have to get around to parsing the package.json so it works for all extensions

Profile icon
[deleted]

@Scoder12 I tried it on atom one dark, it worked once but the second time it returned "this plugin crashed" with a plain red screen

Profile icon
RaidingShaman

not working with me
my userscript: [email protected]: OneDark

Profile icon
Scoder12

@RaidingShaman What exactly is not working for you?

Profile icon
RaidingShaman

@Scoder12 I have done all correctly, and tampermonkey also shows that its enabled but themes do not chnage.

Profile icon
Scoder12

@RaidingShaman can you open the console and send me a screenshot of what's there? My guess is either theres an error in the console or the theme is really similar to replit default theme

Profile icon
RaidingShaman

@Scoder12
needyy

Here it is...

Profile icon
Scoder12

@RaidingShaman hmmm, seems that replit changed their permission layout. I just pushed a fix, delete the userscript and try again

Profile icon
RaidingShaman

@Scoder12 Now it shows the following error:
need
Ignore the error realted to cburstml as that is of another thing.

Profile icon
Scoder12

@RaidingShaman Oops, I missed a bracket 🤦 should be fixed now

Profile icon
systemctl

It would bee cool if you could add the theme straight to repl.it without having to install browser extensions and have a way to have the theme carry out across repl.it from device to device besides for those of us who use a school issued device because either are parents wont let us get are own or cant afford them we cant install adding as it is usually restricted by the school and against school policy to bypass those restrictions so please repl.it devs @amasad anyone who sees this i am begging you please find a way so we don't have to install addons

Profile icon
NeilScienceguy1

@Scoder12 when i enter my theme it keeps on loading while saying that 'Loading theme list, please wait'. Is there a way i can fix this?

Profile icon
Scoder12

@NeilScienceguy1 sorry it still doesn't parse the extension properly and is hardcoded to look in the themes/ folder

Profile icon
NeilScienceguy1

@Scoder12 can you tell me some themes that are in the themes/ folder?

Profile icon
NeilScienceguy1

also does the theme change the syntax theme as well?

Profile icon
almostStatic

It seems to end my REPL..
"The IDE is having a bit of trouble!" whilst installing user script https://vs-code-themes-userscript.scoder12.repl.co/replitTheme_akamud.vscode-theme-onedark_2.2.2_OneDark.user.js

Profile icon
Scoder12

@almostStatic not an issue with the script...

Profile icon
almostStatic

@Scoder12 When I disable the script (or view other repls with the same tampermonkey script on), it does not work and shows replit's default theme.

Profile icon
hunterindri

goog job

Profile icon
PythonSwarit

I can't find the instructions?!

Profile icon
ARJPEG

Amazing!!

Profile icon
ARJPEG

How do I add to it?

Profile icon
potatojs

i want to see that build into repl.it NOW

plz :P
Profile icon
DynamicSquid

Sweet!

Profile icon
johnnyfrancis

Not working form me.

Profile icon
Scoder12

@johnnyfrancis what is the issue?

Profile icon
johnnyfrancis

@Scoder12 It ends the repl when I first run it. Think it might be something with my browser?

Profile icon
Scoder12

@johnnyfrancis what do you mean by "end"? Can you open the console (ctrl+shift+j) and tell me if there are any errors there?

Profile icon
johnnyfrancis

@Scoder12 Actually I think it was something with my browser because when I switched it to crome it worked. And not that I can see it it is actually pretty cool!

Profile icon
[deleted]

Really neat!

Profile icon
Scoder12
Profile icon
Highwayman

YES!!!

Is that big enough? XP

Profile icon
AnitaFard

Hey, guys I just made a game! Pls, play it! Its called Guess the animal game!

Profile icon
amasad

@AnitaFard Why don't you post it? Click share then post from your repl to post here.