Skip to content

Instantly share code, notes, and snippets.

@sbinlondon
Last active February 22, 2024 22:40
Show Gist options
  • Save sbinlondon/fad23be09f56a4b6ab0d990d3841f7de to your computer and use it in GitHub Desktop.
Save sbinlondon/fad23be09f56a4b6ab0d990d3841f7de to your computer and use it in GitHub Desktop.
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.
@ByteDigital123
Copy link

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
Copy link

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
Copy link

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

glowing

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

@paulyc
Copy link

paulyc commented Mar 4, 2020

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

@richandcreamy
Copy link

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.

@medimessarat
Copy link

medimessarat commented Mar 29, 2020

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"

@JimmyBringus
Copy link

JimmyBringus commented Feb 24, 2022

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

@Devid2005
Copy link

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

@wilrodriguez
Copy link

wilrodriguez commented Feb 22, 2023

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.

@LFBernardo
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment