Roman

Posted on Mar 27

I couldn't find an Ayu Mirage theme for JetBrains — so I built an aesthetic engine instead

#showdev #jetbrains #ide #productivity

It started with a simple problem: I wanted Ayu Mirage in my JetBrains IDE, and it didn't exist.

There were plenty of Ayu Dark ports floating around. I'd seen an Ayu Light somewhere. But Mirage — that warm blue-gray variant that just feels right — was nowhere. There was a repo at some point, but the author either deleted or archived it. The demand was there (at least mine was), but the supply? Gone.

So I did what any reasonable developer does when they can't find what they want. I opened an XML file and started mapping colors.

The Frankenstein phase

The first version was embarrassingly simple. Just an editor color scheme — no UI colors at all. I pulled the syntax tokens from the official Ayu VS Code theme and tried to recreate them in JetBrains' XML format.

For the IDE interface itself, I found a plugin called Godot Theme on the Marketplace. Its colors reminded me of the Mirage palette — close enough not to clash. So that became my daily setup: Godot Theme for the UI, my hand-made XML for the editor.

A Frankenstein. But it worked.

When Islands UI changed everything

Then, JetBrains introduced their new design language — Islands UI. Rounded panels, subtle gaps between elements, and a more modern feel. And I liked it. A lot.

That's when the idea crystallized: what if I built a proper Ayu Mirage theme, from scratch, specifically for Islands UI? And while I'm at it — Dark and Light variants too. Not a port. Not a hack. Something designed for this new interface paradigm.

I picked Kotlin over Java (felt more fitting for a modern project), set up the Gradle-based plugin template, and started digging into how JetBrains theming actually works under the hood.

Development moved fast. Uncomfortably fast. Within days, I had more ideas than I could track.

"Simple" was never the plan

Here's the thing — simple themes are a dime a dozen on the JetBrains Marketplace. Install, apply, forget. And the more complex ones? They usually just paint every UI element some random color. Material Theme, Gerry themes — they're colorful, sure, but they feel like somebody threw a paint bucket at the IDE.

I wanted something different. I love the Ayu palette — its warmth, its restraint, its purpose. Every color in Ayu has a job. Markup is coral, keywords are orange, strings are lime, entities are blue — and they're all tuned for contrast and harmony, not flash.

So the rule was set early: the palette stays canonical. Mirage. Dark. Light. That's it. No "Ayu but purple." No "Ayu but with red keywords." The ayu-colors palette is a carefully designed system, and I wasn't going to second-guess Ike Ku's color theory.

But then — how do you make a theme feel personal without breaking the palette?

The accent color idea

Themes need to stand out. Especially when users toggle between six variants. The solution hit me: an accent color. Something that doesn't change the theme fundamentally, but appears here and there on functional elements — scrollbars, active tabs, the caret line, progress bars. A subtle signature.

I didn't have to search far for the starting palette. The official Ayu website already had its syntax colors beautifully presented — each one with a purpose, a name, and a hex value. Those became the first accent presets. Warm orange, cool blue, lime green — all native to the Ayu DNA.

One thing led to another. First, the accent was just decorative. Then I added per-element toggles — want accent on scrollbars but not on links? Done. Want it on the caret row but not on bracket matches? Your call. Eight independent switches. The whole point was fine-grained control from day one.

Then I thought — what if the accent rotated automatically? Cycling through presets, or picking contrast-aware random colors? So I built that too.

The glow engine nobody asked for

This one might sound ridiculous, but hear me out.

I was tweaking the Mirage preset late at night and thought: what if the active panels had a soft neon glow beneath them? Not as decoration — as a focus tool. A visual separation that tells your brain, "this is the working area, everything else is background."

I looked at the JetBrains ecosystem: zero glow effects. Nothing even close. Meanwhile, SynthWave '84 had over 2 million installs on VS Code. So at least some developers want this. And in the JetBrains ecosystem, I couldn’t find anything similar.

So I built a glow engine. Four presets (Whisper, Ambient, Neon, Cyberpunk) + a custom one, which allows you to calibrate your own preset, four animations (Pulse, Breathe, Reactive, Static), seven panel targets you can toggle independently. It took serious work — JetBrains doesn't expose a rendering API for tool window overlays. I had to find the right component layer, handle docking and floating windows, make sure glow re-attaches correctly when you resize or rearrange panels.

The result: Cyberpunk preset at 2 AM feels like coding in a neon-lit studio. Whisper preset in the morning feels like writing in a sunlit room with a warm desk lamp.

Plugin sync: the feature born from annoyance

This one came naturally. I was working with my new accent color and noticed it clashed with CodeGlance Pro — the minimap viewport border was some default color that broke the whole look.

I dug into CodeGlance Pro's settings. Turns out — you can set custom colors manually. So it should be done programmatically. And so I did. Now the minimap viewport matches your accent color automatically.

