ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Material Theme

by equinusocio ST3 Top 100

Material Theme, the most epic theme for Sublime Text 3 by Mattia Astorino

Details

Installs

  • Total 328K
  • Win 156K
  • OS X 110K
  • Linux 62K
Jan 22 Jan 21 Jan 20 Jan 19 Jan 18 Jan 17 Jan 16 Jan 15 Jan 14 Jan 13 Jan 12 Jan 11 Jan 10 Jan 9 Jan 8 Jan 7 Jan 6 Jan 5 Jan 4 Jan 3 Jan 2 Jan 1 Dec 31 Dec 30 Dec 29 Dec 28 Dec 27 Dec 26 Dec 25 Dec 24 Dec 23 Dec 22 Dec 21 Dec 20 Dec 19 Dec 18 Dec 17 Dec 16 Dec 15 Dec 14 Dec 13 Dec 12 Dec 11 Dec 10 Dec 9 Dec 8
Windows 329 424 465 520 477 532 516 368 380 484 524 465 478 545 315 404 481 467 475 471 414 200 250 346 409 386 393 396 264 280 388 446 456 507 469 309 319 382 465 462 463 443 327 346 438 423
OS X 208 161 297 295 335 345 305 201 208 258 291 338 318 275 191 212 274 291 282 307 237 111 138 187 238 234 234 192 158 156 306 274 281 317 284 170 193 262 247 278 259 256 162 162 272 285
Linux 151 171 213 202 231 169 183 141 170 188 175 196 183 195 123 159 177 176 190 211 165 98 100 141 121 148 153 146 112 121 177 185 176 194 179 111 116 149 181 172 186 182 150 161 177 194

Readme

Source
raw.​githubusercontent.​com

Material Theme

Package Quality Beerpay

This theme brings the Material Design visual language to your Sublime Text 3. If you have problems, first search for a similiar issue and then report a new one.

Please read the Known Issues section before reporting a new one. Any issue that does not use the issue template and any issue related to the known issues section will be automatically closed.

Easy installation

You can install this awesome theme through the Package Control.

  1. Press cmd/ctrl + shift + p to open the command palette.
  2. Type “install package” and press enter. Then search for “Material Theme”

Manual installation

  1. Download the latest release, extract and rename the directory to “Material Theme”.
  2. Move the directory inside your sublime Packages directory. (Preferences > Browse packages…)

Activate the theme

You can active this theme from: - Command palette Tools > Command Palette (or cmd/ctrl + + p) by typing Material Theme: Activate theme. - Context menu (Right click on the editor) and choose Material Theme > Activate Material Theme - Preferences > Packages Settings and choose Material Theme > Activate Material Theme

You can also manually activate this theme by adding these lines to your user settings (Preferences > Settings - User):

"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"theme": "Material-Theme.sublime-theme",

NOTE: Restart Sublime Text after activating the theme.

Configuration

This theme provide a visual configuration tool that allow you to configure the theme by activating the available options from an inline popup. Just right click in your editor and choose Material Theme > Material Theme Config. You can also open the configurator from the command palette by searching Material Theme > Configuration

Advanced configuration

If you like the advanced text text-configuration you can use it by the Material Theme > Advanced configuration command both from context menu and command palette.

Known issues

Please see the issue #67 if you can't see the bottom panel (find/replace, rename, move, can't see the box inputs in SidebarEnhancement, etc..). here the quick fix:

Drag the top edge

Addons

File icons

From release 4.0.0 this theme use zz File Icons package to display file icons. Please install the package and restart Sublime Text.

App Bar

Material Theme Appbar This official addon enable a beautiful colored tab bar to your Material Theme. The color tint fits automagically the material theme accent color you choosed.

White panels

Material Theme White Panels If you want to enable the white panels and inputs you can install the addon package through Package Control, search for “Material theme white panels”. You have to disable it if you want to use the Lighter theme style.

Theme options

