While I like VisualStudio Code (or rather Codium) as a quick and simple editor that fulfills most of my requirements as a web developer, there are reasons to use PHPStorm, like the Symfony and Shopware plugins.
Themes for IntelliJ Platform IDEs
JetBrains have made theming possible since 2019 for all IntelliJ IDE's (like PHPStorm), but there were not many colorful themes yet. Sepia and Espresso Light Theme are nice, and Pastel-licious looks very promising, but it failed to install in the current version. I also like Pink as heck but I need a light theme for coding on a sunny day.
Why not try to code my first IntelliJ theme then?
A Cute Pink Light Theme
Here it is: Cute Pink Light Theme - Plugins | JetBrains
Source Code: github.com/openmindculture/intellij-cute-pink-light-theme
My own cute pink light theme for IntelliJ IDE has been inspired by WebFreak's VS Code / Codium theme, so it is mostly a copy, and credits for design got to go to WebFreak.
"Just a Sunday Morning Side Project"
As my little Sunday morning side project had been taking too much time already, I decided to release a beta version and complete the details later. You can help me and submit a pull request on GitHub if you like.
Comparing Apples and Oranges 🍏🍊
There are so many UI themes for VisualStudio Code, dark ones, light ones, and colorful ones. I like the blueish Night Owl by Sarah Drasner, and I currently love WebFreak's Cute Pink Light Theme for its happy colors and high contrast and readability. But there are not so many themes for JetBrains IDEs. How hard can it be to add my own?
In a discussion on devrant, while waiting for the theme build and test to complete, IntrusionCM reminds me that "Visual studio code is a web application. But yeah. The difference in time should be extreme - one is a compiled plugin, the other "just some CSS atop".
Right, "just some CSS atop" is exactly what I love about web development. Clear separation of concerns, rapid development with little overhead, small memory footprint (all of which is only true unless npm install of course).
To be fair, building the plugin is very quick, the only thing that took such a long time was the verification, because it actually tries to verify my code against multiple versions of JetBrains IDE, which is a good thing.
Taking a Sledgehammer to Crack a Nut 🔨🌰
Okay, so I just want to change some colors in my IDE.
Okay, I have to publish a theme to do so.
JetBrains provides a theme template and links to tutorials on how to build themes and other plugins using their SDK.
Okay, there is another, more complicated, template for plugin development, which turns out to be a Gradle project that probably requires me to use the actual IntelliJ IDEA IDE instead of PHPStorm.
Remember, all I wanted to do is change some colors!
Do I really have to use their plugin builder setup?
JetBrains Custom UI Theme Workflow
Quoting JetBrains' tutorial on Custom UI Theme Workflow
Creating a UI Theme follows this general sequence:
- Setup Development Environment
- Start with a Plugin Project
- Add UI Theme components to the plugin by using the DevKit UI Theme Wizard.
- Customize the UI Theme by adding data objects to the Theme description (JSON) file.
- Add an Editor Scheme or Background Image to the plugin.
- Build and test the UI Theme plugin.
- Deploy the UI Theme plugin
- Publish the UI Theme plugin
Problems...
Lacking (or not knowing) an extensive UI reference, I can only guess which identifiers to override, and the tutorial seriously suggests using code completion as documentation. But then, there is this useful wildcard feature, allowing me to set generic background and foreground values like this in my theme.json:
"ui": {
"*": {
"background": "pinkLightBg",
"selectedBackground": "pinkMediumBg",
"hoverBackground": "pinkDarkBg",
"foreground": "purpleDarkerText",
"disabledText": "purpleLightText",
"selectionBackground": "pinkDeepBg",
"selectionForeground": "whiteText",
"underlineColor": "purpleRedBorder",
"errorFocusColor": "purpleRedFocusRect"
},
"Editor.background": "whiteBg",
(The color names are no JetBrains defaults, but rather my own project-specific design tokens.)
When the build fails due to invalid JSON, there is only a quite generic error message without a line number, like com.fasterxml.jackson.core.io.JsonEOFException: Unexpected end-of-input: was expecting closing quote for a string value, which is not really helpful. Sometimes the build seemed to have missed my latest file change, as the error message erratically went away after several retries without changing the file. That can be quite annoying, but it would not be the only system with race conditions, so let's just remember to try more than one time.
While build, test, and verification are possible, there are still some serious problems, like the "prepare plugin for deployment" action not showing up in the build menu.
Trying to build and run the plugin. The plugin is built, IntelliJ Ultimate opens an instance of IntelliJ community edition to preview the plugin. The application crashes after opening any project.
...and Solutions
But if I open IntelliJ settings before opening a project, I can preview my plugin in the settings dialog at least.
Having come that far, I am sure that my plugin has already been prepared and packaged. In build/distributions there is a zip file that I can manually import into my regular PHPStorm installation (Settings -> Plugins -> Gear Icon -> install the plugin from disk) where everything works and nothing crashes.
Remember for updates: "Run Plugin" is only a preview, but "Run Verifications" creates a new bundle file. To be sure, increase the version number for each change and verify the version number in the bundle file name.
Using IntelliJ Evaluation Version
I only needed IntelliJ IDEA Ultimate to build this interface theme. As a web developer I rarely use most IDE features, not even in PHPStorm, and I tend to prefer simplistic software like VSCode.
So I was wondering what to do when I needed to update my theme once the evaluation period for IntelliJ has expired?
No problem, if I hurry up: "Your idea evaluation has expired. Your session will be limited to 30 minutes." This could turn out to be a great productivity booster, finally adopting the pomodoro technique to slice my work into 25 minute timeboxes? 🍅⏱️😀
But at least I managed to release a theme:
Beta Release: Cute Pink Light Theme 0.1.0
There was no need to deploy to the marketplace, but I want to share. An honest and critical look at the current state makes me choose a low version number (0.1.0).
You can find my theme on GitHub and in JetBrains' official plugin marketplace.
Top comments (10)
Meanwhile, JetBrains has updated new helpful resources to make it clear and easy where to start, how to find out which properties to modify, and that you probably do not need a Gradle plugin setup to customize a few colors (anymore).
For anyone planning to create a new theme plugin: you probably do not need a complex Gradle setup, as there is a new
wizard for creating a UI theme. See:
To find out the internal names of UI elements, we can now use the UI inspector.
I have updated my project README accordingly, and also started to finish UI customization. Last but not least, as suggested by another GitHub user, I made a first prototype release of a Cute Pink Dark Theme in Jetbrains Marketplace.
Thank you for documenting your hurdles with this process, it's super helpful!
Thanks for your feedback! A lot of the problems are now obsolete, but either I didn't know yet or JetBrains has improved options and documentation a lot in the meantime. My project could have been so much simpler in hindsight.
I released a new version, Cute Pink Light Theme 0.3.0, which is compatible with IntelliJ IDEA 2022.1, PhpStorm 2022.1 etc. The new release passed the compatibility check for 2022.1 and older versions. It should be available in the plugin store soon.
After struggling with updates and incompatibilities, even after upgrading to the latest gradle plugin and using a fresh IntelliJ Ultimate IDEA evaluation without time limit and browsing YouTrack issues for much too long, I finally had to use the command line to skip a failing subtask that turned out to be optional for my theme build.
So I suspect that I might not even need IntelliJ to build a theme at all, as the gradle wrapper tool can be used on the command line without getting lost in the multitude of IDE options. After the initial (Java?) build, the "run plugin verification" that does a Kotlin build, could be invoked by a one liner:
./gradlew buildPlugin --exclude-task buildSearchableOptionsYou can find the updated theme on GitHub and in JetBrains' official plugin marketplace.
The "IDE error" can be safely ignored, as the theme works as expected.
I was only able to (re)build the theme using a workaround against the build error youtrack.jetbrains.com/issue/IDEA-... which is marked as fixed in YouTrack, but I still have the same problems even after upgrading to the latest IntelliJ IDEA 2022.1.3 (Ultimate Edition) Build #IU-221.5921.22, built on June 21, 2022 with an active purchased licensed.
I am still waiting for a solution how to make the plugin build again without errors or workarounds? Is there an updated plugin template that we must migrate to? If anyone has had a similar experience, please share a link to helpful documentation!
Thanks to JetBrains support, I managed to get rid of all the obsolete stuff from JetBrains plugin template, that are not needed for theme plugins. The new minimal version is very small, error-free, and compatible with the upcoming 2022.2 IDEA versions already. I am so delighted!
plugins.jetbrains.com/plugin/16721...
PhpStorm 2022.2 has been released and my plugin is still compatible! Thanks again to JetBrains support helping me to clean up my code. Want to help adding missing colors and a dark mode? Why not contribute on GitHub? openmindculture/intellij-cute-pink...
Update: Release 0.2.3 for IntelliJ IDEA 2021.3 (213) tested and released, still compatible, without any code changes.
I made a new release (0.2.1) to confirm compatibility with latest IntelliJ update (2021.2). No new features, only removed a deprecated library, and built and tested with PhpStorm and IntelliJ IDEA Ultimate 2021.2.
Source code and manually installable zip package on GitHub: github.com/openmindculture/intelli...
Release 0.2.1 will be available in official IntelliJ store soon!
Great writeup!