The Accent Colors feature allows you to personalize and emphasize key UI elements throughout the IDE.
Definition
An Accent Color is used to highlight primary UI components, such as active tabs, focused inputs, checkboxes, and buttons. The Material Theme UI plugin enables comprehensive customization of these colors within the IDE.
For more information, refer to the Material Design Color System guidelines.
Usage
Here is a non-exhaustive list of components where accent color is used:
- Active Tab Indicator
- Close tab button on hover
- Tree View selected item indicator
- Checked boxes
- Selected Radio buttons
- Focused text inputs
- Focused/Hovered comboboxes
- Sliders
- Toggled Action buttons
- Code Completion pane
- Parameter Info
- Documentation’s links and bold texts
- Panels’ links
- Tree’s selected item expanded and collapsed icons
- Progress Bar
- Circular progress indicator
- Scrollbars (according to
Accent Scrollbarssetting) - VCS Log branches icon
- Caret Color
- Modified Setting Pages
- On/Off Switches in Search Everywhere/Execute Action
- Navigation Bar Focused Item
- Search terms in lists
- Accent Mode color
- Running Indicator in Run configurations
- And other use cases…
Customization
Accent colors can be configured in several ways:
Material Theme Toolbar:
Status Bar Accent Color Widget:
From The Settings:
Predefined accent colors
Here is the list of predefined colors:
Second Accent Color
Themes can define a secondary accent color. This color is utilized when Accent Mode is enabled, providing a complementary highlight when the primary accent color is already prominent.
Custom accent color
By default, the accent color is derived from the theme. For Material Themes, this is a predefined theme property; for external themes, it is typically based on the Link.activeForeground property.
To use a different color, uncheck the Override Accent Color from Theme option and select your preferred color.
Accent Color Preview
To see how your chosen accent color will appear, refer to the Preview section on the settings page.
Gallery
Note: These images are from earlier versions of the plugin and may not reflect current UI changes. For a real-time preview, navigate to the UI DSL Showcase settings screen within the IDE.
