Quick start guide: building a theme plugin in Fleet

Cloning the plugin template

1. In the welcome dialog, click Clone from Git.

2. In the Source URL field, paste the following URL: https://github.com/JetBrains/fleet-theme-plugin-template.git.

Configure your plugin

1. Navigate to the my-theme-plugin folder and open build.gradle.kts in the editor.

2. Specify the following values:

   • id: your plugin's unique identifier. Use any identifier that will make your plugin unique.

   • readableName: a readable name for your plugin.

   • description: a short description of what your plugin does.

   You can uncomment the corresponding lines for the properties mentioned above. For readableName and description, make sure to uncomment the entire metadata section.

   

3. Navigate to the MyThemePlugin.kt file in the my-theme-plugin/frontendImpl/src/jvmMain/kotlin/fleet/sample/frontendImpl/ directory and open it in the editor.

4. Replace the value of the id parameter. The default value is your-theme-id-here.

   

5. Navigate to my-theme-plugin/frontendImpl/src/jvmMain/resources/your-theme-id-here.json and rename the JSON file using your plugin ID. In our example, the file name is quantum.harmony.theme.json.

   In this file, you will define the colors of the UI elements in your theme. For more information about the structure and values of the JSON theme file, refer to the Structure of the JSON format for themes topic.

Modifying the JSON theme file

1. In the cloned the plugin template repository, navigate to my-theme-plugin/frontendImpl/src/jvmMain/resources/quantum.harmony.theme.json.

2. Replace the current JSON code in this file with the following JSON code snippet:

   { "meta": { "theme.name": "Quantum Harmony", "theme.kind": "Light" }, "textAttributes": { "editor.selection": { "backgroundColor": "#98FB98" }, "editor.selection.focused": { "backgroundColor": "#AFEEEE" }, "editor.indentGuide": { "foregroundColor": "#CD5C5C", "textDecoration": { "style": "DASHED" } }, "problem.error": { "textDecoration": { "color": "#8B0000", "style": "SOLID", "type": "UNDERLINE", "thickness": 2.0 } } }, "colors": { "tab.background.default": "#FFDEAD", "tab.background.hovered": "#F5DEB3", "tab.background.selected": "#E6E6FA", "tab.indicator": "IndicatorColor", "popup.tab.background.default": "#FFE4C4", "popup.tab.background.hovered": "#D8BFD8", "popup.tab.background.selected": "#E0FFFF", "popup.tab.indicator": "IndicatorColor", "editor.background": "#FAFAD2", "editor.caret.background": "#FF7F50", "editor.caret.border": "#8A2BE2", "tool.background": "#7FFFD4" }, "palette": { "IndicatorColor": "#DA70D6" } }

   For more information about the file structure and possible values, refer to Structure of the JSON format for themes.

3. Save the JSON theme file.

Running the JetBrains Fleet instance with your plugin

1. Select View | Terminal from the main menu.

2. In the Terminal window, run the following command:

   ./gradlew runFleet

   Wait until JetBrains Fleet starts and open any project.

3. Navigate to View | Color Theme and select the theme with the name that you defined. In this quick-start guide, we used Quantum harmony.

   

Generating a JetBrains Marketplace token

1. Register or use your current account on the JetBrains Marketplace. Your account should be a vendor account.

2. On the Token tab, type the token name in the Permanent token name field.

3. Click Generate Token.

4. Click the Copy icon to copy the token. Save it to use it later in your Gradle configuration.

   

Adding the token to your Gradle properties

• Choose one of the following methods to set the token:

  • Open or create the gradle.properties file in the ~/.gradle/ folder in your home directory and add the following line:

    org.jetbrains.fleet-plugin.marketplaceUploadToken=perm:QXJ0ZW0uUHJvbmljaGV2.OTItMTA1MDk=.kCRZbSAtlRfTf8WkOgcpPGCQ27TWRM

  • Export an environment variable:

    export ORG_GRADLE_PROJECT_org.jetbrains.fleet-plugin.marketplaceUploadToken=perm:QXJ0ZW0uUHJvbmljaGV2.OTItMTA1MDk=.kCRZbSAtlRfTf8WkOgcpPGCQ27TWRM

  • Pass the token as a parameter when running Gradle tasks:

    ./gradlew <task_name> -Porg.jetbrains.fleet-plugin.marketplaceUploadToken=perm:QXJ0ZW0uUHJvbmljaGV2.OTItMTA1MDk=.kCRZbSAtlRfTf8WkOgcpPGCQ27TWRM

  

Publishing your plugin

1. Select View | Terminal from the main menu.

2. In the Terminal window, run the following command:

   ./gradlew distZip

   Wait until the ZIP archive is ready. The built plugin should be located in the my-theme-plugin/build/pluginDistribution directory.

3. Open the Upload plugin page. Ensure that you are logged in to your JetBrains Marketplace account.

4. Fill in the form and attach your ZIP archive with a plugin in the Plugin file field.

   

5. Click the Upload plugin button.

   For more information about the uploading process, refer to the Uploading a new plugin article in the JetBrains Marketplace documentation.