material-theme / vsc-material-theme

Material Theme, the most epic theme for Visual Studio Code

Material Theme

Original colors, original taste.

Table of contents

The most epic theme meets Visual Studio Code.

• Material Theme
  • Table of contents
  • Getting started
    • Installation
  • Activate theme
  • Set the accent color
  • Override theme colors
  • Recommended settings for a better experience
  • Official Portings
  • Want to use the legacy version?
  • Contributors
  • Backers
  • Sponsors

Getting started

You can install this awesome theme through the Visual Studio Code Marketplace.

Installation

Launch Quick Open:

• Linux Ctrl+P
• macOS ⌘P
• Windows Ctrl+P

Paste the following command and press Enter:

ext install equinusocio.vsc-material-theme

And pick the one by Mattia Astorino (Equinusocio) as author.

Activate theme

Launch Quick Open:

• Linux Ctrl + Shift + P
• macOS ⌘ + Shift + P
• Windows Ctrl + Shift + P

Type theme, choose Preferences: Color Theme, and select one of the Material Theme variants from the list. After activation, the theme will set the correct icon theme based on your active theme variant.

Set the accent color

Launch Quick Open:

• Linux Ctrl + Shift + P
• macOS ⌘ + Shift + P
• Windows Ctrl + Shift + P

Type material theme, choose Material Theme: Set accent color, and pick one color from the list.

Override theme colors

Learn how to customize every part of this theme by using Visual Studio Code API. Read more.

Recommended settings for a better experience

{
    // Controls the line height. Use 0 to compute the lineHeight from the fontSize.
    "editor.lineHeight": 28,
    // Enables font ligatures
    "editor.fontLigatures": "'ss01','ss05','dlig'",
    // Controls if file decorations should use badges.
    "explorer.decorations.badges": false
}

Official Portings

You can find all the official portings and resources here.

Want to use the legacy version?

If you're looking for the deprecated Community Material Theme you can find it here. This version has been deprecated and removed from the official marketplace.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

---

Copyright © 2019 Mattia Astorino & Alessio Occhipinti

vsc-material-theme's Issues

Text color and panel background the same

If you use something like Vintageous this is how the command panel looks.

This is how it looks with another theme for comparison.

Fix html class="" and attributes name colors

Please use regular install procedures through package manager

Suggestion: Publish to PackageControl

It would be nice to be able to install the theme from packagecontrol.io.

Weird colors for .php files

All files seem to use a coherent color scheme (with the exception of .js files but I'm assuming it's because of Javascript Ultimate) but .php files:

Current indent guide is not highlighted

When I enable highlighting active indent guides, there is no highlight:

In the screenshot above, you can see the indent guides. With the draw_active setting, it should highlight the indent guides according to your cursor position, like this (notice the gray indent line in the lower part):

In both screenshots, I have my cursor at the setImmediate function.

Here is the indent guide setting to enable this feature:

{
  "indent_guide_options": [
    "draw_normal",
    "draw_active"
  ]
}

Message box can't be seen

Great theme. Just one thing I've noticed -

The gist plugin https://github.com/condemil/Gist allows you to create a gist from the file you are working on, e.g. "cmd+shif+p -> gist: create public gist" will bring up a text box at the bottom of the screen. However with this theme that text box is not visible.

Rename dialog box is partially hidden

While renaming files, the rename box seems to be for most part obscured by the status bar at the bottom. Typing blindly works, but I cannot see any of the typed text. See screenshot below (the white strip is the rename dialog box).

Using latest develop branch and the standard theme (not the darker one). Thanks!

Windows Test

Normal View

Find Panel

Find and Replace

Find in files...

Go-to

Switch Project

Control Panel

Missing icons

This theme looks so pretty and cool ! Please fix this small error. After installing it i got some missing icons . Thank you !

Fix expandend forder color for label when !bold_folder_labels

Find in all files isn't fully visible on mac

Thanks for this theme!
The fields in the "find in all files" function are too big so not all three of them are visible, on mac yosemite.
http://i.imgur.com/6yG1Bsu.png

Highlight current line

Sorry for complaining.. seriously you have an awesome theme and I'm feeling like a baws while using your material develop theme!

I have Highlight current line enabled in sublime settings (it highlights the current line so you can find your code back fast and if you are working with code from a spaghetticode programmer it makes the whole line more readable) . The small design problem here is that the contrast and tint between the background and the line-highlighter is just to big. can you if you have time and feel the same about it make a more subtle color-contrast on the highlighted line?

example here:

thanks!

Atom support

Please!

Please change the go to anything menu (ctrl+p) to be less bright

I haven't tried the latest version, but I hope this doesn't stay this bright. Destroys the eyes.

Doesn't Work with Advandced new File

Hell I use the Plugin called "Advandced New File" where I press ctrl+alt+ n to open up a dialog box at the bottom. In Material design i looks like the following whilst in other themes it looks normal.

Other Theme :
http://imgur.com/6HVtPgc

Material Theme :
http://imgur.com/3cvNUIO

Thank you for the awesome theme.

Duplicate bar is broken

When renaming a file, the field is obscured by the footer.

note the footer is above the input where you can rename the file

Theme won't load in ST3 Build 3083 (OSX)

So currently running ST3 Build 3083, on OS X 10.10.3

Follow instructions on the github page and nothing loads, error as follows:

I can get the Color Scheme to work by unzipping Color Scheme - Default.sublime-package, and adding the Material Theme .tmTheme files to the ZIP archive, re-compress and restart ST3. At this point the color scheme loads fine (from what I can tell.)

