TIL: Recolor the JetBrains IDE chrome with a no-code plugin

 ·  3 min read
 · 

JetBrains IDEs let you set an exact background color for the editor, but not for everything around it. The chrome — tool windows, tabs, toolbars, the project tree — just follows the overall theme; there’s no color picker for it. I wanted my IDE background at a specific #181b22, and the only lever for that is a custom UI theme. The catch: a UI theme can only load from a plugin. The TIL is that the plugin has no code — it’s three declarative files you zip up and install from disk.

The manifest, META-INF/plugin.xml. It only points at the theme JSON. There’s no Java or Kotlin, and nothing to compile:

<idea-plugin>
  <id>ai.connectly.theme.dark181b22</id>
  <name>Dark 181b22</name>
  <version>1.0.4</version>
  <vendor>Oliver</vendor>
  <description><![CDATA[
    Dark UI theme based on the default Dark theme, with the IDE chrome
    background recolored to #181b22. Editor inherits the stock Darcula scheme.
  ]]></description>

  <!-- Broad compatibility; declarative theme plugins need no code. -->
  <idea-version since-build="203"/>
  <depends>com.intellij.modules.platform</depends>

  <extensions defaultExtensionNs="com.intellij">
    <themeProvider id="3d2c98ce-5d61-4076-8f56-2cfa50649ad2"
                   path="/Dark181b22.theme.json"/>
  </extensions>
</idea-plugin>

The theme, Dark181b22.theme.json. "dark": true inherits the dark look-and-feel, then you override only what you want. Colors are named once and reused. The "*" wildcard sets background/foreground on every component — but it only matches those exact property names, so selectionBackground, Button.startBackground and friends keep their own values, which is why selections and buttons stay readable:

{
  "name": "Dark 181b22",
  "dark": true,
  "author": "Oliver",
  "editorScheme": "/Dark181b22.xml",
  "colors": {
    "bg": "#181b22",
    "bar": "#13161c",
    "input": "#1e222b",
    "accent": "#3574F0",
    "fg": "#E6E8EE",
    "tabActive": "#000000",
    "selInactive": "#363f52",
    "header": "#14171e"
  },
  "ui": {
    "*": {
      "background": "bg",
      "foreground": "fg"
    },
    "Tree.background": "bg",
    "List.background": "bg",
    "Table.background": "bg",
    "Viewport.background": "bg",
    "Panel.background": "bg",
    "ToolWindow.background": "bg",

    "Tree.selectionForeground": "fg",
    "Tree.selectionInactiveForeground": "fg",
    "Tree.selectionInactiveBackground": "selInactive",
    "List.selectionForeground": "fg",
    "List.selectionInactiveForeground": "fg",
    "List.selectionInactiveBackground": "selInactive",

    "EditorTabs.background": "bar",
    "EditorTabs.underlinedTabBackground": "tabActive",
    "DefaultTabs.background": "bar",
    "DefaultTabs.underlinedTabBackground": "tabActive",
    "MainToolbar.background": "bar",
    "NavBar.background": "bar",
    "StatusBar.background": "bar",
    "MenuBar.background": "bar",
    "ToolWindow.Header.background": "header",
    "ToolWindow.Header.inactiveBackground": "header",
    "ToolWindow.HeaderTab.background": "header",

    "TextField.background": "input",
    "TextArea.background": "input",
    "ComboBox.background": "input",
    "SearchEverywhere.SearchField.background": "input",
    "Popup.background": "input",

    "Button.default.startBackground": "accent",
    "Button.default.endBackground": "accent",
    "Button.default.foreground": "#FFFFFF",
    "Button.default.focusedBorderColor": "accent",
    "Button.default.focusColor": "#3574F055"
  }
}

The rest is targeted keys: a darker bar for the structural bars, near-black tabActive for the active tab, a slightly-darker-than-background header for tool-window headers, lighter text plus a brighter fill for the inactive tree selection, and the New UI accent blue for the default button.

The editor scheme, Dark181b22.xml. A theme JSON requires an editorScheme, but I don’t want to touch the editor. Making it an empty child of Darcula leaves the editor exactly as stock:

<scheme name="Dark181b22" version="142" parent_scheme="Darcula">
</scheme>

Build it. The “plugin” is just a zip with a .jar extension:

#!/usr/bin/env bash
set -euo pipefail
cd "$(dirname "$0")"

OUT="Dark181b22-theme.jar"
SRC=(META-INF Dark181b22.theme.json Dark181b22.xml)

rm -f "$OUT"
zip -rq "$OUT" "${SRC[@]}"

Install via Settings → Plugins → ⚙ → Install Plugin from Disk, pick the jar, restart, then choose Dark 181b22 under Appearance & Behavior → Appearance → Theme.

One gotcha: bump <version> in plugin.xml on every rebuild. Reinstall the same version and the IDE decides nothing changed and keeps the old one.

Download Dark181b22-theme.jar — built from the files above; install from disk.

This only touches the chrome. Per-file tints (like the green on _test.go files) come from a separate File Colors setting, not the theme. The full key reference is in the JetBrains theme docs.

Let's stay connected!

If you like the post, subscribe to my newsletter to get latest updates:

Author

I'm Oliver Nguyen. A software maker working mostly in Go and JavaScript. I enjoy learning and seeing a better version of myself each day. Occasionally spin off new open source projects. Share knowledge and thoughts during my journey.

Back