It’s because of CodeSandBox uses Monaco (a VS Code editor engine) by default.
Let's make the magic ✨ happen~
Here are the steps to make it happen.
- Get VS Code Color Theme Settings
- Open CodeSandBox Preference
- Paste the Setting in CodeSandBox Preference modal box
Let’s do this 💪!
I found this wondeful theme (Fairy Floss) from this post.
From VS Code,
- show all commands by pressing Control+Shift+P
- Enter Developer: Generate Color Theme From Current Settings
After executing the command, you will see a new tab,
Untitled-1popping up with Color Theme in JSON format. Now select all (Ctrl+A) and copy the content.
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.
Ok, now Enjoy the new Look & Feel 😎.
Here is the video of steps above.
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 😛.