Reflux Tutorial: Customize your IDE!
Customize your IDE with Reflux
Even though it's written in Python, it's simple enough for anyone to use, regardless of prior knowledge.
First, we need to install Reflux. Here's an amazing table to help you find the right install command or instruction for you:
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
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
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.
set_colors function! Take a look:
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
hsl. It all works! You can find a complete index of the CSS color variables here.
Here are the values for the whole theme:
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:
Add boom, we have our JS bookmarklet ready in the
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:
- Copy the code from the
- Create a new bookmark in your browser.
- Name it
- Paste the code in the URL field.
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!
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:
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?
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?
@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.