Adding VS Code Theme to CodeSandBox
Tags: vscode, codesandbox
Published: 2018-07-18 03:03:19

---
title: Adding VS Code Theme to CodeSandBox
published: true
tags: vscode, codesandbox
canonical_url: https://www.slightedgecoder.com/2018/07/17/adding-vs-code-theme-to-codesandbox/
cover_image: https://images.unsplash.com/photo-1523268755815-fe7c372a0349?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=78f4a9da162471fff0acce3b5be33393&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb
---

Have you ever wanted to match your [CodeSandBox](https://codesandbox.io) Editor Theme to match your [Visual Studio Code](https://code.visualstudio.com/) Color Theme?  
_Well, you can._

It’s because of CodeSandBox uses [Monaco](https://github.com/Microsoft/monaco-editor) (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](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2) theme on CodeSandBox, and will be updating it to use [Fairy Floss](https://marketplace.visualstudio.com/items?itemName=nopjmp.fairyfloss) theme on VS Code._

_I found this wondeful theme (Fairy Floss) from this post._
{% link https://dev.to/aspittel/my-visual-studio-code-setup-1emn %}
From VS Code,
1. [show all commands](https://code.visualstudio.com/docs/getstarted/keybindings#_navigation) by pressing <kbd>Control</kbd>+<kbd>Shift+<kbd>P</kbd></kbd>
2. Enter **Developer: Generate Color Theme From Current Settings**
 ![show all commands](https://i1.wp.com/www.slightedgecoder.com/wp-content/uploads/2018/07/show-all-commands.gif?resize=643%2C146&ssl=1)
After executing the command, you will see a new tab, `Untitled-1` popping up with Color Theme in JSON format.
 ![untitled-1](https://i1.wp.com/www.slightedgecoder.com/wp-content/uploads/2018/07/untitled-1.gif?resize=713%2C434&ssl=1)
Now select all (<kbd>Ctrl</kbd>+<kbd>A</kbd>) and copy the content.

### 🍀 2. Open CodeSandBox Preference
Click on “Preferences” gear ⚙ button to open **PREFERENCES** modal box.
 ![Click Preference](https://i1.wp.com/www.slightedgecoder.com/wp-content/uploads/2018/07/Click-Preference.gif?resize=1064%2C549&ssl=1)
![Custom VSCode Theme](https://i2.wp.com/www.slightedgecoder.com/wp-content/uploads/2018/07/Custom-VSCode-Theme.gif?resize=900%2C741&ssl=1)

### 🍀 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](https://i0.wp.com/www.slightedgecoder.com/wp-content/uploads/2018/07/result.gif?resize=1170%2C638&ssl=1)
Ok, now Enjoy the new Look & Feel 😎.

# 👩‍🏭 Working Demo
Here is the video of steps above.
{% youtube HhaOuFMl9zI %}

# ⚠ 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](https://www.slightedgecoder.com/2018/07/17/adding-vs-code-theme-to-codesandbox/) appeared first on [Slight Edge Coder](https://www.slightedgecoder.com).