← Back to DevBytes
Web August 14, 2026 9 min read

WebStorm Themes and Customization: Complete Guide

WebStorm Themes and Customization: Complete Guide

WebStorm, JetBrains' flagship JavaScript and TypeScript IDE, ships with a powerful customization system that lets you tailor everything from syntax highlighting colors to keyboard shortcuts, editor fonts, UI density, and even custom plugins. Whether you want a distraction-free dark theme for late-night coding sessions or a fully personalized workflow that mirrors your team's conventions, WebStorm's customization layer is deep enough to support it. This guide walks through the entire process — from installing prebuilt themes to authoring your own color schemes and tweaking the IDE's behavior to match your style.

What Is WebStorm Customization?

WebStorm customization refers to the collection of settings, themes, color schemes, keymaps, and plugins that alter how the IDE looks and behaves. JetBrains separates these concepts into distinct layers:

Understanding this separation matters because a "theme" in casual conversation often conflates UI theme and color scheme. In WebStorm, they are independent — you can pair a dark UI theme with a light editor color scheme if you wish.

Why Customization Matters

Personalization is not just aesthetics. A well-tuned environment improves readability, reduces eye strain during long sessions, accelerates navigation through muscle-memory shortcuts, and enforces consistency across a team. For developers switching from VS Code or Sublime, replicating familiar keybindings and color cues can shave weeks off the onboarding curve. For teams, exporting a shared scheme ensures every reviewer sees the same highlighting for tokens, errors, and warnings.

Installing Prebuilt Themes

The fastest way to change WebStorm's appearance is through the JetBrains Marketplace, accessible directly inside the IDE. Hundreds of community themes are available, including popular ports like One Dark, Dracula, Monokai Pro, and Material Theme UI.

Installing via the Plugins Settings

To install a theme from the marketplace:

Many themes bundle both a UI theme and one or more color schemes. After installation, check Settings → Editor → Color Scheme to pick the matching scheme.

Importing a Theme From a File

If you receive a theme as an .icls (color scheme) or .theme.json (UI theme) file, you can import it manually. Place color scheme files into the following directory:

# macOS
~/Library/Application Support/JetBrains/WebStorm/colors/

# Linux
~/.config/JetBrains/WebStorm/colors/

# Windows
%APPDATA%\JetBrains\WebStorm\colors\

For UI themes packaged as .jar or plugin archives, use Settings → Plugins → ⚙️ gear icon → Install Plugin from Disk and select the file. Restart the IDE to activate it.

Creating a Custom Color Scheme

Beyond installing themes, you can build a color scheme from scratch or fork an existing one. This is ideal when you want subtle tweaks — say, a specific shade for JSX tags or a more visible selection highlight — without committing to a full theme replacement.

Duplicating and Editing a Scheme

WebStorm does not allow editing built-in schemes directly. Instead, duplicate one and modify the copy:

For example, to make function declarations stand out, navigate to Color Scheme → JavaScript → Functions and set a bold yellow foreground. Changes apply live to the editor behind the settings dialog.

Editing the Scheme XML Directly

Under the hood, color schemes are XML files. Editing them directly is faster for bulk changes and version control. Here is a snippet from a custom .icls file:

<scheme name="MyDarcula" version="142">
  <option name="LINE_SPACING" value="1.2" />
  <colors>
    <option name="CARET_COLOR" value="ffcc00" />
    <option name="SELECTION_BACKGROUND" value="214283" />
    <option name="GUTTER_BACKGROUND" value="2b2b2b" />
  </colors>
  <attributes>
    <option name="JS.FUNCTION_NAME">
      <value>
        <option name="FOREGROUND" value="ffc66d" />
        <option name="FONT_TYPE" value="1" />
      </value>
    </option>
    <option name="JS.PARAMETER">
      <value>
        <option name="FOREGROUND" value="a9b7c6" />
        <option name="EFFECT_COLOR" value="a9b7c6" />
        <option name="EFFECT_TYPE" value="1" />
      </value>
    </option>
  </attributes>
</scheme>

The FONT_TYPE value of 1 means bold, 2 means italic, and 3 means bold italic. The EFFECT_TYPE controls underlines, strike-throughs, and other text decorations. Colors are hex values without the leading #.

Building a Custom UI Theme Plugin

If you want to distribute a complete UI theme — including custom icons, scrollbar styles, and editor backgrounds — you need to package it as a theme plugin. JetBrains provides a theme JSON format that the IDE reads on startup.

Project Structure

Create a new plugin project with the following layout:

my-theme-plugin/
├── build.gradle.kts
├── src/
│   ├── main/
│   │   ├── resources/
│   │   │   ├── META-INF/
│   │   │   │   └── plugin.xml
│   │   │   ├── my_theme.theme.json
│   │   │   └── icons/
│   │   │       └── custom.svg

