Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Get the synth wave glow theme working for VS Code on Mac

Get the synth wave glow working for VS Code on Mac

These notes are pretty much the same steps as the two extensions list, it's just that I had to collate them together because neither seems to list it fully in the proper order.

  1. Install Synthwave ’84/Synthwave + Fluoromachine theme on VS Code (I used the Fluoromachine one)

  2. Install Custom CSS and JS Loader

  3. Command + Shift + P to open command palette > "Preferences: Open settings (JSON)"

  4. Add to the settings object this key, and the value is an array containing the path to the CSS file for your extension. On a Mac it should be the following:

{
    "vscode_custom_css.imports": [
    "file:///Users/${username}/.vscode/extensions/${extension folder name}/${extensions css file name}.css"
    ]
}

So for Synthwave + Fluoromachine on my Mac it's:

{
    "vscode_custom_css.imports": [
    "file:///Users/katesmac/.vscode/extensions/webrender.synthwave-x-fluoromachine-0.0.9/synthwave-x-fluoromachine.css"
    ]
}
  1. Quit VS Code and go to terminal so we can restart it with proper Permissions
  2. Type sudo chown -R $(whoami) PATH TO CODE where PATH TO CODE is actually the file path, and you actually type ${whoami} as well

So I typed exactly:

sudo chown -R $(whoami) /Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron - the back slashes in front of the space are important

6a. According to Custom CSS and JS Loader, if you are using 'Insiders Branch' then the VS Code file path might be: /Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron but idk what that means

  1. Should prompt you for your password

  2. Reopen VS Code

  3. Command + Shift + P > "Reload Custom CSS and JS"

  4. Restart VS Code one more time and hopefully you'll see the glow!

Notes to keep in mind:

  • SPECIAL NOTE: If Code complains about that it is corrupted, simply click “Don't show again”.
  • NOTE: Every time after Code is updated, please re-enable Custom CSS.
  • NOTE: Every time you change the configuration, please re-enable Custom CSS.
@swenson

This comment has been minimized.

Copy link

swenson commented Jan 4, 2020

Works for me on Ubuntu 19.10 with some small modifications:

  • Home directory is in /home instead of /Users
  • Change chown command to chown -R $(whoami) /usr/share/code

Thanks for the instructions; this is awesome!

@nykyrian

This comment has been minimized.

Copy link

nykyrian commented Jan 4, 2020

Works for me on Windows 10! Had to restart Code a few times.

@anchpop

This comment has been minimized.

Copy link

anchpop commented Jan 4, 2020

Worked fine for me on Windows 10 and I didn't have to mess around with step 6 at all.

@cawfree

This comment has been minimized.

Copy link

cawfree commented Jan 4, 2020

Worked a charm, no difficulty whatsoever. Thanks, Kate! (MacOS 10.14.6)

@mikesigs

This comment has been minimized.

Copy link

mikesigs commented Jan 4, 2020

Worked for me too on Windows. I just followed the instructions from the two extensions and things worked fine.

@muhsalaa

This comment has been minimized.

Copy link

muhsalaa commented Jan 4, 2020

works fine for me on ubuntu 18.04, any idea how i can change the color of comment in .js file? the color is blue, same with variable color

@petercr

This comment has been minimized.

Copy link

petercr commented Jan 5, 2020

@muhsalaa if you go and open up the css file then you can alter any of the colors. Then just save it and reload 👍

@ar2zee

This comment has been minimized.

Copy link

ar2zee commented Jan 5, 2020

Thank you ! ❤️

@Cavdy

This comment has been minimized.

Copy link

Cavdy commented Jan 5, 2020

Works for me on Ubuntu 19.10 with some small modifications:

  • Home directory is in /home instead of /Users
  • Change chown command to chown -R $(whoami) /usr/share/code

Thanks for the instructions; this is awesome!

This worked for me... I use Kubuntu 19.10

@gideonb234

This comment has been minimized.

Copy link

gideonb234 commented Jan 5, 2020

Works for me on Ubuntu 19.10 with some small modifications:

* Home directory is in `/home` instead of `/Users`

* Change `chown` command to `chown -R $(whoami) /usr/share/code`

Thanks for the instructions; this is awesome!

+1 to this as well, didn't realise someone else wrote it in the comments already

@muzakparov

This comment has been minimized.

@MrMMatricks

This comment has been minimized.

Copy link

MrMMatricks commented Jan 5, 2020

