DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Change Cursor Colour in VS code ๐Ÿคฏ
Pushpak Chhajed
Pushpak Chhajed

Posted on • Updated on

Change Cursor Colour in VS code ๐Ÿคฏ

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

Alt Text

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,
Enter fullscreen mode Exit fullscreen mode

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
  ); 
}

Enter fullscreen mode Exit fullscreen mode

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,
Enter fullscreen mode Exit fullscreen mode

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

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.

image

Honourable Mentions

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

Thank You!

Top comments (12)

Collapse
 
kzlynn profile image
Kyaw Zayar Linn • Edited on

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

Collapse
 
pushpak1300 profile image
Pushpak Chhajed Author

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

Collapse
 
codesama profile image
Richunclekhalid

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

  1. 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,).
  2. 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

Collapse
 
saberglow profile image
Wali Ullah

hey man, awesome hack, loved it.

P.S: the link to uigradients website is broken, u might wanna fix that. cheers.

Collapse
 
pushpak1300 profile image
Pushpak Chhajed Author

Thanks for reporting.๐Ÿ˜€

Collapse
 
steminstructor profile image
STEMInstructor

Great, I'm sure gonna try it๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ˜Š๐Ÿ˜Š

Collapse
 
pushpak1300 profile image
Pushpak Chhajed Author

All the best!

Collapse
 
madza profile image
Madza

It's the little things that count the most โœจ

Collapse
 
pushpak1300 profile image
Pushpak Chhajed Author

Haha! Right,๐Ÿ˜‚

Collapse
 
quotcode profile image
Shivam Yadav

Great hack. Thanks for sharing it Pushpak : )

Collapse
 
pushpak1300 profile image
Pushpak Chhajed Author

Thanks!

Collapse
 
codesama profile image
Richunclekhalid

Here is a screenshot

Visualizing Promises and Async/Await ๐Ÿคฏ

async await

โ˜๏ธ Check out this all-time classic DEV post