Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
VS code custom CSS for theme
.composite-title, .composite-title, .vs-dark .monaco-workbench>.activitybar>.content {
background-color: rgba(40, 44, 52, 1) !important;
}
.tabs-container, .tab, .tab.active, .title-actions, .tablist, .tabs-container, .tabs, .composite.title {
background-color: rgba(40, 44, 52, 1) !important;
}
.tab.active, .tab {
border-right: 0px !important;
border-left: 0px !important;
}
.tab.active {
border-bottom: 2px solid #FFFF00 !important;
}
.title.tabs.active, .tabs, .tablist, .tabs-container, .tab, .composite-title, .composite.title {
height: 60px !important;
}
.vs-dark .monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title.tabs:before {
border: 0px !important;
}
.title.tabs::before {
border: 0px !important;
}
.monaco-workbench>.part>.composite.title {
align-items: center;
}
.part.editor.monaco-editor-background, .part.panel.monaco-editor-background {
box-shadow: -11px 2px 25px -7px rgba(14,15,18,1);
}
.monaco-split-view .vertical {
background-color: rgba(40, 42, 52, 0.7);
}
span[title="Explorer"], .vs-dark .monaco-workbench>.part>.composite.title>.title-label span {
color: white;
}
/*icons*/
.action-item .action-label.explore {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M17.705 8H9s-2 .078-2 2v15s0 2 2 2l11-.004C22 27 22 25 22 25V13.509L17.705 8zM16 10v5h4v10H9V10h7zm5.509-6h-8.493S11 4.016 10.985 6H19v.454L22.931 11H24v12c2 0 2-1.995 2-1.995V9.648L21.509 4z' fill='#00BCD4'/%3E%3C/svg%3E") !important;
}
.action-item .action-label.search {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M19.23 4.095c-4.842 0-8.769 3.928-8.769 8.771 0 1.781.539 3.43 1.449 4.815 0 0-5.482 5.455-7.102 7.102-1.621 1.646 1.001 4.071 2.602 2.409 1.602-1.659 7.006-7.005 7.006-7.005a8.726 8.726 0 0 0 4.814 1.45 8.773 8.773 0 0 0 8.772-8.771c.001-4.844-3.927-8.771-8.772-8.771zm0 15.035a6.265 6.265 0 1 1 0-12.529 6.264 6.264 0 1 1 0 12.529z' fill='#FFEB3B'/%3E%3C/svg%3E") !important;
}
.action-item .action-label.git {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M27.459 14.902L17.02 4.463a1.517 1.517 0 0 0-1.089-.452c-.417 0-.793.157-1.089.452L12.594 6.71l2.549 2.549c.249-.112.522-.177.813-.177 1.106 0 2.002.896 2.002 2.002 0 .291-.064.565-.176.814l2.311 2.336c.25-.111.633-.234.923-.234 1.106 0 2 .911 2 2.016s-.894 1.969-2 1.969C19.911 17.984 19 17.234 19 16c0-.28.016-.462.119-.704l-2.373-2.374-.023.007v6.274A2.02 2.02 0 0 1 18 21.078c0 1.105-.878 2.016-1.984 2.016a2.053 2.053 0 0 1-2.031-2.031c0-.846.535-1.564 1.28-1.857l.001-6.25a1.996 1.996 0 0 1-1.147-2.659L11.564 7.74l-7.115 7.114a1.542 1.542 0 0 0 .001 2.178L14.89 27.55c.296.295.671.45 1.089.45.415 0 .796-.159 1.089-.45l10.391-10.471a1.541 1.541 0 0 0 0-2.177z' fill='#F44336'/%3E%3C/svg%3E") !important;
}
.action-item .action-label.debug {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cstyle%3E.icon-canvas-transparent{opacity:0;fill:%23f6f6f6}.icon-white{fill:#9C27B0}%3C/style%3E%3Cpath class='icon-canvas-transparent' d='M32 32H0V0h32v32z' id='canvas'/%3E%3Cpath class='icon-white' d='M17 19.488v4.248c0 .462.09 1.264-.373 1.264H15v-1h1v-3.19l-.173-.18c-1.453 1.205-3.528 1.248-4.67.108C10 19.578 10.118 18 11.376 16H8v1H7v-1.627C7 14.91 7.802 15 8.264 15h4.105L17 19.488zM14 9h-1V8h1.955c.46 0 1.045.22 1.045.682v3.345l.736.875c.18-.973.89-1.71 1.914-1.71.143 0 .35.014.35.04V9h1v2.618c0 .117.265.382.382.382H23v1h-2.233c.027 0 .042.154.042.298 0 1.025-.74 1.753-1.712 1.932l.875.77h3.346c.462 0 .682.583.682 1.045V19h-1v-1h-2.52L14 11.698V9zm2-5C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4zm10 12c0 2.397-.85 4.6-2.262 6.324L9.676 8.262A9.95 9.95 0 0 1 16 6c5.514 0 10 4.486 10 10zM6 16c0-2.398.85-4.6 2.262-6.324L22.324 23.74A9.961 9.961 0 0 1 16 26c-5.514 0-10-4.486-10-10z' id='iconBg'/%3E%3C/svg%3E") !important;
}
/*.action-item .action-label.extensions {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cstyle%3E.st0{fill:#3F51B5}%3C/style%3E%3Cpath class='st0' d='M12.9 47.1H30V60H0V0h25.7v12.9H12.9v34.2zm4.2-4.2h25.7V17.1H17.1v25.8zM30 0v12.9h8.6V8.6h12.9v12.9h-4.3V30H60V0H30zm17.1 47.1H34.3V60H60V34.3H47.1v12.8z' id='iconBg'/%3E%3C/svg%3E") 50% no-repeat !important;
}*/
  • Download and install the custom css and js plugin for vs code
  • create a css file somewhere on your machine, and get the full path
  • go back to vs code and open the settings (cmd + ,)
  • add a property called "vscode_custom_css.imports"
  • set the value to an array and add your full path to your css file:
"vscode_custom_css.imports": [
	"your/absolute/path/to/styles.css"
],
  • open the command list by (cmd + shift + p) and run the "Enable Custom CSS and JS"
  • open that css file in vscode
  • copy the css below and paste it in there and save it
  • hit (cmd + shift + p) for command lists
  • type "update css" and run the "Update Custom CSS and JS" .... command and then restart vs code when prompted to
    • you can also just open the DOM by going to "Help => Toggle Dev Tools" and hitting (cmd + r) to refresh the editor
  • download and install the "Atom one Dark" theme
  • the font is Operator Mono and costs monies if you want it
  • for the Icons, dowload the "Vs code icons" and the "material icons theme"

Enjoy,

IMPORTANT: Items in “vscode_custom_css.imports” should be URLs, instead of file paths. For local files, prefix it with “file://”.

duard commented Nov 6, 2016

For Ubuntu/Linux users :

#for vs code:
sudo chown -R $(whoami) /usr/share/code
#for vs code insiders:
sudo chown -R $(whoami) /usr/share/code-insiders
#if you want to check your folder's owner:
ls -la /usr/share/code
#if you want to rollback this permissions back to root:
sudo chown -R root /usr/share/code

captura de tela de 2016-11-06 17-05-46

Owner

Hendrixer commented Nov 17, 2016

@GeoffreyEmery actually file paths work just fine without the prefix! I'm currently using that approach now: "/Users/scott/path/to/file.css"

don't get how you get your cursor blinking like that yet :D

The background images are off center on mine.
screen shot 2017-06-08 at 8 32 00 am

@jason-covington the problem is that you're using the latest version of VS code. Some fixes in v1.12 and above are causing that error. Try using this version and disable auto update: here

Hi @Hendrixer I've seen your angular 2 tutorial the FREE ones... I've notice that you change some of the font styling on VSCode is it possible for me to copy that settings? :) I just like that setup where I can quick identify the functions and etc.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment