Create a gist now

Instantly share code, notes, and snippets.

Embed
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,

@GeoffreyEmery

This comment has been minimized.

Show comment
Hide comment
@GeoffreyEmery

GeoffreyEmery Oct 30, 2016

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

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

@duard

This comment has been minimized.

Show comment
Hide comment
@duard

duard 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

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

@Hendrixer

This comment has been minimized.

Show comment
Hide comment
@Hendrixer

Hendrixer 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"

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"

@scotch83

This comment has been minimized.

Show comment
Hide comment
@scotch83

scotch83 Apr 26, 2017

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

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

@jason-covington

This comment has been minimized.

Show comment
Hide comment
@jason-covington

jason-covington Jun 8, 2017

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

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

@ghostffcode

This comment has been minimized.

Show comment
Hide comment
@ghostffcode

ghostffcode Jun 13, 2017

@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

@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

@tnchuntic

This comment has been minimized.

Show comment
Hide comment
@tnchuntic

tnchuntic Jul 26, 2017

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

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

@Joshbeyer

This comment has been minimized.

Show comment
Hide comment
@Joshbeyer

Joshbeyer Dec 18, 2017

Guessing this doesn't work anymore. Have tried on windows, and ubuntu. With the latest versions, and 1.11 on both

Guessing this doesn't work anymore. Have tried on windows, and ubuntu. With the latest versions, and 1.11 on both

@KDuverge

This comment has been minimized.

Show comment
Hide comment
@KDuverge

KDuverge May 11, 2018

im having issues trying to download the plugin, when i run the 'ext install vscode-custom-css'

im having issues trying to download the plugin, when i run the 'ext install vscode-custom-css'

@NikhilSaini38

This comment has been minimized.

Show comment
Hide comment

@Joshbeyer i agree, checked.

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