Jess Wang
August 31, 2022
10 minutes

How To Create Custom Terminal Themes with Warp-Themes.com

Warp-Themes is a web app built entirely by one of our community members, Torben Haack. In a nutshell, the tool allows you to visually customize your own terminal theme with a few simple color selections, then download that theme file and have Warp load it into its theme picker. In this article, we’ll be walking you through the step-by-step of how to create your own theme.  



Warp-Themes tool

How To Create Your Own Warp Theme

Navigate to Warp-Themes.com, and start by naming your theme and picking between light and dark mode. Warp theme definitions ask you to specify whether the theme is light mode or dark mode because it affects the way text is blended in the UI. Generally you should just pick based on whether the theme is a dark or light background.


Whatever you name the theme is what it will eventually be called in Warp's theme picker.


Pick your general colors - accent, background, and foreground.

Warp-Themes tool gives a good visualization of what these main 3 colors correspond to in the Warp terminal.


Why do you only need to pick 3 colors? When building a theme in Warp, users only have to specify 3 colors (background, foreground, accent) and we generate entire themes based on mixing them. If you want to learn more about how we designed and built themes in Warp, check out our post here.

Next, choose your other terminal colors. If you’re wondering what the difference between Normal and Bright is (a completely fair question), here’s how things play out across different theme colors:.

16 Standard ANSI colors


These 16 ANSI colors are the standard foundation for most themes, and we included them to ensure Warp could be compatible with open-source themes for other terminal emulators, like Alacritty. For the most part, the 3 colors you choose in the previous steps will do most of the work in customizing your theme, so you don’t need to touch these other color choices unless you want to get really specific (which we welcome).

Once you are satisfied with your theme, press the Download button on the top right of the window. After a few seconds, a panel will pop up:


There are two ways to install your Warp theme: an automatic installation by running the provided command, or manually.


If you’re curious about the what the command is installing, you can click the “Inspect Source” button to see what’s happening under that command’s colloquial hood: 

CODE: https://gist.github.com/theRubberDuckiee/9663ada5198437ddcf76f807c9fe247c.js


The section above line 41 outlines the Warp theme configuration, with all the custom color configurations that you selected in the previous steps.

The section below line 41 checks whether the Warp theme directory exists. If not, it creates it.  It also checks if the theme name of the theme you are downloading already exists. If it does, the script prompts you to delete the existing theme file before installing the new one. 

The error message includes a script you can run to delete the existing theme version that lives in your directory currently.


Finally, it creates the theme file and puts the contents of the section in blue into that file, which officially creates the theme in your Warp app. 

Once you’ve run the command successfully and downloaded the theme, restart your Warp app. To select the theme you just downloaded, press CTRL + CMD + T to open up the theme picker. Once there, you can search for the name of your customized theme or scroll through to find it. Then press the check mark to select it, and now you have a new theme in Warp!


Theme Picker pictures on the left sidebar, selecting the HaX0r_Blue theme I just downloaded.


Experimental Features


There are 2 experimental features we’d also like to bring your attention to. You can access them by “More” section on the top right of the site > Experimental Features. Experiment with caution!


Load iTerm Themes Into Warp

This extension allows you to load in a pre-created iTerm color file instead of having to create your own combination of colors for a Warp theme. 

If you already have a preferred theme in iTerm, press CMD + I to open the preferences panel > Colors > Color Presets > check what theme you’re currently using.


I am currently using the HaX0R_BLUE iTerm color scheme.


Since the experimental feature only takes in the URL for the color scheme as input, you will need to conduct an Internet search for the link to your theme. If you don’t already have a preferred iTerm theme, there are tons of fun open source iTerm themes on the web. Here are a few examples:

I really like a theme called HaXOR_BLUE, so we’ll run with that.

Screenshot of the HaX0R_BLUE iTerm theme


For HaXOR_BLUE, this is the link that was included on the site. When you open it up, it should look something like this:

XML file that represents all the colors used for the HaX0R_Blue color schema.



Note that iTerm themes are written in an XML file format, whereas Warp’s themes are written in a .yaml file format, which is why we need a tool like this to do the conversion. Paste the link into the iTerm Color Scheme panel on Warp-Themes.com.


Warp-Theme tool requires the link to the iTerm theme to import it in.



Once you click the download icon, the colors in your Warp-Themes.com sidebar should snap to the Ansi colors used in that particular Warp theme, and the theme name will update as well.


Unless you want to do any extra customization at this step, you can go ahead and press the "Download" button at this step.


After that, you can follow the steps in the previous section to download and get your theme in Warp. 


Synchronize Your VS Code Theme With Warp

The Warp-Companion VS Code extension  automatically synchronizes your VS Code theme with your Warp theme. For example, if you choose a dark-red Rust theme in VSCode, this extension will automatically create a theme named “Vs Code” in Warp that will show up in your theme picker. That way, your Warp terminal can conveniently also have a dark-red Rust theme. 

The step-by-step for installing and using this extension can be found in the README of the Github repo here.

Closing Notes

The entire project for warp-themes.com is open-source, so you can contribute by going to the Github repo here.

Though Warp does support gradients and background images, they’re not yet implemented on warp-themes.com . If you want to create a customized theme with a gradient or a background image, check out our open-source themes repository and our docs for customized themes. 

Tweet @torben_haack (or email hi@warp-themes.com) and @warpdotdev for requests, feedback, or updates on implementation.

Share

View More