Got it working on windows without any problems! This is so nice! :]
Where do I find a docu for all the magic CSS values? I want to change the selection color of the intellisense popup, I can't see what is selected.

@Karlbovsky

This comment has been minimized.

Copy link

Karlbovsky commented Jan 5, 2020

Worked on Windows 10 (1903) just by doing the first 4 steps and a restart 👍
Loving it!! 💟

@rfontoura

This comment has been minimized.

Copy link

rfontoura commented Jan 5, 2020

Worked here on Linux Mint. Thanks, @muzakparov!

@danieldebuhr

This comment has been minimized.

Copy link

danieldebuhr commented Jan 5, 2020

No problem on windows 10 1903.
Step 5:

"vscode_custom_css.imports": [
    "file:///C:/Users/username/.vscode/extensions/webrender.synthwave-x-fluoromachine-0.0.9/synthwave-x-fluoromachine.css"
]

Skipped step 6 and 7.
Aside from the fact that this is very hard to read, my vscode now promts me with a warning about a corrupt install??

@Razzeee

This comment has been minimized.

Copy link

Razzeee commented Jan 5, 2020

For struggling arch/manjaro users be5invis/vscode-custom-css#76 (comment)

@nocivus

This comment has been minimized.

Copy link

nocivus commented Jan 5, 2020

Worked perfectly on Mac. Thank you!

@fwip

This comment has been minimized.

Copy link

fwip commented Jan 5, 2020

This worked great on my Mac (catalina)! I messed up typing the settings a few times. In hindsight, I should have just copy-pasted and changed my user name. Thank you <3

@amirse

This comment has been minimized.

Copy link

amirse commented Jan 5, 2020

Works great in Fedora as well. You can re-chown the program itself to root after it works, btw. It felt odd to me to keep files in /usr/share owned by a regular user.

@Gordin

This comment has been minimized.

Copy link

Gordin commented Jan 5, 2020

Worked for me on Windows 10 :)

Step 5-8 on Windows would just be Right click on VS Code shortcut or find VS Code in Start Menu and Right click on that -> Click Run as administrator

