To get started with the palette for syntax highlighting I copied some colors from my favorite themes like Night Owl or Nako.Īfter reaching a somewhat satisfying result for JavaScript and TypeScript code, I copied all the colors to Figma and started tweaking them to my liking. You can activate it by pressing Cmd+Shift+P and searching for "inspect editor". The scopes can be discovered by using VS Codes' internal tool Inspect Editor Tokens and Scopes. The editor is where you edit your code 🤣 Here are some of the UI colors I defined in my own theme. This is a laborious process but I didn't find a better way to go about it. In the DevTools you can find out the current color of a UI element, and then search with the color from your theme file and replace it. Opening Dev Tools is done by pressing Cmd+Option+I ( Ctrl+Alt+I on Windows). You can also use Chrome Dev Tools inside VS Code 🤯 to find out the current colors of the UI components. Occasionally I had some trouble with the debug window not updating but that's easily dealt with by clicking restart in the Debug Toolbar When you edit the colors in your theme themes/my-theme.json, you will see the results immediately in the debug window. A new VS Code window is opened, and this window will use your new theme. The easiest way to test your theme is to go into debug mode (press F5). This JSON contains the default color definitions which you can start to modify. In the theme folder you'll find a JSON file with the name of your theme. The generated theme project has everything set up for you to start.
0 kommentar(er)