// Accent
"material_theme_accent_acid-lime"         : true , // Set acid-lime accent color
"material_theme_accent_blue"              : true , // Set blue accent color
"material_theme_accent_brba"              : true , // Set Breaking Bad green accent color
"material_theme_accent_bright-teal"       : true , // Set bright-teal accent color
"material_theme_accent_cyan"              : true , // Set cyan accent color
"material_theme_accent_graphite"          : true , // Set graphite accent color
"material_theme_accent_indigo"            : true , // Set indigo accent color
"material_theme_accent_lime"              : true , // Set lime green accent color
"material_theme_accent_orange"            : true , // Set orange accent color
"material_theme_accent_pink"              : true , // Set pink accent color
"material_theme_accent_purple"            : true , // Set purple accent color
"material_theme_accent_red"               : true , // Set pale red accent color
"material_theme_accent_sky"               : true , // Set bright-cyan accent color
"material_theme_accent_tomato"            : true , // Set tomato red accent color
"material_theme_accent_yellow"            : true , // Set yellow accent color

// Panels
"material_theme_accent_scrollbars"        : true , // Enable accent color for scrollbars
"material_theme_bright_scrollbars"        : true , // Bright scrollbars puck color
"material_theme_compact_panel"            : true , // Set minimal padding for the search panel
"material_theme_contrast_mode"            : true , // Enable sidebar and panels contrast mode
"material_theme_panel_separator"          : true , // Show bottom panel separator
"material_theme_small_statusbar"          : true , // Set small status bar

// Sidebar
"material_theme_arrow_folders"            : true , // Replace folder icons with arrows
"material_theme_big_fileicons"            : true , // Show bigger file type icons
"material_theme_bullet_tree_indicator"    : true , // Set a bullet as active tree indicator
"material_theme_compact_sidebar"          : true , // Set compact side bar
"material_theme_disable_fileicons"        : true , // Hide sidebar file type icons
"material_theme_disable_folder_animation" : true , // Disable folder animation
"material_theme_disable_tree_indicator"   : true , // Disable sidebar file indicator

// Tabs
"material_theme_bold_tab"                 : true , // Make the tab labels bolder
"material_theme_small_tab"                : true , // Set small tabs
"material_theme_tabs_autowidth"           : true , // Enable autowidth for tabs
"material_theme_tabs_separator"           : true , // Show tabs separator, this disables tab hover animation

// If you use Material Theme - Appbar addon you can use additional settings:
"material_theme_tree_headings"            : true , // Show sidebar headings

Recommended settings for a better experience:

"always_show_minimap_viewport" : true,
"bold_folder_labels"           : true,
"font_options"                 : [ "gray_antialias", "subpixel_antialias" ],    // On retina Mac & Windows
"indent_guide_options"         : [ "draw_normal", "draw_active" ],   // Highlight active indent
"line_padding_bottom"          : 3,
"line_padding_top"             : 3,
"overlay_scroll_bars"          : "enabled",

The font used for the code is “Operator Mono

You can also use the official Material Design monospace font “Roboto Mono” or “Fira Code”.

Contributing

This UI theme uses a custom compiler build on Gulp and JS. If you want to edit the UI you must first install the compiler:

  1. Install the PackageDev package to Sublime Text.

  2. Then create a new symlink for the subl command following this guide

  3. Install all the required packages:

$ npm install
  1. then run compiler and watcher by run:
$ gulp

You can now edit the source files under ./sources folder that will be compiled inside the root folder (don't edit compiled files).

Other Resources

App icon: Download the official Material Theme icon.

Official Portings

Material Theme was also ported to:

Color Schemes palettes

Color Default / Darker Lighter
Red #FF5370 #E53935
Pink #f07178 #FF5370
Orange #F78C6C #F76D47
Yellow #FFCB6B #FFB62C
Green #C3E88D #91B859
Pale Blue #B2CCD6 #8796B0
Cyan #89DDFF #39ADB5
Blue #82AAFF #6182B8
Purple #C792EA #7C4DFF
Violet #bb80b3 #945EB8
Brown #ab7967 #ab7967

Thanks

Thanks for all the contributors.

Check the video review by LevelUpTuts

Video review

IMAGE ALT TEXT HERE

Support on Beerpay

Hey dude! Help me out for a couple of :beers:!

Beerpay Beerpay