OR to permanently allow Enabling/Disabling until next Update:
5. Find Install directory of VS Code with Right click → Open file location (repeat if that leads to a shortcut as well)
6. Go up one directory and Right Click the VS Code folder → Properties
7. Go to Security Tab → Click "Edit..." Button → Select your User (or "Users" if your user isn't in the list)
8. Check all the "Allow" Boxes → OK → OK
9. Open VS Code

This would be if VS Code is installed for all Users. VS Code can also be installed just for the current User in which case you probably don't need this. I'm guessing that's why @anchpop didn't need step 6.

Side note: I have my Caps Key remapped to Esc and apparently running VS Code as Administrator makes it so VS Code will grab the Key before any remapping program can intercept it, so I spent an hour trying to fix my remapping before realizing it's just broken because of running as Administrator...

@Naw-alhmw

This comment has been minimized.

Copy link

Naw-alhmw commented Jan 5, 2020

Up & running like a charm on my Windows 10 x64 OS! 🥰

Problem + Solution:
On the first trial, I had the font color altered with no background image nor a glow. I gave it permission to run as an Administrator, but still, the same issue was looping. Apparently it was that I missed writing out " file:/// " before the CSS file in my settings.json.
On a side note, I did all steps except steps 6 & 7.

Thanks, @sbinlondon!!🔥🤘🏼

@paulyc

This comment has been minimized.

Copy link

paulyc commented Jan 6, 2020

tl;dr it's color coordinated

Haha well it took me a while to get all the steps in the right order, and quite a bit of trial and error, like setting up a soft PBX minus a few hours, but it was worth the effort in the end. Actually much more readable than I thought it would be too, no really I think this is going to be my new universal theme. The glow just adds a subtle hint of emphasis, which is perfect for me as a substitute for italics, because I do not find them very readable en masse and always turn them all off first thing.

And, I was already using night owl, which is pretty similar in terms of colors, mainly providing contrast along an equal-brightness-saturation curve from red to sea green to sky blue to to violet without any sudden shifts in brightness or to the exact opposite side of the color wheel like so many dark themes (see that one on the Custom CSS and JS extension page, jumping all over the place and between ugly colors too like salmon, gold, and peat moss, it's dreadful! glad it can be used to install a better theme!) guessing that's not gonna work too well if you're dichromatic on the wrong side though.

@dkruythoff

This comment has been minimized.

Copy link

dkruythoff commented Jan 6, 2020

Thanks! This looks epic!
BTW, I got it to work without changing permissions.

@MrMMatricks

This comment has been minimized.

Copy link

MrMMatricks commented Jan 6, 2020

Fixed the intellisense popup box for me it's in the extention folder, in the theme folder in the json this value:
"list.focusBackground": "#6A549099" just change it to a brighter color and restart. :]

@oyeyinkaojora

This comment has been minimized.

Copy link

oyeyinkaojora commented Jan 6, 2020

it still not working on my win 10

@taeuba

This comment has been minimized.

Copy link

taeuba commented Jan 6, 2020

Got it to work on VS Code Insiders on Windows 10. Step 6 is not necessary, I just right-clicked and ran as Administrator, then completed steps 9 and 10.

@oyeyinkaojora

This comment has been minimized.

Copy link

oyeyinkaojora commented Jan 6, 2020

Got it to work on VS Code Insiders on Windows 10. Step 6 is not necessary, I just right-clicked and ran as Administrator, then completed steps 9 and 10.

this helped me thanks

@shareazc

This comment has been minimized.

Copy link

shareazc commented Jan 6, 2020

Worked like a charm on Windows 10, like @danieldebuhr said, I was able to get it up and running without steps 6 and 7.

Love the colors and glow effect. This + Indent Rainbow is amazing

@paulyc

This comment has been minimized.

Copy link

paulyc commented Jan 6, 2020

For struggling arch/manjaro users be5invis/vscode-custom-css#76 (comment)

This is what happened to me using the official tarball binaries on Linux as well. My user is even in the root group and I have +setgid and group+w on every dir and file in /opt to try to avoid things like this, but no dice this time. You really have to own it. [Sounds like something out of the middle management phrasebook, don't it] Tricksy hobbitses...

@ahcarpenter

This comment has been minimized.

Copy link

ahcarpenter commented Jan 6, 2020

working on OS X 10.14.6

thanks a ton for this!

@maribov

This comment has been minimized.

Copy link

maribov commented Jan 7, 2020

Is anyone having trouble with this on OSX 10.15? can't get the glow to work!

@kibernick

This comment has been minimized.

Copy link

kibernick commented Jan 7, 2020

This is amazing, thank you! (works on Catalina)

@porkostomus

This comment has been minimized.

Copy link

porkostomus commented Jan 8, 2020

One thing that bothered me enough to fix was the debugging squiggles not quite popping out enough. My changes were to the following lines in the synthwave-x-fluoromachine.json file in the themes directory:

"editorError.foreground": "#fc199a",
"editorWarning.foreground": "#fc199a",

EDIT:
Also fixed the selection highlight issue:

"editor.selectionBackground": "#ffaa007a",
@st-h

This comment has been minimized.

Copy link

st-h commented Jan 9, 2020

@maribov managed to get this working on 10.15 after I realised I would also need to install the right font

@aa-ahmed-aa

This comment has been minimized.

Copy link

aa-ahmed-aa commented Jan 10, 2020

Work like a charm 👍 on Ubuntu 18.04.3
Note:-
the path for the CSS file in the vscode settings should start with /home not ~/
in my case the full path is

 "vscode_custom_css.imports": [
        "file:///home/ahmed/.vscode/extensions/webrender.synthwave-x-fluoromachine-0.0.9/synthwave-x-fluoromachine.css"
    ],
@miguellista10

This comment has been minimized.

Copy link

miguellista10 commented Jan 11, 2020

Hey guys any of you have tried on Kali Linux? If so would you mind to help me?

@miguellista10

This comment has been minimized.

Copy link

miguellista10 commented Jan 11, 2020

Got it working! thanks alot @sbinlondon this is so beautiful and focusable!

@MISRV001

This comment has been minimized.

Copy link

MISRV001 commented Jan 11, 2020

Love it!

@pavelozerov

This comment has been minimized.

Copy link

pavelozerov commented Jan 15, 2020

Hi @sbinlondon
Thanks for a clear guide :)
But is there any chance to get rid of the message that VS Code is corrupted?
I mean, I clicked "Don't show it again", but still it's not a proper solution, I guess and it's a bit annoying...

@Raalzz

This comment has been minimized.

Copy link

Raalzz commented Jan 15, 2020

Awesome.. Loved it..❤️🤩

@jayarrrr

This comment has been minimized.

Copy link

jayarrrr commented Jan 15, 2020

having a bit of trouble finding out where to put the
"vscode_custom_css.imports": [""], "vscode_custom_css.policy": true,
found in the Custom CSS & JSS Loader

@jayarrrr

This comment has been minimized.

Copy link

jayarrrr commented Jan 15, 2020

this is also my first day on VSC lol :)

