Creating Custom Themes for IntelliJ Platform IDEs

Posted on by Yann Cébron

Beginning with the 2019.1 release, Custom UI Themes can be provided by 3rd party authors to customize the whole Look and Feel of the IDE.

customtheme

Customization is done by packaging a Theme descriptor file (JSON format) as a plugin. Most themes will change the colors of the UI, but replacing icons, changing the appearance of borders, and bundling editor schemes are also possible. By the way, the bundled “ High contrast” theme uses the same mechanism.

After uploading the Custom UI Theme plugin to the JetBrains Plugin Repository (plugins.jetbrains.com), it can easily be installed right from the IDE’s plugin manager and activated via Preferences | Appearance & Behavior | Appearance “Theme” combo box.

darktheme

Get started today by following the detailed tutorial we’ve added to the IntelliJ Platform SDK docs that will walk you through the process of creating a custom Theme. As a reference, you can also take peek at the provided sample Theme plugin.

Comments below can no longer be edited.

20 Responses to Creating Custom Themes for IntelliJ Platform IDEs

  1. Brighten up Your Day – Add Color to IntelliJ IDEA! | IntelliJ IDEA Blog says:

    March 14, 2019

    […] Blog post about creating custom themes for IntelliJ Platform: link. […]

  2. Tom Fagerland says:

    March 15, 2019

    Expecting Solarized Dark theme within the end of the weekend. If not, I’ll have to create it myself 😉

  3. Tyler Thrailkill says:

    March 16, 2019

    How do you change the color of ‘Test editor tabs’. For a regular Editor Tab it’s simply

    
        "EditorTabs": {
          "active": {
            "foreground": "#839496",
            "background": "#073642",
            "underlineColor": "#93a1a1"
          },
          "inactive.maskColor": "#073642FF"
        },
    

    But this has no effect on tabs that are highlighted green due to being a test resource. Looking over the element using LAF Defaults and UI Dropper, I don’t see any difference between a ‘test’ tab and a ‘regular’ tab.

    Also, @Tom Fagerland, I’m on it 😉

    • Olga Berdnikova says:

      March 18, 2019

      The test editor tabs color is another setting. It is managed with the “File Colors” feature. There is a UI for that: open the Settings / Preferences dialog, go to “Preferences | Appearance & Behavior | File Colors”. Here the two default scopes are preassigned with colors: non-project files are yellow, tests are green.

      The default scopes are created automatically. The green and yellow colors are also default. But pleople can change them to other colors. There are 6 predefined file colors — doulbe-click the color in the settings and you’ll see a dialog where to change that.

      File colors are also used not only in the editor tabs but also in the Project tool window, Search Everywhere popup and some other places where files appear.

      See more on that in https://www.jetbrains.com/help/idea/settings-file-colors.html

      To change File Colors in a color theme plugin, use these keys:

      “FileColor”: {
      “Yellow”: “#45243b”,
      “Green”: “#213d37”,
      “Blue”: “#1f3557”,
      “Violet”: “#2a2754”,
      “Orange”: “#402e23”,
      “Rose”: “#4a2d59”
      }

  4. Jonathan Channon says:

    March 20, 2019

    Will people be able to see a preview of what the themes look like when the author uploads them?

    • Yann Cébron says:

      April 9, 2019

      We recommend that theme authors provide a number of screenshots, so users can see the theme “in action” upfront without installing.

  5. Rick Yentzer says:

    March 25, 2019

    Can’t wait for this feature to be available on all of Jetbrains IDE’s!

    • Yann Cébron says:

      April 9, 2019

      It is available on all IntelliJ-Platform based IDEs starting with their corresponding 2019.1 release.

  6. bvat says:

    March 28, 2019

    Holy crap, that purple is amazing! https://i.imgur.com/Qy9Cw58.jpg

  7. Steven Sacks says:

    May 7, 2019

    I’m using Webstorm 2019.1.1 and there is no option in the New Project for a plugin project as outlined here in the documentation:

    http://www.jetbrains.org/intellij/sdk/docs/basics/getting_started/creating_plugin_project.html

    • Yann Cébron says:

      May 7, 2019

      You must use IntelliJ IDEA Community or Ultimate Edition

  8. Max Wright says:

    May 11, 2019

    Is it possible to have a live preview while creating the theme ?
    It’s REALLY boring to start a new Intellij instance every time.

    • Yann Cébron says:

      May 13, 2019

      Yes, there’s a “Preview” button on top of the theme.json file to preview the theme in current development IDE.

      • Max Wright says:

        May 13, 2019

        I should open my eyes next time O_O

        Thanks 🙂

  9. David Petrla says:

    May 30, 2019

    Is it possible to have two or more instances of IDEA running simultaneously with different themes?

    I work on multiple projects and this would accelerate my orientation and concentration when switching between them.

  10. Yacine Mhd says:

    June 27, 2019

    is it possible to create a theme with a glowing effect, similar to this vscode theme https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

    • Dawid Szadurski says:

      November 5, 2019

      I was looking for and answer… but not good results. I will love to get this neon effect in my Intellij. I pin myself to this question as well! Very good idea to get this done!

Subscribe

Subscribe for updates