Product
How To Create Custom Terminal Themes with Warp-Themes.com
.png)
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.
- How To Create Your Own Warp Theme
- How To Import iTerm Color Schemes To Warp
- How To Synchronize Your VS Code Theme With Warp
- Closing Notes
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.
Pick your general colors - accent, background, and foreground.
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:.
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:
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:
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.
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!
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!
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.
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.
For HaXOR_BLUE, this is the link that was included on the site. When you open it up, it should look something like this:
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.
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.
After that, you can follow the steps in the previous section to download and get your theme in 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.
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.
Experience the power of Warp
- Write with an IDE-style editor
- Easily navigate through output
- Save commands to reuse later
- Ask Warp AI to explain or debug
- Customize keybindings and launch configs
- Pick from preloaded themes or design your own
