You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Its concept is to provide a better visualization of your opened projects by adding a colored stripe on top of each window,
33
-
with a unique color automatically generated from the **project name**!
34
-
35
-
{% include figure.html content="/screens/projectFrame.png" caption="Project Frame Colors" %}
36
-
37
-
This feature has been available since version 5.2.0.
38
-
Previously available under the _Features_ tab, since version 6.6.0 it has its own settings tab, with all its customization abilities.
39
-
40
-
{% include figure.html content="/screens/projectFrameTab.png" caption="Project Frame Settings" %}
41
-
42
-
---
43
-
44
-
### Enable/Disable Project Frame colors
45
-
46
-
This setting simply enables or disables the _Project Frame_.
47
-
When enabled, a new stripe is added on the top of the IDE, just below the title bar, displaying the Project name in a randomly generated background color.
48
-
49
-
{% include figure.html content="/screens/projectFrame.png" caption="Project Frame Colors" %}
50
-
51
-
As stated previously, the background color is generated from the project name.
52
-
Meaning, that if two projects have similar names, they would have similar colors as well.
53
-
54
-
This can be useful when having multiple open projects, to help distinguish between each of them.
55
-
56
-
----
57
-
### Colorize Title Bar
58
-
59
-
This feature is only available for people having access to the New UI via the _New UI Preview Plugin_, and available since version 7.7.0.
60
-
{:class='card-panel warn'}
27
+
Introduced in the New UI (2023), JetBrains IDEs feature a thick, colorful application frame that encompasses the editor and tool windows. This frame contains action buttons, widgets, and other supplementary elements.
61
28
62
-
This feature is inspired by the [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) VS Code extension, and was the inspiration behind the
63
-
_Project Frame_. It allows you to paint the title bar differently per-project.
29
+
By default, this frame remains consistent across all projects, which can make it difficult to distinguish between multiple open projects.
64
30
65
-
This was something that wasn't possible before, but the New UI introduced a flashy new "*title bar* component" to replace the original title bar (the same way the Material Theme [did in the past](/docs/configuration/other-tweaks-settings#themed-titlebar)), and this one is customizable.
31
+
The **Colorize Application Frame** settings allow you to add a unique color to the frame, automatically generated based on the project name. This makes it easier to visually identify and switch between different projects.
66
32
67
-
So there it is, the perfect **Project Frame**! And it can be customized per project!
33
+
{% include figure.html content="/screens/projectFrame/colorTitleFrame.png" caption="Colorize Title Bar" %}
68
34
69
-
{% include figure.html content="/screens/colorized.png" caption="Colorize title bar" %}
35
+
The color is generated by an algorithm that uses the project name to ensure a unique and consistent color for each project.
36
+
{:class='card-panel info'}
70
37
71
-
As usual, you can still disable it from the [Project Frame Settings](/docs/configuration/project-frame-settings). And it's available in the separate standalone plugin as well.
38
+
You can customize which parts of the application frame to colorize. While only the **Title Bar** is colorized by default, you can also enable colorization for:
39
+
-**Title Bar**
40
+
-**Left Tool Window**
41
+
-**Right Tool Window**
42
+
-**Status Bar**
72
43
73
-
Note: The _New UI Preview program_ has since then been closed, so there's no way to download the plugin anymore officially. However, we still have a copy of it available <ahref="http://dl.material-theme.com/newUI"download>here</a>. You can also find it in our Slack channel.
74
-
{:class='card-panel warn'}
44
+
{% include figure.html content="/screens/projectFrame/colorAllFrame.png" caption="Colorize All Parts" %}
75
45
76
-
Note (2): This is **still**not possible on Linux, but a close enough result can be achievable through another plugin: [Project Color](https://plugins.jetbrains.com/plugin/19463-project-color).
46
+
**Note**: Starting with the Islands UI (2025), JetBrains IDEs also include a built-in **Project Gradient**feature found in `Settings > Appearance > Use project colors in main toolbar`. Enabling any of the *Colorize Application Frame* settings in the Material Theme UI plugin will automatically disable the IDE's native Project Gradient.
77
47
{:class='card-panel warn'}
78
48
79
-
---
80
-
### Show project name
81
-
82
-
Since version 6.6.0, you can now decide to show or hide the _Project Name_ displayed on the bar.
83
-
84
-
{% include figure.html content="/screens/hideProjectTitle.png" caption="Hide Project Name" %}
85
-
86
-
Since the project name is already displayed in the title bar, it can be a little jarring to have it on both the title bar and the Project Frame.
87
-
Therefore, this setting can be useful for limiting the information displayed on screen.
88
-
89
-
---
90
-
### Show project icon
91
-
92
-
As of 2021.2, a pretty unknown feature has been put up to the spotlight by JetBrains,
93
-
which is the ability to [set an icon to projects](https://blog.jetbrains.com/idea/2021/06/intellij-idea-eap-5/#change_project_icons).
49
+
{% include figure.html content="/screens/projectFrame/projectColors.png" caption="Project Colors Settings" %}
94
50
95
-
This setting makes use of this feature to directly display the said icon in the _Project Frame_.
96
-
97
-
{% include figure.html content="/screens/projectIcons.png" caption="Project Icons" %}
98
-
99
-
This can prove useful when having multiple projects open at once. Moreover, it can be activated on a per-project basis as well!
100
-
101
-
This feature has been available since 6.7.0.
51
+
----
102
52
103
-
**Note**: at that moment, only SVG icons are supported.
104
-
{:class='card-panel warn'}
53
+
## Project Widget Settings
105
54
106
-
---
107
-
### Customize text
55
+
This section expose some configuration settings for the native **Project Gradient** feature.
108
56
109
-
Another option, rather than hiding the _Project Name_, would be to actually replace it with a text of your choice.
57
+
### Gradient Radius
110
58
111
-
{% include figure.html content="/screens/customText.png" caption="Custom Project Frame Text" %}
59
+
This setting allows you to specify the radius of the gradient. It's 2000px by default.
112
60
113
-
That means that you can customize what's displayed on the bar with unicode characters, emojis, etc.
114
-
This, coupled with the ability to set settings per-project, can be useful as well for better recognizing between windows :)
61
+
<divclass="masonry"markdown="0">
115
62
116
-
**Hint**: there are a few keywords available to use:
117
-
-`{project}`: the current project's name
118
-
-`{module}`: the current module name (for projects supporting modules, such as Java or Rider)
119
-
-`{file}`: the current filename
63
+
{% include figure.html content="/screens/projectFrame/600gradient.png" caption="Gradient Radius: 600px" %}
120
64
121
-
---
122
-
## Per-project settings
65
+
{% include figure.html content="/screens/projectFrame/2000gradient.png" caption="Gradient Radius: 2000px" %}
123
66
124
-
Since version 6.6.0, you can also override the global settings on a per-project basis:
125
-
- Select a custom color
126
-
- Show/Hide the project title
127
-
- Show/Hide the project icon
128
-
- Set a custom text per project
67
+
{% include figure.html content="/screens/projectFrame/4000gradient.png" caption="Gradient Radius: 4000px" %}
129
68
130
-
**Note**: you would still need to **Enable** the Global Project Frame Colors setting, so that the frame is added to the IDE.
0 commit comments