Skip to content

Instantly share code, notes, and snippets.

@cooljl31
Forked from sbinlondon/synthwaveglow.md
Created January 5, 2020 21:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cooljl31/148707d121199b236a4baa418e993d9a to your computer and use it in GitHub Desktop.
Save cooljl31/148707d121199b236a4baa418e993d9a 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment