Hello! I’m unsure if anyone is going to actually see this, since this project is a 1 star and 0 watch. 🍭 Either way, this page is going to slowly become unmaintained and deprecated. I’ve made this decision when I learned that Reflux was too becoming unmaintained. If Replit changes their theming system drastically, I may pick up this project again. Either way, I plan on archiving this project around April 2022.

I hope somebody found this useful 🙂

~BD103

Making Replit themes can be a tedious task, requiring you to search through source code and copy/paste a lot.

This guide intends to make your life easier by showing you the tools necessary to make theming easier. Let’s get started with a brief rundown.

How does theming work?

Customizing a Replit theme is as simple as editing custom properties/variables. Let’s take a look at the default properties for the Replit dark theme.

.replit-ui-theme-root.dark {
  --background-root: #0e1525;
  --background-default: #1c2333;
  --background-higher: #2b3245;
  --background-highest: #3c445c;
  --background-overlay: #0e1525a0;
  --foreground-default: #f5f9fc;
  --foreground-dimmer: #c2c8cc;
  --foreground-dimmest: #9da2a6;
  --outline-default: #70788c;
  --outline-default-25: #70788c40;
  --outline-dimmer: #5f677a;
  --outline-dimmest: #4e5569;
  --accent-primary-strongest: #c7e9ff;
  --accent-primary-stronger: #85ceff;
  -webkit---accent-primary-default: #0099ff;
  --accent-primary-default: #0099ff;
  --accent-primary-dimmer: #0072bd;
  -webkit---accent-primary-dimmest: #004d80;
  --accent-primary-dimmest: #004d80;
  --accent-positive-strongest: #bfffca;
  --accent-positive-stronger: #96ffa8;
  --accent-positive-default: #2fc448;
  -webkit---accent-positive-dimmer: #0f7a21;
  --accent-positive-dimmer: #0f7a21;
  --accent-positive-dimmest: #0c4516;
  --accent-negative-strongest: #ffbfbf;
  --accent-negative-stronger: #ff8585;
  --accent-negative-default: #f23f3f;
  -webkit---accent-negative-dimmer: #8f2828;
  --accent-negative-dimmer: #8f2828;
  --accent-negative-dimmest: #573a3a;
  --accent-red-dimmest: #6e0000;
  --accent-red-dimmer: #a60000;
  --accent-red-default: #e50000;
  --accent-red-stronger: #ff8585;
  --accent-red-strongest: #ffc7c7;
  --accent-orange-dimmest: #753b00;
  --accent-orange-dimmer: #9c4e00;
  --accent-orange-default: #d96d00;
  -webkit---accent-orange-stronger: #ffc285;
  --accent-orange-stronger: #ffc285;
  --accent-orange-strongest: #ffd9b2;
  --accent-yellow-dimmest: #756200;
  --accent-yellow-dimmer: #a68a00;
  --accent-yellow-default: #ccad14;
  -webkit---accent-yellow-stronger: #ffea7f;
  --accent-yellow-stronger: #ffea7f;
  --accent-yellow-strongest: #fff2b2;
  --accent-green-dimmest: #00540e;
  --accent-green-dimmer: #007814;
  --accent-green-default: #36b24a;
  --accent-green-stronger: #66ff7f;
  -webkit---accent-green-strongest: #b2ffbf;
  --accent-green-strongest: #b2ffbf;
  --accent-teal-dimmest: #005b6e;
  --accent-teal-dimmer: #007f99;
  --accent-teal-default: #3db4cc;
  --accent-teal-stronger: #7feaff;
  --accent-teal-strongest: #bff4ff;
  --accent-blue-dimmest: #004d99;
  --accent-blue-dimmer: #005ebd;
  --accent-blue-default: #2e8ae5;
  --accent-blue-stronger: #7fbfff;
  --accent-blue-strongest: #b2d9ff;
  -webkit---accent-blurple-dimmest: #422f9e;
  --accent-blurple-dimmest: #422f9e;
  --accent-blurple-dimmer: #563cd6;
  -webkit---accent-blurple-default: #7559ff;
  --accent-blurple-default: #7559ff;
  --accent-blurple-stronger: #a18fff;
  --accent-blurple-strongest: #cec4ff;
  --accent-purple-dimmest: #6c32a6;
  --accent-purple-dimmer: #9140e3;
  --accent-purple-default: #a64dff;
  -webkit---accent-purple-stronger: #c78fff;
  --accent-purple-stronger: #c78fff;
  --accent-purple-strongest: #e2c4ff;
  -webkit---accent-magenta-dimmest: #802680;
  --accent-magenta-dimmest: #802680;
  --accent-magenta-dimmer: #b031b0;
  -webkit---accent-magenta-default: #e55ae5;
  --accent-magenta-default: #e55ae5;
  --accent-magenta-stronger: #ff8aff;
  --accent-magenta-strongest: #ffc2ff;
  --accent-pink-dimmest: #802662;
  --accent-pink-dimmer: #b03186;
  --accent-pink-default: #e545b0;
  --accent-pink-stronger: #ff8ad8;
  --accent-pink-strongest: #ffc2eb;
  --accent-grey-dimmest: #595959;
  --accent-grey-dimmer: #666666;
  --accent-grey-default: #808080;
  --accent-grey-stronger: #999999;
  --accent-grey-strongest: #bfbfbf;
}

All theme CSS is contained inside the .replit-ui-theme-root class, which simulates :root.

By adding or editing the class of this item, you change change the theme. There are three known themes: light, dark, and spooky.

We will be changing these themes by injecting our own CSS variables with bookmarklets.