Material Components

This is a reference of all the components customized by the plugin.

Introduction

The original idea of the Material Theme plugin was to be able to customize the UI and Editor colors to look like the original Sublime theme. Since there wasn’t a way to create a new separate Look And Feel, the plugin is instead borrowing the native Look and feels, Darcula and IntelliJ, and overrides their colors as long as it is able to.

However, the original Sublime theme didn’t stop there. Aside from changing the colors of the editor, the theme also got to customize the different parts of the editor with a Material Design look and feel, which brought him a lot of stars. There should be a way to do it for JetBrains IDE as well, right?

Guess there is, and now the plugin features Material Design components reworked from the ground up, making it look very similar to the original plugin, and even bringing new features to light!

Reference

Tabs

Tabs
Tabs

Regular Editor tabs have been modified to look like Material design tabs:

  • They got bigger
  • An indicator is displayed under the active tab
  • They can be bold uppercase
  • The close button has been reworked
  • A shadow is shown under the tab strip (from version 2.8.0)

Buttons

Buttons
Buttons
  • Buttons have been flattened, and lost their bevel effect.
  • The font have been increased to 13px, and got bold
  • An animation is played when hovering them as they change color

Inputs, Numbers and Passwords

Input Fields
Input Fields
Number Fields
Number Fields
Password Fields
Password Fields
  • They lost their border, instead only display a bottom border that get highlighted on focus
  • They have a different background color in contrast mode
  • Password fields have a new button to allow previewing the inputted characters

Checkboxes

Checkboxes
Checkboxes
  • Checkboxes are now filled with the accent color while the sign is transparent
  • They get some sort of ripple effect when checked/unchecked

Radio buttons

Radio Buttons
Radio Buttons
  • Radio buttons got similar to the Material Design Radio buttons
  • They get some sort of ripple effect when pressed
Dropdown/Comboboxes
Dropdown/Comboboxes
Opened Dropdowns
Opened Dropdowns
  • The dropdowns/comboboxes got redesigned by having the same border as the inputs, which highlights on active/hover.
  • Besides, they have been added more padding between items, as well as hovering over the selector, just like Material Design dropdowns. This behavior can be switched off via the Compact Dropdowns setting.

Action Buttons

Action Button
Action Button
  • Action Buttons (or Toolbar buttons) got redesigned to display some sort of ripple when hovered/pressed.

Sliders

Sliders
Sliders
  • The thumb got round and larger
  • The track got thicked and received the accent color
  • The steppers have been removed

Tables

Tables
Tables
Table Cells
Table Cells
  • Table Headers and cells have been padded on top and bottom
  • Table Headers got bold
  • Table Cells got a beveled border when selected (this might change in the future)
  • Striped table rows get the regular and contrast color of the current theme

Trees

Tree Arrows
Tree Arrows
  • Tree Items height got bigger (can be customized in the settings)
  • Selected item is highlighted with an indicator (can be customized in the settings)
  • Arrows have been replaced with Material Arrows (“chevrons”) (but can be modified in the settings as well)

Progress Indicators

Progress Bar
Progress Bar
Progress Loader
Progress Loader
  • Progress Bars have lost their “striped” look to look more like a regular filling bar
  • Progress Loaders have been replaced with the usual Material Design circular loader

Dialogs

Dialogs
Dialogs
  • Dialogs title bar’s text is now left aligned, bigger and bold

Switches

Switches
Switches
  • On/Off buttons that appear inside the Command Panel and Search Everywhere
Navigation Bar
Navigation Bar
  • The Navigation Bar at the top of the view looks more like Material Design breadcrumbs.