Learn to Code via Tutorials on Repl.it!

← Back to all posts
Reflux Tutorial: Customize your IDE!
h
frissyn (360)

Customize your IDE with Reflux

Hey all, welcome to my official Reflux tutorial, where I explain how to use my tool to customize the look of your REPL's IDE in almost any way you want! Using CSS injections and Javascript bookmarklets you can create amazing looking themes like this!

Even though it's written in Python, it's simple enough for anyone to use, regardless of prior knowledge.

Getting Setup

First, we need to install Reflux. Here's an amazing table to help you find the right install command or instruction for you:

ManagerCommand
pippip install reflux
poetrypython -m poetry add reflux
easy_installeasy_install reflux
Repl.itSearch reflux in the package tab and add it.

Once you've installed Reflux, you're ready to start making themes!

Your First Theme

Let's create our first theme by importing reflux and initializing the Theme object:

import reflux

t = reflux.Theme({})

Really easy and simple, right? Now we need to declare our metadata. This will tell everyone who uses our theme who created it and give them a brief description of the theme. We'll also need to set whether our theme should be used over a dark layout or a light one.

import reflux

t = reflux.Theme({
	"name": "My Theme",
	"author": "Your Username",
	"description": "The best theme ever!",
	"default": "dark"
})

You can replace a few of those values with whatever you'd like, but let's stick to using dark as the default for the sake of this tutorial.

Changing Colors!

This is undoubtedly the best part of the process, changing the default colors! Reflux works by injecting CSS that overrides Replit's default variables using Javascript. Your job is to set values for those colors using the set_color or set_colors function! Take a look:

import reflux

t = reflux.Theme({
	"name": "My Theme",
	"author": "Your Username",
	"description": "The best theme ever!",
	"default": "dark"
})

t.set_colors({
	"primary-1": "#b98500",
	"primary-2": "#a57700",
	"primary-3": "#916900",
	"primary-4": "#7e5b00"
})

We're gonna recreate the Iris theme, which is based on a rare purple and yellow flower! The colors value for the variables can be any CSS3 attribute, from hex to rgba to hsl. It all works! You can find a complete index of the CSS color variables here.

Here are the values for the whole theme:

t.set_colors({
	"border": "#7b16f0",

	"control-1": "#461c6a",
	"control-2": "#3c185b",
	"control-3": "#32144b",

	"primary-1": "#b98500",
	"primary-2": "#a57700",
	"primary-3": "#916900",
	"primary-4": "#7e5b00",

	"background-1": "#280551",
	"background-2": "#1f043e",
	"background-3": "#16032c",
	"background-4": "#0d0219"
})

Now let's get to making our theme!

Building the Theme

Now that we've set our desired colors, we need to build the JS bookmarklet that will power our theme. It's as simple as calling the build function and passing a file path:

t.build("theme.min.js")

Add boom, we have our JS bookmarklet ready in the theme.min.js file!

Using the Theme

This part might change a little bit based on your browser depending on how bookmarks work, but it should still be a simple process:

  1. Copy the code from the theme.min.js file.
  2. Create a new bookmark in your browser.
  3. Name it Iris Theme
  4. Paste the code in the URL field.
  5. Hit Save or Create!

At the end of that you should have something that looks like this:

Once you've got the bookmarklet setup, boot up a REPL and click it! You'll be greeted with a magnificent alert box, confirming that you want to run the theme, and voila, your IDE looks so pretty now!

Wrapping up

I hope this explained how to use Reflux in a clean and concise way, hope you enjoy it! If you wanna see more check out these:

teehee
Comments
hotnewtop
Exidex1 (18)

Ah thats hot, Thats hot

AR199 (74)

This is amazing! Thank you so much!

thebakokid (0)

woah moderator making cool post owo

AndrewAung11 (14)

Really helpful. I was thinking that I could change repl's theme.
A big thanks to you!

This is a theme that I made

frissyn (360)

@AndrewAung11 looks good! Glad you enjoyed it :)

X24 (28)

This is really good :)

Whippingdot (567)

I like this and i want to keep it but I am using tapermonkey. If I disable tapermonkey then the theme works but the whole website is white. Can you make it so the theme is global?

Whippingdot (567)

nevermind it is global u just have to press the button all the time @Whippingdot

frissyn (360)

@Whippingdot I don't know if you're in the Repl.it Discord, but someone already wrote up a Tampermonkey script to keep Reflux themes alive, without having to click the bookmarklet every time. I'll comment it when I find it again :)

Whippingdot (567)

Please do comment that would be very helpful. Also I don't have discord 😭😭 @frissyn

CoolCoderSJ (507)

@Whippingdot

@frissyn that was me

i can make a tampermonkey for ur theme if u want...is it the full black one u submitted to marketplace?

Whippingdot (567)

ya. But you don't need to know as I am using an amino injector...and I am using the electron app so I have the theme anyway. Write it up if you can anyway, it would be useful. @CoolCoderSJ

Baconman321 (1059)

How does the boomarklet work (your project-wise)?

Does it iterate over each element and replace it with a style based off of the theme, or does it inject a CSS file that overrides the current colors?

frissyn (360)

@Baconman321 The python code iterates over each color element you set, and generates some CSS with !important attributes in it. Then that CSS is passed to the JS bookmarklet, which creates a new <style> node and inserts it into Repl.it's <head> when you run it.

There's a bit more that it does, but that's the basics.

Baconman321 (1059)

@frissyn Ah.

Yeah.

I'm assuming did a lot of repl editor code inspection?

I'm trying to make a hacker header background color changer but for some reason I can't get the hacker background which is frustrating... :(

LuckyOreos (200)

Awesome!!! Really cooooool

alanchen12 (28)

Noice, I can finally use themes on incognito :)