Cute Pink Light Theme, My first IDE color theme for WebStorm, PhpStorm, and other JetBrains IDEA code editors, was inspired by the VSCode theme of the same name, with slightly cooler base and more neon-ish accent colors than the Japanese kawaii style Sakura Theme celebrating the cherry blossom era.
Sakura vs. Cute Pink Light Theme
Cute Pink Dark Theme started as a lazy spin-off until I fixed the base configuration and added a deep purple touch to the directory background.
Now, there are several options for those who like pink on black.
Cutie Pro vs. Cute Pink Dark vs. Pink as Heck
From left to right: Cutie Pro by Jezz Jumble is a beautiful pink dark theme, Pink as Heck is much darker with more reddish tones, while Cute Pink Dark adds some deep purple colors.
Night Owl and Night Shift Themes
There are many dark themes, some like it deep black or dark grey, a few try dark and colorful, like Tokyo Night themes or Pink as Heck, and some try different variations of midnight blue.
Tokyo Night Themes
There are at least two different ones: Tokyo Night Theme by Alexander Adhyatma, called "Tokyo Night Dark" in the appearance menu, the blacker one in my screenshot, and Tokyo Night Color Scheme by Jonathan Boyer, called "Tokyo Night Storm" in the menu, which is the dark purple one on the right. I hope I got that right.
Sara Drasner's classic Night Owl theme for VS Code has a totally different shade of blue than the IDEA theme of the same name (Night Owl Theme by Jens Teichert)). Patrik Aradis Night Owl Native comes closer to Sara's palette.
Night Owl for VS Code vs. Night Owl vs. Night Owl Native
Most dark themes seem to be inspired and named after the night and its animals and legendary characters or some fantasy or science-fiction topics, but there was no "police" theme, which might be blue, blue and red, yellow, silver, or even green, depending on the country that you live in.
Inspiration for a possible "Police Theme"
If you are looking for a niche to publish a new, unique theme, creating a police theme might be your chance.
Red Themes
Reasons against using a "red error theme"
I didn't include red themes either, although I had thought about creating a "red error" theme. But I think we should rather emphasize the good mood that helps us achieve our goals, and we will see enough red error messages somewhere anyway. And a red error theme might make it hard to distinguish the clean code from the actual error messages. It could be fun though...
Cherry red on black, but no strawberry red wine?
Of course there are red themes like Gerry Cherry or the Solid Cherry Theme by dddelliot, both red on black for some reason. A romantic red rose or a strawberry red wine are some possible ideas for missing red themes, in case you are still searching for inspiration.
Green Alternatives
I haven't mentioned any green themes so far. I like the outdoors, hiking in the forest, seeing green plants sprout and green leaves flowing in the wind, and I like the reflections on green glass in the sunshine. Green has also been a classic monochrome color as an alternative to sepia and gray.
Searching for "green theme" in JetBrains plugins, the most popular results mention retro style and loving or relaxing the eyes.
But those light green schemes are also quite cold and blueish and the dark green themes lack contrast. I would rather have a more yellow-ish, light green theme, and maybe I will create one as well, as creating IntelliJ themes has become much easier than it used to be (see below).
Light Green Theme Inspiration: don't be so blue
Blueish, greenish, and mild light themes
Some people always use either dark or light themes, but as a freelancer working at different places, I prefer to use light or dark according to the surrounding light conditions.
Blue light has got a bad reputation, not because of its association with police cars, but for its supposed negative effects on our body. Quoting a Harvard University publication,
blue wavelengths—which are beneficial during daylight hours because they boost attention, reaction times, and mood—seem to be the most disruptive at night. And the proliferation of electronics with screens, as well as energy-efficient lighting, is increasing our exposure to blue wavelengths, especially after sundown.
So basically, we should rather reduce too much light at night and not work overtime, but some people choose to reduce blue light tones in general, also when using light-themed software during the day.
There are a lot of light themes, but it can be hard to find one that matches our mood, pleases our eyes, and ensures readability so we can do our work.
Default Light vs. Everest Theme
Many light color schemes include shades of blue and green, like the default IntelliJ Light Theme by JetBrains, the default MacOS user interface by Apple, or the slightly more dim and mild Everest Theme.
Espresso Light vs. Sepia
I like the yellowish tones of Sepia, and sometimes I also use Espresso Light Theme, although I don't see the name matching its colors, or Espresso Lightgram which is like a mixture of the Espresso Light and Sepia themes.
For Visual Studio Code, there are several similar "Solarized" light themes by different authors, including Solarized Espresso Soda by Daur Gamisonia and the default built-in "Solarized Light Theme" by vscode.
I found Solarized/Sepia to be so pleasing to my eyes that I started to use those themes more often than my own Cute Pink Light Theme.
As Jetbrains had updated their documentation and made it much easier to inspect UI colors and develop themes without complicated Kotlin configurations, why not add some more colorful options and bring even more joy to coding?
More to come ...
As I found my own light theme too cold and blue-ish, I started a new theme, shifting the hue towards yellow and sepia tones and adding orange and blue accent colors, inspired by the 1980 tune "The Rain" by Oran "Juice" Jones.
Seeking inspiration in 1980s pop culture, I thought of the Commodores' "Night Shift" song and the deep blue colors with possible yellow, orange, and pink accents matching the 16-color palette of the vintage 8-bit home computer Commodore 64. So why not call it "Commodore Night Shift Theme"?
... from mood boards and playlists ...
To verify my memories and get some source for my color picker tool, I drafted some collages based on image search results.
Multimedia: a music playlist
I also created a musical playlist to post on one of the upcoming DEV music Mondays.
Commodore 64 and The Commodores: "Night Shift" mood board
Orange and Sepia UI elements and "The Rain" record cover mood board
... to IDE themes!
Orange Rain Light or Dark, and Commodore Night Dark Theme
These themes are far from perfect, but I believe that there are worse ones in the store. There might have been more orange in the Orange Rain Dark theme, and more light contrast colors in the Commdore Night theme which looks a bit like a Commodore C64 screen but not like my mood board. And although I like both of them, my Orange Rain themes don't have much in common, and Orange Rain Light looks quite close to Sepia.
Orange Rain Light vs. Sepia Theme
Issues and Suggestions
Possible issues include readability and compatibility: some text combinations have a low color contrast, and sometimes the IDE does not respect dark: true and parent_scheme="Darcula" and shows a light mode editor with a white background instead. Also, some color definitions could be improved or added. So, I am open to suggestions and contributions!
Orange (in the) Rain
Commodore Night (Shift)
These are my new editions from 2024, celebrating some retro reminiscence of the 1980s. As I mentioned earlier, I have also published two pink themes for Jetbrains IDEs:
Cute Pink
Can't everyone create their own theme? Yes, we can!
Do it yourself!
Are you still missing the perfect theme? Or maybe you're inspired to play with colors and configurations?
There are assistants and documentation for creating an IntelliJ-based IDE theme and understanding the theme structure. To find out the internal names of UI elements, we can now use the UI inspector.
More information about colors and fonts can be found here: https://www.jetbrains.com/help/idea/configuring-colors-and-fonts.html
Emotion-driven development
And if you're wondering about "emotion-driven development", that's based on my blog post about acknowledging anger and happiness at work.
Top comments (2)
This is really cool stuff, Ingo!
I saw your posts on emotion-driven development previously, but didn't actually comment. I love the concept!
Also, this:
Awwww yeah!! 🙌 I'm gonna tee you up for this one...
So, I've already got next week's edition scheduled for Hip Hop and R&B. But the week after, come March, I'll try and remember to create a "Playlist Edition", so you can come drop it in. I mean really, you can share it whenever you wanna, but I think that'd be a fun edition to have.
Anyway, I'm off to go listen to "Night Shift"... funny enough, I have written a country song with the same title. Haha, now I gotta listen to it!
Thanks for your feedback so far! I have fixed gutter and editor background colors for Orange Rain Light Theme to improve color contrast and readability and make it look like it was supposed to do in the first place. I will check and update the dark themes next, as soon as I find time for that. Feel free to test and add feedback or pull requests in the meantime.