The plugin.xml Descriptor

Register the theme in plugin.xml so WebStorm knows to load it:

<idea-plugin>
  <id>com.example.mytheme</id>
  <name>My Custom Theme</name>
  <vendor>Your Name</vendor>
  <depends>com.intellij.modules.platform</depends>

  <extensions defaultExtensionNs="com.intellij">
    <themeProvider id="my-theme" path="/my_theme.theme.json" />
  </extensions>
</idea-plugin>

The Theme JSON File

The .theme.json file defines colors for UI components. Here is a minimal example:

{
  "name": "My Custom Theme",
  "dark": true,
  "author": "Your Name",
  "editorScheme": "/colors/MyCustomTheme.icls",
  "colors": {
    "bg": "#1e1e2e",
    "fg": "#cdd6f4",
    "accent": "#89b4fa",
    "border": "#313244"
  },
  "ui": {
    "Panel.background": "bg",
    "Label.foreground": "fg",
    "Button.background": "bg",
    "Button.focusedBorderColor": "accent",
    "Tree.background": "bg",
    "List.background": "bg",
    "ScrollPane.background": "bg",
    "ToolBar.background": "bg",
    "StatusBar.background": "bg",
    "Editor.background": "bg"
  },
  "icons": {
    "ColorPalette": {
      "Actions.Grey": "#6c7086",
      "Actions.Blue": "#89b4fa",
      "Objects.Green": "#a6e3a1",
      "Objects.Red": "#f38ba8"
    }
  }
}

The colors block defines named variables you reference throughout the ui block. The editorScheme path points to the color scheme XML that controls syntax highlighting. The icons section remaps the built-in icon palette so toolbar and gutter icons match your theme's mood.

Building and Installing

Use the Gradle IntelliJ Plugin to build the project. A minimal build.gradle.kts looks like this:

plugins {
  id("org.jetbrains.intellij") version "1.17.2"
}

intellij {
  version.set("2024.1")
  type.set("WS")
  plugins.set(listOf())
}

tasks {
  patchPluginXml {
    sinceBuild.set("241")
    untilBuild.set("242.*")
  }
  buildSearchableOptions {
    enabled = false
  }
}

Run ./gradlew buildPlugin. The resulting ZIP in build/distributions/ can be installed via Settings → Plugins → Install Plugin from Disk. To publish to the JetBrains Marketplace, sign in at plugins.jetbrains.com, upload the ZIP, and submit for review.

Customizing Keymaps

Keymaps are the second pillar of personalization. WebStorm ships with presets for VS Code, Eclipse, NetBeans, and Emacs, plus the default IntelliJ macOS and Windows/Linux layouts. You can duplicate any preset and remap individual actions.

Remapping a Shortcut

You can also assign shortcuts via the Find Action dialog (Ctrl+Shift+A): type the action name, press Alt+Enter, and select Add Keyboard Shortcut.

Exporting and Sharing Keymaps

Keymaps are stored as XML in the config directory under keymaps/. To share with teammates, copy the .xml file into their keymaps/ folder. For version control, symlink this directory into your dotfiles repository.

Editor Appearance Tweaks

Beyond themes and keymaps, several editor settings dramatically affect daily comfort. These live under Settings → Editor → General and Settings → Editor → Font.

Recommended Settings

Configuring via EditorConfig

To enforce consistent formatting across your team regardless of individual IDE settings, use an .editorconfig file at the project root. WebStorm reads it automatically:

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2
max_line_length = 100

[*.md]
trim_trailing_whitespace = false

[*.{html,css,scss}]
indent_size = 2

This file overrides per-user indentation preferences, ensuring that everyone on the team produces identical whitespace output.

Syncing Settings Across Machines

JetBrains offers a built-in Settings Sync feature that pushes your themes, keymaps, color schemes, and code styles to the cloud. Enable it via File → Manage IDE Settings → Settings Sync → Enable Settings Sync. Sign in with your JetBrains account, and choose which categories to sync.

For teams that prefer Git-based sync, the Settings Repository plugin lets you push and pull settings from a private repository. Configure it under Settings → Tools → Settings Repository by providing a remote URL and credentials.

Best Practices

Conclusion

WebStorm's customization system is layered and flexible enough to satisfy both casual tweakers and power users building distributable theme plugins. By understanding the distinction between UI themes, color schemes, and keymaps, you can mix and match components to craft an environment that feels native to your workflow. Start with a marketplace theme, duplicate and refine the color scheme to your taste, layer in a familiar keymap, and enforce consistency with .editorconfig and settings sync. Over time, these small adjustments compound into a noticeably faster, more comfortable coding experience — and if you build something your team loves, packaging it as a plugin and publishing to the JetBrains Marketplace is just a Gradle build away.

— Ad —

Google AdSense will appear here after approval

← Back to all articles