Change Cursor Colour in VS code 🤯

#vscode #javascript #css #design

I’ve been using VSCode for almost 2 years now and I like it so much. I’m sure that you like it too. But I decided that it was time to customize it a bit more. I will show you how to change cursor colour in VScode.

VSCode is an electron application. So you can change the CSS and JS way you want in VSCode for that you need one extension called "Custom CSS and JS Loader".

After installing the extension follow these steps to change the colour of the cursor.
1) Add this settings into settings.json.

"editor.cursorWidth": 3,
"vscode_custom_css.imports":[""],
"vscode_custom_css.policy": true,

2)Create one CSS file into your machine and add the following property to that CSS file.

Feel free to choose any gradient colour you want from uiGraients and paste into the '.monaco-editor .cursors-layer .cursor ' selector.

.monaco-editor .cursors-layer .cursor {
  background: #12c2e9; 
  background: -webkit-linear-gradient(
    to top,
    #f64f59,
    #c471ed,
    #12c2e9
  ); 
  background: linear-gradient(
    to top,
    #f64f59,
    #c471ed,
    #12c2e9
  ); 
}

3)Change the file location for 'vscode_custom_css.imports' in the settings.json

  "editor.cursorWidth": 3,
  "vscode_custom_css.imports": ["file:///home/pushpak1300/Documents/vscode.css"],
  "vscode_custom_css.policy": true,

4)Type 'CMD +SHIFT +P' to toggle command palette and type 'Reload Custom CSS and JS' to apply settings.

5)Hooray!

If all goes well, you should have the gradient cursor in vs code.

If u have any questions please let me know in comments.

Honourable Mentions

Don't forget to check out this course if you want more cool feature.

Vscode 4.5 hours course for JavaScript, Python & PHP

𝒮𝒶𝓇𝓉𝒽𝒶𝓀 📨 ・ Sep 15 '20 ・ 1 min read

#vscode #php #javascript #python

Thank You!

Top comments (12)

Kyaw Zayar Linn • May 27 '21 • Edited

I have trouble with giving file path. I gave the path juz like you but it doesn't work.
When I reload custom css and js, it shows the error message 'cannot load path, skipping'

"files:///D:/vscode_setting_file/vscode.css"

pls tell me how to give file path to json setting. Much thanks <3

Pushpak Chhajed • Jun 1 '21

"vscode_custom_css.imports": ["file:///home/pushpak1300/Documents/vscode.css"],

Richunclekhalid • Nov 24 '21

I got to stage 3 and things went bad from there.

Must I use the exact file location that you gave? (because i keep getting the error message "cannot load path, skipping" When I reload custom css and js,).
If yes, do i have to create a .css file with the title: vscode.css? with the path starting from :home/pushpak1300/Documents/vscode.css

p.s. my file path goes like: file:///Users/khale/MySpace/VSWorkspace/Aurora/cursor.css