I can't seem to find a way to get the Theme itself to load, I have tried adding "theme": "Material-Theme.sublime-theme", to the User preferences, I have tried setting an absolute path (/Packages/material-theme/Material-Theme.sublime-theme) etc... to no avail. Currently it looks like this:

Please advise.

Different Colours Seen on my Windows Machine

When I installed this theme in my personal laptop, I was not able to see the one I saw in my office laptop. Its completely different.

I am almost sure this is the not the colors you meant. Do you think otherwise ? Is this a problem of my home laptop color setting or the setting of the plugin itself ?

UX: Have rename/find/other similar panels cast shadows?

Currently it is very hard to tell where the rename, find/replace or other similar bars that appear at the bottom of the window end.

Maybe, if possible, have them cast shadows...? Or add other, distinctive border?

Doing so might also help others try to move the border up to fix #23 or #34 themselves before they submit another bug.:)

Add preview img to readme

Maybe you will wait with this intill your done? But for now i would enjoy the dribble pictures added to the readme here on GitHub.

I am so hyped about this theme!

No 'loading' images?

Hello,

before pull request, when loading big folders via lan, I saw the 'loading' image, but now it is gone.
Maybe I am missing something?

Thanks

ability to change the "highlight line " color

can you please provide a setting to change the current line highlight color , please?

thanks
With Regards
Gagan Janjua

UX: "All tabs" button is difficult to click

On the right side of the tab bar, there is a vertical three-dot button to reveal all of the tabs I have currently open. This button is difficult to click - it feels as if the width of the button is only a few pixels.

It would be a great usability improvement if the button's click range were wider.

This button I have in mind.

Light version

If I get this up and running I would be happy to help out with a light version!

Current position not visible on minimap

I know this is under active development so you might already know, but just in case...

The current position in a file is not visible on the minimap. It would be great if it were.:)

More from Material Design guidelines

I believe one of the main recommendations of Google on their Material Design guidelines is to use motion to convey meaning and provide feedback on most actions. It'd be good to have some here. It feels kind of lacking animations when switching tab, showing & hiding the sidebar or the minimap or the search fields, popping the command palette...

Also, a little more contrast with elevation (basically just box shadows) could bring something. For example the command palette very well designed in this sense!

Syntax Highlight improvements

I guess, it's a matter of taste, but I would prefer more distinctive lines.. just a opinion, don't take me bad, sir.

New Folder textbox is not visible

I am on windows 7 and using SideBarEnhancements plugin for sublime text3
When I select the new folder menu item, the input box does appear but its not entirely visible.

Selecting folders

In this picture: bootstrap, config, database folders are selected!

Here's another picture, using the default theme:

Doesn't play nice with SideBarEnhancements

All SideBarEnhancements functions like "duplicate" won't work as expected.

https://github.com/titoBouzout/SideBarEnhancements

Color scheme updates for babel/ES6

Would be awesome to update the scheme to better handle ES6/Babel-flavored Javascript. Oceanic Next seems to be one of the few that does this properly: https://github.com/voronianski/oceanic-next-theme

folders sidebar text color too dark

the text color is too similar to background color, it is hard to see

Check for update - OK button has same colour as background

Not sure if this is by design...

The OK button on the "Check for update" dialog box is either fully transparent or has the same background colour as the rest of the dialog box, making it somewhat hard to spot. Hovering over the button highlights it, so that's ok.

Dirty tabs are not distinguished

Another "possibly by design" bug report from me.:)

With the default theme, Sublime distinguishes between opened tab and "dirty" tab (a file I single-clicked, not double-clicked) by making the tab's title italic.

This tells me that if I click on a different file in the sidebar, the file will open in the same tab. I think some kind of distinction should be provided here, too.

Making the text italic might be an option, another one would be to use a less bright blue variant of that tab underline. I frequently felt that just the italic text alone is a weak distinction...

What do you think?

Sublime Find Panel Not Showing in the Right Postion

screenshots

can you add some screenshots to the readme?

thxx!

Screenshots in README

Would love to get a couple screenshots in the README. Don't want to install it without seeing what it looks like!

Problem when apply color schema

Hello,

when I try to change color schema to:
"color_scheme": "Packages/material-theme/schemes/Material-Theme.tmTheme",

The colors of Settings - User are chaged (after I click save), but then they are reverted right aray, and after few moments, the schema is back to previous...

Any ideas?

Weird red line in the 2 columns layout view

I just wanted to know if this red line is supposed to be that way or not. It just feels weird :/

Issues with find & replace and new file panel

It might be my configuration, but I have layout issue with find & replace and new file panel as shown below.

New File

Find & Replace

Support for Retina

Currently image assets such as the folder icons are blurry in retina devices.
Not sure if this is possible, but would add to the polish of this beautiful theme!

Problem with Emmet write as you go feature.

Hello. Theme is awesome but, there seems to be a problem with the Emmet plugin.
When you enter ctrl + alt + enter the field is somehow hidden or not entirely visible.

Expanded folder label color

The color label of expandend folder doesn't highlight

Dedicated website

Make a presentation website for the theme

overlay scroll bars disabled

Hi ,
I have disabled overlay scroll bars, restarted ST 3. but the scrollbars keep working as if that option is set. Is it something that is happening only for me ?

Thanks

Error after initializing theme

Hi,

I'm getting error when I'm trying to load this theme
-"Error loading colour scheme
Packages/material-theme/schemes/Material-Theme.tmTheme: Unable toopen Packages /material-theme/schemes/Material-Theme.tmTheme"

Scrollbar graphic glitch

Hovered scrollbars become black when overlay_scrollbars is set.

visual issues

Not sure if I did something wrong, but after install I get a lot of strange visual artifacts:

http://cl.ly/image/3p14070N3m1L