DEV Community

Donni
Donni

Posted on

Railscasts color scheme for VSCode integrated terminal

#railscasts #vscode #terminal #colorscheme

Anyone still using the Railscasts color scheme for development like me? I like the smooth earthy colors besides the fact that I have been used to it for more than 10 years. It all started in Sublime Text and I have adopted it for iTerm2 for consistency. When switching over from Sublime Text 2 to VSCode I was happy to found the color scheme present as well. Since then I was unhappy with the default color scheme of the integrated terminal, although I use it very rarely.

Today I have created a color customization for the integrated terminal of VSCode which you can find as a gist here: https://gist.github.com/donni106/04a9a3cff5f41c45db52785425732482

Image description

I found a nice script that was simple to use here: https://gist.github.com/2xAA/bd01638dc9ca46c590fda06c4ef0cc5a

const col = [] // run your .itermcolors file through a parser to get json and replace the array with the output function componentToHex(c) { const hex = c.toString(16) return hex.length === 1 ? `0${hex}` : hex } const mapping = { 'terminal.background':'Background Color', 'terminal.foreground':'Foreground Color', 'terminalCursor.background':'Cursor Text Color', 'terminalCursor.foreground':'Cursor Color', 'terminal.ansiBlack':'Ansi 0 Color', 'terminal.ansiBlue':'Ansi 4 Color', 'terminal.ansiBrightBlack':'Ansi 8 Color', 'terminal.ansiBrightBlue':'Ansi 12 Color', 'terminal.ansiBrightCyan':'Ansi 14 Color', 'terminal.ansiBrightGreen':'Ansi 10 Color', 'terminal.ansiBrightMagenta':'Ansi 13 Color', 'terminal.ansiBrightRed':'Ansi 9 Color', 'terminal.ansiBrightWhite':'Ansi 15 Color', 'terminal.ansiBrightYellow':'Ansi 11 Color', 'terminal.ansiCyan':'Ansi 6 Color', 'terminal.ansiGreen':'Ansi 2 Color', 'terminal.ansiMagenta':'Ansi 5 Color', 'terminal.ansiRed':'Ansi 1 Color', 'terminal.ansiWhite':'Ansi 7 Color', 'terminal.ansiYellow':'Ansi 3 Color' } console.log(JSON.stringify(Object.keys(mapping).reduce((obj, vsCodeKey) => { const itermKey = mapping[vsCodeKey] const red = componentToHex(Math.round(col[0][itermKey]['Red Component'] * 255)) const green = componentToHex(Math.round(col[0][itermKey]['Green Component'] * 255)) const blue = componentToHex(Math.round(col[0][itermKey]['Blue Component'] * 255)) obj[vsCodeKey] = `#${red}${green}${blue}` return obj }, {}), null, 2))
Enter fullscreen mode Exit fullscreen mode

Before running the script I had to convert the itermcolors file to a JSON, which was able with a tool at: https://json2plist.sinaapp.com (Plist -> JSON).

The outcome needs to be copied in the VSCode settings under the workbench.colorCustomizations key.

Now it shines in the same glow ⭐

Top comments (0)