loading...
Cover image for Adding VS Code Theme to CodeSandBox

Adding VS Code Theme to CodeSandBox

dance2die profile image Sung M. Kim Originally published at slightedgecoder.com on ・2 min read

Have you ever wanted to match your CodeSandBox Editor Theme to match your Visual Studio Code Color Theme?

Well, you can.

It’s because of CodeSandBox uses Monaco (a VS Code editor engine) by default.

Let's make the magic ✨ happen~

πŸ‘£ Steps

Here are the steps to make it happen.

  1. Get VS Code Color Theme Settings
  2. Open CodeSandBox Preference
  3. Paste the Setting in CodeSandBox Preference modal box

Let’s do this πŸ’ͺ!

πŸ€ 1. Get VS Code Color Theme Settings

Let’s grab the color theme settings from VS Code.

I am using Cobalt2 theme on CodeSandBox, and will be updating it to use Fairy Floss theme on VS Code.

I found this wondeful theme (Fairy Floss) from this post.


From VS Code,
  1. show all commands by pressing Control+Shift+P
  2. Enter Developer: Generate Color Theme From Current Settings show all commands After executing the command, you will see a new tab, Untitled-1 popping up with Color Theme in JSON format. untitled-1 Now select all (Ctrl+A) and copy the content.

πŸ€ 2. Open CodeSandBox Preference

Click on β€œPreferences” gear βš™ button to open PREFERENCES modal box.
Click Preference
Custom VSCode Theme

πŸ€ 3. Paste the Settings

And now paste the VS Code Color Theme copied from the previous step in the Custom VSCode Theme text area.

You can now see that the theme has been updated globally.
result
Ok, now Enjoy the new Look & Feel 😎.

πŸ‘©β€πŸ­ Working Demo

Here is the video of steps above.

⚠ A Word of Caution

Note that the change is global.

That means, all previous SandBoxes (that’s what CodeSandBox calls each project) will be affected as well.

But I am sure that the default behavior is probably what you want, anyways πŸ˜›.

The post Adding VS Code Theme to CodeSandBox appeared first on Slight Edge Coder.

Discussion

pic
Editor guide
Collapse
jsmode profile image
Adam Modras

Super cool! Thanks for the walk through. Very helpful. How do you add VS Code extensions to CodeSandbox? Not just color themes, but things like the extension called vscode-styled-components?

Collapse
dance2die profile image
Sung M. Kim Author

Thanks Adam.

Ives van Hoorne has twitted that he got VSCode working few months ago but I am unable to use that on CodeSandBox yet.

I will dig around and post an update later


I saw a Reddit comment but it seems to be gone...πŸ˜‰