• Stars
    star
    811
  • Rank 56,215 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Custom CSS Plugin for Visual Studio Code. Based on vscode-icon

Custom CSS and JS

SPECIAL NOTE: If Visual Studio Code complains about that it is corrupted, simply click “Don't show again”.

NOTE: Every time after Visual Studio Code is updated, please re-enable Custom CSS.

NOTE: Every time you change the configuration, please re-enable Custom CSS.

Starting from extension version 6.0, to be compatible with VSCode 1.58, the CSS/JS files being applied will be inlined into VSCode's workbench.

Custom CSS to your Visual Studio Code. Based on robertohuertasm’s vscode-icons.

screenshot

Getting Started

  1. Install this extension.

  2. Add to settings.json:

        "vscode_custom_css.imports": [""]

    VERY IMPORTANT: Items in vscode_custom_css.imports must be URLs. Plain file paths are NOT URLs.

    • Windows File URL Example: file:///C:/Users/MyUserName/Documents/custom.css

      • The C:/ part is REQUIRED.
    • MacOS and Linux File URL Example: file:///Users/MyUserName/Documents/custom.css

    • See here for more details.

  3. Restart Visual Studio Code with proper permission to modify itself:

    1. Windows: Restart with Administrator Permission.

    2. MacOS and Linux: See instructions below.

  4. Activate command "Reload Custom CSS and JS".

  5. Restart.

Extension commands

As you know to access the command palette and introduce commands you can use F1 (all OSes), Ctrl+Shift+P (Windows & Linux) or Cmd+Shift+P (OS X).

  • Enable Custom CSS and JS: It enables custom CSS and JS URLs listed in “vscode_custom_css.imports”, an array containing URLs of your custom CSS and JS files, in your user settings.
  • Disable Custom CSS and JS: It will disable custom CSS.
  • Reload Custom CSS and JS: Disable and then re-enable it.

Windows users

In Windows, make sure you run your Visual Studio Code in Administrator mode before enabling or disabling your custom style!

Mac and Linux users

The extension would NOT work if Visual Studio Code cannot modify itself. The cases include:

  • Code files being read-only, like on a read-only file system or,
  • Code is not started with the permissions to modify itself.

You need to claim ownership on Visual Studio Code's installation directory, by running this command:

sudo chown -R $(whoami) $(which code)
sudo chown -R $(whoami) /usr/share/code

The placeholder <Path to Visual Studio Code> means the path to VSCode installation. It is typically:

  • /Applications/Visual Studio Code.app/Contents/MacOS/Electron, on MacOS;
  • /Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron, on MacOS when using Insiders branch;
  • /usr/share/code, on most Linux;
  • /usr/lib/code/ or /opt/visual-studio-code on Arch Linux.

Mac and Linux package managers may have customized installation path. Please double check your path is correct.

Disclaimer

This extension modifies some Visual Studio Code files so use it at your own risk. Currently, icons are not supported by the extension functionality that Visual Studio Code provides so this extension solves this issue by injecting code into:

  • electron-browser/index.html.

The extension will keep a copy of the original file in case something goes wrong. That's what the disable command will do for you.

As this extension modifies Visual Studio Code files, it will get disabled with every Visual Studio Code update. You will have to enable icons again via the command palette.

Take into account that this extension is still in beta, so you may find some bugs while playing with it. Please, report them to the issues section of the Github's repo.

Please, leave a review if you can, so the Visual Studio Code Team can know that this is a very demanded feature and, maybe, they can then provide a proper way to extend the IDE regarding icons and customizations soon enough. ;D

More file extensions will be supported shortly!

More Repositories

1

Iosevka

Versatile typeface for code, from code.
JavaScript
18,837
star
2

Sarasa-Gothic

Sarasa Gothic / 更纱黑体 / 更紗黑體 / 更紗ゴシック / 사라사 고딕
JavaScript
9,805
star
3

source-han-sans-ttf

A (hinted!) version of Source Han Sans
JavaScript
318
star
4

vsc-theme-verdandi

Another theme
JavaScript
69
star
5

vscode-iconset

Icon set for vscode-icons
67
star
6

idris-codegen-es

Optimized JS codegen for Idris
Haskell
54
star
7

eido

A text generator
JavaScript
53
star
8

patrisika

An AST Library
JavaScript
49
star
9

PatEL

The Patrisika Example Language
JavaScript
43
star
10

your-type

JavaScript
25
star
11

jk

A “lightweight” markup language with a powerful kernel beneath.
JavaScript
25
star
12

idris-dict

A Dict k v in Idris
Idris
15
star
13

vscode-theme-dolch

TypeScript
15
star
14

libspiro-js

JavaScript port of libspiro
JavaScript
13
star
15

vsc-theme-railgun

VSCode Theme Railgun
13
star
16

typo-geom

A Basic Geometric library for Type Design
TypeScript
10
star
17

dwtr

A text rendering utility
Rust
10
star
18

prompt

My PwSH prompt
PowerShell
8
star
19

vscode-theme-ellie

TypeScript
5
star
20

be5invis.github.io

Typeof.net side contents
HTML
5
star
21

spiro-js

(new) port of Raph's Spiro
TypeScript
4
star
22

markdown-it-mdeqn-be

TypeScript
4
star
23

primitive-quadify-off-curves

Arbittrary curve => TTF off-curves
TypeScript
3
star
24

typable

Typables and dynamic casting
TypeScript
3
star
25

neetdns

A nameserver that really finds the fastest address
JavaScript
2
star
26

b-spline-edit-experiments

B-spline editing experiments
TypeScript
2
star
27

eido-eqn

An equation layouting system for Eido
JavaScript
2
star
28

sublimetext-eido

Eido highlighting + build for Sublime Text 2
2
star
29

vuex-remote-experiment

JavaScript
2
star
30

Verdandi-Modern

A modern-style font
PowerShell
2
star
31

OTVAR-ZVAR-Table

Proposal of the ZVAR table
1
star
32

Necessaria

Ens necessarius Javascripti
JavaScript
1
star
33

s1-ime-prototype

IME core algorithm prototype based on Stage1st corpus
JavaScript
1
star
34

ot-cubic-boolean-extension

Draft for Cubic and Boolean extension for OpenType
1
star
35

sublimetext-moescript

Moescript highlight for Sublime Text
1
star
36

DxFontPreview

C++
1
star