Skip to content

Instantly share code, notes, and snippets.

@Hendrixer
Last active March 3, 2024 14:29
Show Gist options
  • Star 47 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save Hendrixer/7a250a2be529cda8939de8305c9a85a1 to your computer and use it in GitHub Desktop.
Save Hendrixer/7a250a2be529cda8939de8305c9a85a1 to your computer and use it in GitHub Desktop.
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
Copy link

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

@duard
Copy link

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
Copy link
Author

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

@scotch83
Copy link

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

@jason-covington
Copy link

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

@ghostffcode
Copy link

@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
Copy link

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
Copy link

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

@KDuverge
Copy link

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

@NikhilSaini38
Copy link

@Joshbeyer i agree, checked.

@a10k
Copy link

a10k commented Oct 17, 2018

Works fine on windows (October 2018)

@pBorak
Copy link

pBorak commented Nov 28, 2019

@Hendrixer do you have your latest vscode theme settings somewhere up to share (that you are using on GraphQl courses on FEM)?

@dxps
Copy link

dxps commented Jul 19, 2020

I ended up with a simpler approach for my specific need (to add some shadow to the documentation popup):

  1. Added at the end of the file /Applications/Visual Studio Code.app/./Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css file this line .monaco-editor .monaco-hover { box-shadow: 0px 0px 30px 10px #345052; }

  2. Installed Fix VSCode Checksums extension to get rid of the installation is corrupted message.

  3. Ran Fix Checksum: Apply action (cmd/ctrl+shift+p and type/find it). As instructed in the result output, restart VSCode.

The (visual) result is:
image

Hope it helps.

@xi1570-krupeshanadkat
Copy link

I am getting this warning : Installation appears to be corrupt [Unsupported]

@dxps
Copy link

dxps commented Aug 30, 2020

@krupeshanadkat

I am getting this warning : Installation appears to be corrupt [Unsupported]

Did you installed also that Fix VSCode Checksum extension as mentioned above?
Ran the action? (btw: I just updated the notes above to include this)
Also restart VSCode at the end.

@septst
Copy link

septst commented May 6, 2021

I am also getting the same error. "Installation appears to be corrupt [Unsupported]". Running "Check Sum Apply" fixes it but still the custom styles are not getting loaded.

@Azzawie
Copy link

Azzawie commented May 11, 2021

Many thanks to you @dxps, btw. Which font are you using in the pic?

@septst
I faced the same issue; you need to quit the vscode and start it again.

@dxps
Copy link

dxps commented May 11, 2021

@MwMaki The font is M+ 1mn. Finally, I found the monospaced font that I could read and look at it forever. 😊
Tried and bought many of them until eventually I happily got settled on this lovely font.

@magicdawn
Copy link

magicdawn commented Jul 10, 2021

I have make a cli for MacOS + VSCode (normal version, not Insiders, assume installed in /Applications/Visual Studio Code.app)

run with this

# install cli
$ npm i vsc-custom-css -g

# add css to vscode
$ vsc-custom add ./local.css # or less/sass

# or remote url
$ vsc-custom add 'https://gist.githubusercontent.com/Hendrixer/7a250a2be529cda8939de8305c9a85a1/raw/57f491e864c58c852b69619b58b81cb4df5c257e/editor.css'
# run multiple times `add` will update the content, do not worry about that

features

  • update & manage using vsc-custom ls
  • auto patch checksum, use same code from the vscode fix-checksum extension.
  • auto sudo detect, if program has no persission for /Application/Visual Studio Code, this cli will use sudo-prompt to chown to current user
  • https://github.com/magicdawn/vsc-custom-css-cli

@mk-saadi
Copy link

can you tell me which css selector you used to to style this buttons:
image

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