The same thing happened with Indent Rainbow. Default indent colors looked random next to a chosen accent color. So, following the already presented pattern, I built four presets — Whisper, Ambient, Neon, Cyberpunk — that match the mood of each preset.

As far as I know, no other JetBrains theme does this. Every theme I’ve tried stops at the IDE boundary. Your minimap stay default. Your indent guides stay the default. It's a small thing, but when every seam is smooth, the IDE stops feeling like "software with a skin" and starts feeling like a unified tool.

I'm expanding this to more plugins. Each integration makes the ecosystem more cohesive — and harder to replicate.

Fonts: the idea I stole fair and square

While researching how other theme developers handle monetization, I kept coming back to Dracula PRO. Not just a theme — it ships with curated fonts as part of the bundle. And it works. Developers care about their monospace font more than they'll admit.

So I picked four Nerd Fonts that each project a distinct personality: Victor Mono Light (thin, airy, elegant), Maple Mono (warm, rounded, cozy), Monaspace Neon (sharp, technical), Monaspace Xenon (dense, high-contrast). Each one has a one-click apply with live preview. No digging through font settings, no manual line height tweaks — though the fine-tuning is there if you want it.

At this point, I had accent colors, glow effects, indent color integration, and font presets — all as separate features. Each one is useful on its own. But I hadn't connected them yet.

The accidental engine

The connection happened almost by accident. I was building the font presets and instinctively followed a consistency rule I'd set for myself early on: similar entities should inherit existing patterns, don't reinvent where you don't need to. So the font presets got the same naming convention as the glow presets. Whisper, Ambient, Neon, Cyberpunk. Indent rainbow settings also follows this pattern.

The "aesthetic engine" wasn't planned. It grew out of a naming convention. But it fit perfectly — because what I really wanted from the beginning was the ability to tune every little thing that distracts me, and presets turned a pile of settings into a coherent vision. It's not "pick a color." It's "pick a mood."

Scratching my own itches

A lot of the features came from the same pattern: I was writing code, something in my workflow annoyed me, I isolated the problem, and asked myself, «Can the theme fix this?»

The Project View showing a long filesystem path I never need? Theme can hide it. The horizontal scrollbar in the tree feels clunky? Gone. The Commit and Git panels being too wide or too narrow? Auto-fit with configurable bounds.

These aren't glamorous features. But they remove the friction I deal with eight hours a day. And if they annoy me, they probably annoy others, too.

500+ UI properties — not a flex, a necessity

Here's something most people don't realize: a JetBrains .theme.json file can reference 400+ UI keys. Each one controls a specific pixel — the separator between panels, the hover state of a tree item, the background of an inactive tab.

From what I’ve seen, a lot of themes override maybe 50–100 of these and let the rest fall back to defaults. The result? Almost right. The editor looks great, but the Settings dialog has a weird gray, or the diff viewer has jarring contrast, or the debug console doesn't match the terminal.

I went through every one. Six times — Mirage, Dark, Light, each in Classic UI and Islands UI. Over 2,700 deliberate color decisions, plus 1,400+ editor attributes for 40+ language syntaxes.

Obsessive? Sure. But that's the difference between "installed a dark theme" and "this is how the IDE was meant to look."

Getting the blessing

Before publishing anything, I reached out to Ike Ku, the original Ayu author. If you're building on someone's work, talking to them first is the minimum.

His response: he called the project "brilliant" and invited me to list it on ayutheme.com. That endorsement meant more than any feature list.

Free means free

The entire theme — all six variants, 40+ language syntaxes, accent presets, font presets — is free. No time limit. No feature degradation.

I saw what happened to Material Theme UI when it paywalled features people already had. Rating crashed from 5 to 3 stars within days. Community forked it. Developer got hostile in review responses. I won't do that.

Premium adds the glow engine, per-element accent control, workspace auto-fit, and plugin sync. A layer of control on top of an already complete product. If you never pay, you still get a genuinely complete theme — not a stripped-down teaser.

What I learned

People don't read feature lists. Two Reddit users independently said "premium features are unclear" — despite a detailed bullet list. I rewrote the description to show what each feature does: "a soft light beneath tabs and panels" beats "glow effects for UI elements" every time.
Font choice is personal. I added font presets almost as an afterthought, inspired by Dracula PRO bundling fonts. Turns out developers have strong opinions about their monospace font. Giving people a curated starting point — "try Whisper, it's thin and elegant" — seems to click in a way that a raw font picker doesn't.
Endorsements beat features. Dempfi's "brilliant" did more for credibility than any specs sheet. Reach out to creators before you ship. The worst that happens is silence.
JetBrains IDE internals are a maze. No comprehensive UI key reference. You discover things through code completion, the UI Inspector, and a lot of trial and error. I documented 18 specific gotchas across 14 development phases, so I wouldn't repeat them.