Get the synth wave glow theme working for VS Code on Mac

synthwaveglow.md

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"
    ]
}

5. Quit VS Code and go to terminal so we can restart it with proper Permissions
6. 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

7. Should prompt you for your password

8. Reopen VS Code

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

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

@maribov managed to get this working on 10.15 after I realised I would also need to install the right font. I used this one: https://github.com/tonsky/FiraCode

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"
    ],

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

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

Love it!

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

Awesome.. Loved it..❤️🤩

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

this is also my first day on VSC lol :)

Thank you!! It works perfectly!

First try and working ! Thank a lot :)

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

Thank you so much!!

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]

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.

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.

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.

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

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

Noticed over on the original synthwave page the author managed to get the glow effect working without having to use the Custom CSS and JS plugin on the latest version. Haven't looked into it any further than that, and you still have to run code with superuser permissions at least once, which Code and/or Electron clearly have no intention of making easy, (seems counterproductive when by definition you can make it do whatever you want when you're the superuser), even setuid bits are no use, so I just delete the part out of the launcher script where it checks if you're UID 0 and run it with sudo -E. Could probably be rolled in somehow anyway... maybe I'll whip up a PR if I'm bored, but, I'm more busy than bored atm...

I had to wipe my Linux laptop and move to Ubuntu. To get this to work, I copied the CSS file code from Github and recreated the file in my Documents folder.

In case anyone is searching for an answer to do this "vscode_custom_css.imports": ["file:///home/{yourusernamewithoutcurlybrackets}/Documents/synthwave-x-fluoromachine.css"

Also, made the my username lowercase without spaces to make the filepath easy.

Thank you so much, i was searching for an hour how to make it work, and thanks to you i could do it, it works for me in linux PopOs distro Debian based, i just had to write in the settings.json for object "vscode_custom_css.imports":

"vscode_custom_css.imports": [
"file:///home/medimess/.vscode/extensions/webrender.synthwave-x-fluoromachine-0.0.9/synthwave-x-fluoromachine.css"
]
}

which means "file:///home/{Username}/.vscode/extensions/ ...etc"

This took me forever to find out but with Windows 10/11 users, your file path needs to include "C:"

So it should look like

file:///C:/Users/${username}/.vscode/extensions/${extension folder name}/${extensions css file name}.css

that really works for me, thank you very much!!!

In case anyone was wondering why they can't get the out of the box Synthwave '84 neon dreams command working on MacOS, you need to chown the application files a bit higher up than in the instructions in the snippet. sudo chown -R $(whoami) /Applications/Visual\ Studio\ Code.app/Contents worked for me, and so far doesn't seem to have broken anything. You could conceivably target a particular file to chown as well, but if you're on a single user system, this probably isn't a huge risk.

In case anyone was wondering why they can't get the out of the box Synthwave '84 neon dreams command working on MacOS, you need to chown the application files a bit higher up than in the instructions in the snippet. sudo chown -R $(whoami) /Applications/Visual\ Studio\ Code.app/Contents worked for me, and so far doesn't seem to have broken anything. You could conceivably target a particular file to chown as well, but if you're on a single user system, this probably isn't a huge risk.

This works.