Adding VS Code Theme to CodeSandBox
It's because of CodeSandBox uses Monaco (a VS Code editor engine) by default.
Follow along to make the magic ✨ happen~
Here are the steps to make it happen.
Let's do this 💪.
🍀 1. Get VS Code Color Theme Settings
From VS Code,
- show all commands by pressing Control+Shift+P
- Enter Developer: Generate Color Theme From Current Settings
[caption id="attachment_1091" align="aligncenter" width="643"] show all commands[/caption]
After executing the command, you will see a new tab,
Untitled-1 popping up with Color Theme in JSON format.
[caption id="attachment_1092" align="aligncenter" width="713"] untitled-1[/caption]
Now select all (Ctrl+A) and copy the content.
🍀 2. Open CodeSandBox Preference
Click on "Preferences" gear ⚙️ button to open PREFERENCES modal box.
[caption id="attachment_1093" align="aligncenter" width="1064"] Click Preference[/caption]
🍀 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.
[caption id="attachment_1095" align="aligncenter" width="1536"] result[/caption]
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 😛.