Skip to content
Sign upLog in
← Back to Community

Reflux Tutorial: Customize your IDE!

Profile icon
frissynHacker

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!

iris

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:
image

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!

iris

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
Voters
Profile icon
DexieTheSheep
Profile icon
cdCreepArghhh
Profile icon
Yoplayer1py
Profile icon
focat
Profile icon
mordyman
Profile icon
ANDREWVOSS
Profile icon
AR199
Profile icon
jachands
Profile icon
IntellectualGuy
Profile icon
CoolCoderSJ
Comments
hotnewtop
Profile icon
Exidex1

Ah thats hot, Thats hot

Profile icon
DexieTheSheep

I hope you know what Reflux means, haha

Profile icon
lukel_lv

It isn't working for me. I don't get the theme.min.js file. Help?

Profile icon
frissyn

@lukel_lv This tutorial is actually really outdated! You can check out the updated Reflux here. I have a new tutorial coming soon, sorry for the trouble.

Profile icon
lukel_lv

@frissyn
I dont have Github... What do I do?

Profile icon
lukel_lv

@frissyn
I dont have github

Profile icon
frissyn

@lukel_lv You don't need to have a GitHub account to view the repository

Profile icon
ANDREWVOSS

Is there a way to change the colors in the actual text area of the editor?

Profile icon
frissyn

@ANDREWVOSS
Not right now sorry!

Profile icon
ANDREWVOSS

@frissyn
Oh well, this project is still really good.

Profile icon
AR199

This is amazing! Thank you so much!

Profile icon
cannonthepom123

this is so cool
Screenshot 2021-04-14 2.26.03 PM


Screenshot 2021-04-14 2.24.09 PM

Screenshot 2021-04-14 2.23.33 PM

Screenshot 2021-04-14 2.22.58 PM

Profile icon
frissyn

@cannonthepom123
Thanks, those themes look nice!

Profile icon
cannonthepom123

@frissyn
thx

Profile icon
thebakokid

woah moderator making cool post owo

Profile icon
AndrewAung11

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

This is a theme that I made
image

Profile icon
frissyn

@AndrewAung11
looks good! Glad you enjoyed it :)

Profile icon
X24

This is really good :)

Profile icon
Whippingdot

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?

Profile icon
Whippingdot

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

@Whippingdot

Profile icon
frissyn

@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 :)

Profile icon
Whippingdot

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

@frissyn

Profile icon
CoolCoderSJ

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

Profile icon
Whippingdot

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

Profile icon
Baconman321

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?

Profile icon
frissyn

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

Profile icon
Baconman321

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

Profile icon
frissyn

@Baconman321
:(

Profile icon
LuckyOreos

Awesome!!! Really cooooool

Profile icon
alanchen12

Noice, I can finally use themes on incognito :)

Profile icon
TsunamiOrSumth

woaw