@KSSwimmy

This comment has been minimized.

Copy link

KSSwimmy commented Jan 16, 2020

Thank you!! It works perfectly!

@davidvenin

This comment has been minimized.

Copy link

davidvenin commented Jan 20, 2020

First try and working ! Thank a lot :)

@paulyc

This comment has been minimized.

Copy link

paulyc commented Jan 21, 2020

Not even exaggerating, this theme improves productivity 300%!

[Not a paid actor, actual user testimonial. Results may vary.]

[Honorable mention to ES6 async/await in Node, what a Godsend. Of course it's just syntactic sugar for promises which are themselves syntactic sugar for callbacks, but syntactic sugar means I can pretend they just don't exist, unless I forget an await and get an UnexpectedPromise instead.]

@sirgalleto

This comment has been minimized.

Copy link

sirgalleto commented Jan 21, 2020

Thank you so much!!

Screen Shot 2020-01-21 at 4 47 50 PM

@paulyc

This comment has been minimized.

Copy link

paulyc commented Jan 22, 2020

Alright WIP "coming soon" (read before "Winds of Winter"): VS Code without the super user warnings, without the corruption notice, in fact, without any of the restrictions that necessitated all this jumping through hoops as the superuser in the first place just to get a little CSS working. To be fair they have to be worried about xss attacks etc in some environments that code is running but my machine is not one of them, yeah maybe in theory it could happen on my machine, but the simple fact is I do not care one iota if it does, cause I can always go download all my data back out of the cloud, MS as a professional shop cant take that attitude. [One of the few advantages of being unemployed: the luxury of not having to worry about the customers, unfortunately it is far outweighed by the the downside that the customers do in fact pay all of the bills so I can't say I recommend it]

@paulyc

This comment has been minimized.

Copy link

paulyc commented Jan 23, 2020

https://github.com/paulyc/vscode/compare/master...paulyc:paulyc/auto-sxf?expand=1

Well it's a start, I got rid of all the error messages and permissions issues anyway.
But I admittedly have no clue how to work this build system so I'm still trying to figure
out how to get it to load the CSS with no user intervention. But, as I facetiously noted before,
electron and its build system take up an absolutely absurd amount of RAM and I can't even have
Chrome or Firefox open when I build or it runs out of RAM so I've had enough of that for the day!

But, if anyone more familiar with node-on-the-desktop and better endowed with RAM knows any of those
magical incantations to keep the build process and the theme engine happy, im open to PRs,
or you can simply take what you want of my changes if theyll help. Little too wary of getting an
earful about somebody's sacred cow or CSRP or some kind of node-ecosystem-javascript-security stuff
I'm not getting paid nearly enough to listen to, so I'm not sure I really want to make a binary build
of this particular beast or try to support it at all, but if you like, have at it!
Not sure what's so bad about CMake that the world needs all of these awful RAM hogging GC languaged
build systems, I mean if you went back in time to 2000 and told them we'd be building desktop apps
written in JS with a build system written in JS they'd never have believed you, or indeed that such apps would build
or work at all. It's like autotools was so bad that everyone's still making up for lost time creating new build systems,
but "better than autotools" ain't saying much.

@ByteDigital123

This comment has been minimized.

Copy link

ByteDigital123 commented Feb 12, 2020

My VSCode just updated (1.42.0) and disabled this theme;

I went to go into my settings.json and add this line

"vscode_custom_css.policy": true

and then reload my custom CSS.

@richandcreamy

This comment has been minimized.

Copy link

richandcreamy commented Feb 14, 2020

If you're a complete newbie to VS Code like I am, the code goes between the same curly brackets as anything else already in the JSON file. If you have an "expected end of file" error, that fixed it for me.

@colabottles

This comment has been minimized.

Copy link

colabottles commented Feb 18, 2020

This is terrific! Thank you @sbinlondon for doing this! Had no problems getting this to work on OS 10.15.3.

glowing

@laurentdebricon

This comment has been minimized.

Copy link

laurentdebricon commented Feb 27, 2020

how do you have the background color also for the terminal and file tree ?
ok found it
"workbench.colorCustomizations": {
"sideBar.background": "#27083d",
"terminal.background" : "#27083d"
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.