Skip to content

Cute pink light theme for JetBrains IDE (IntelliJ IDEA, PHPStorm etc.) inspired by WebFreak's VisualStudio Code theme. Install from JB marketplace (inside your IDE) or install zip file (see README).

License

Notifications You must be signed in to change notification settings

openmindculture/intellij-cute-pink-light-theme

Repository files navigation

Cute Pink Light Theme

Cute Pink Light Theme is a light IDE theme for JetBrains IDEs (PhpStorm, WebStorm, IntelliJ IDEA, etc.) inspired by a theme for VisualStudio Code. This theme adds cute pink colors to your IDE, keeping the default light theme for editor and unchanged syntax highlighting. Based on JetBrains default light theme.

If you like to support development, you can open a pull request on GitHub.

For JetBrains IDEs, version 2020.2 and above. Version 1.0.0 has been tested up to 2024.1 (244) EAP and should also support later IDEA versions.

To install:

If you only want to install the theme, you do not need this repository. You can install the theme from JB marketplace (inside your IDE) or install zip file (see below).

Screenshots

New UI (PhPStorm 2023.3.3)

screenshot

Classic UI (PhPStorm 2023.3.3)

screenshot

New UI (WebStorm 2024.1 EAP)

screenshot

Local Installation

In build/distributions there is a zip file that I can manually import into my regular PhpStorm installation (Settings -> Plugins -> Gear Icon -> install plugin from disk).

Development

Cute Pink Light Theme (openmindculture/intellij-cute-pink-light-theme) can be used as an upstream repository for variations like Cute Pink Dark Theme (intellij-cute-pink-dark-theme).

git checkout [email protected]:openmindculture/intellij-cute-pink-dark-theme.git
cd intellij-cute-pink-dark-theme.git
git remote add upstream [email protected]:openmindculture/intellij-cute-pink-light-theme.git

The initial settings for the formerly recommended development environment, IntelliJ IDEA Ultimate, as described by JetBrains in the custom UI theme workflow, has been removed in favor of a simple build script since release 1.0.0. You can also create a zip file manually, see the instructions below.

For creating future theme plugins, you do not need a complex Gradle setup, as there is a new wizard for creating a UI theme. See:

A plugin consisting of a single .jar file is placed in the /plugins directory. Source: https://plugins.jetbrains.com/docs/intellij/plugin-content.html

To find out the internal names of UI elements, we can now use the UI inspector:

The UI Inspector is a powerful tool to investigate the IntelliJ-based IDE UI elements to get an internal description of each element. In addition, UI elements can be tested interactively with Ctrl+Alt+Click on the element.

Before using the UI Inspector, it must be enabled by selecting the menu item Tools | Internal Actions | UI | UI Inspector. The enabled state of the UI Inspector is modal; it remains enabled until it is disabled by selecting the menu item again.

If the menu item Tools | Internal Actions is not available in IntelliJ IDEA, then the first step is Enabling Internal Mode:

From the main menu, select Help | Edit Custom Properties... This selection opens IntelliJ IDEA's idea.properties file. If it does not exist, IntelliJ IDEA will prompt to create one.

Add the line shown below to the idea.properties file:

idea.is.internal=true Save the idea.properties file and restart IntelliJ IDEA.

More information about colors and fonts can be found here: https://www.jetbrains.com/help/idea/configuring-colors-and-fonts.html

Development, Build and Export

  • Edit colors in src/main/META-INF/cute_pink_light_theme.json.
  • As a contributor:
    • create a pull request on GitHub.
  • As a maintainer:
    • Edit theme version, supported IDE versions, and other data, in
      • src/main/resources/META-INF/plugin.xml
      • src/main/resources/META-INF/MANIFEST.MF
      • package.json
      • gradle.properties (only used for IntelliJ gradle build)
      • build.gradle.kts (only used for IntelliJ gradle build)
    • Build using one of the methods described below.
    • Add a change log in CHANGELOG.md.
    • Add a git tag, create a release, and add the theme zip.
    • Upload the theme zip to JetBrains marketplace.

Shell Build

npm run build

  • requires bash/sh!
  • creates a build/distributions/intellij-cute-pink-light-theme-x.y.z.zip

Alternative Manual Export (without IntelliJ Build Process)

Create an archive intellij-cute-pink-light-theme-x.y.z.zip containing:

  • intellij-cute-pink-light-theme/
    • lib/
      • intellij-cute-pink-light-theme-x.y.z.jar The .jar file is another zip archive containing the contents of src/main/resources with **no additional folder in between, e.g.:
        • cute_pink_light.theme.json
        • cute_pink_light.xml
        • META-INF/
          • plugin.xml
          • pluginIcon.svg
          • MANIFEST.MF

A valid MANIFEST.MF example is included to simplify theme export and update.

You can use the build script ./build.sh $version to build, e.g. ./build.sh 2.9.0

Fix Problems and Incompatibilities

If the build does not run anymore, try to

Upgrade Plugin for new IDEA versions

  • bump plugin version
  • add current IDEA version to supported targets
  • rebuild artifacts as described above

Author

I am Ingo Steinke (@openmindculture on GitHub) a creative web developer, creating sustainable software and websites. If you like my talks and articles, feel free to support me on patreon, buy me a coffee or hire me as a freelancer.


Plugin based on the IntelliJ Platform Plugin Template.

About

Cute pink light theme for JetBrains IDE (IntelliJ IDEA, PHPStorm etc.) inspired by WebFreak's VisualStudio Code theme. Install from JB marketplace (inside your IDE) or install zip file (see README).

Topics

Resources

License

Stars

Watchers

Forks

Languages