|
| 1 | +# Cobalt2 Theme for VS Code |
| 2 | + |
| 3 | +[](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2) |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | +# Installation |
| 9 | + |
| 10 | +1. Open **Extensions** sidebar panel in VS Code. `View → Extensions` |
| 11 | +2. Search for `Cobalt2` - find the one by **Wes Bos** - there are a few other half-baked ones so make sure you have the right one! |
| 12 | +3. Click **Install** to install it. |
| 13 | +4. Click **Reload** to reload the your editor |
| 14 | +5. Code > Preferences > Color Theme > **Cobalt2** |
| 15 | +6. Optional: Use the recommended settings below for best experience |
| 16 | + |
| 17 | +## Recommended Settings |
| 18 | + |
| 19 | +```js |
| 20 | +{ |
| 21 | + "workbench.colorTheme": "Cobalt2", |
| 22 | + // The Cursive font is operator Mono, it's $200 and you need to buy it to get the cursive |
| 23 | + "editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', monospace", |
| 24 | + "editor.fontSize": 17, |
| 25 | + "editor.lineHeight": 25, |
| 26 | + "editor.letterSpacing": 0.5, |
| 27 | + "files.trimTrailingWhitespace": true, |
| 28 | + "editor.fontWeight": "400", |
| 29 | + "prettier.eslintIntegration": true, |
| 30 | + "editor.cursorStyle": "line", |
| 31 | + "editor.cursorWidth": 5, |
| 32 | + "editor.cursorBlinking": "solid", |
| 33 | + // Very important: Install this plugin: https://github.com/be5invis/vscode-custom-css |
| 34 | + // You'll need to change this to a file URI scheme on your computer: https://en.wikipedia.org/wiki/File_URI_scheme |
| 35 | + // Mac/Linux: file:///Users/YOUR-PC-USERNAME/.vscodestyles.css |
| 36 | + // Windows: file:///C:/Users/YOUR-PC-USERNAME/.vscodestyles.css |
| 37 | + "vscode_custom_css.imports": [ |
| 38 | + "file:///Users/wesbos/.vscodestyles.css" |
| 39 | + ], |
| 40 | + "editor.renderWhitespace": "all", |
| 41 | +} |
| 42 | +``` |
| 43 | + |
| 44 | +## Important: CSS Hacks For Extra Sweet Editor |
| 45 | +Some things in VS Code can't be controlled by settings, but you can install [this plugin](https://github.com/be5invis/vscode-custom-css), then make a file on your computer that will hold your custom CSS, I like to make one in my root called `~/.vscodestyles.css` and then put this everything in [cobalt2-custom-hacks.css](https://github.com/wesbos/cobalt2-vscode/blob/master/./cobalt2-custom-hacks.css) into your file. |
| 46 | + |
| 47 | +Once done, open your command palette and select enable **custom CSS and JS** |
| 48 | + |
| 49 | + |
| 50 | + |
| 51 | +Finally reload your editor and the Custom CSS should be taking. You can test this by typing into file - the dirty circle should be yellow not white. |
| 52 | + |
| 53 | +**_Note: Reloading custom CSS and JS after every VSCode update is a must!_** |
| 54 | + |
| 55 | +## Contributing |
| 56 | +This is a bit weird, but to get some sort of live feedback for when editing a theme. Please let me know if you have a saner way of doing it |
| 57 | + |
| 58 | +1. Open this repo in your terminal and type `npm install` |
| 59 | +1. Start to watch for change on the repo with `npm start` - this runs a nodemon task for you and will automatically recompile any changes |
| 60 | +1. Open this repo in VS Code |
| 61 | +1. Open your command palette and hit type **VSIX**. Select the one that says **Extensions: Install from VSIX...** |
| 62 | +1. Load the VSIX file that was created a few steps back |
| 63 | +1. Set your editor to use _this_ Cobalt2 theme - it might help to change the name in package.json to something like "Cobalt2 Dev" so you can differentiate from the Cobalt2 you've installed from the marketplace. If you get confused, just delete all traces of Cobalt2 and then load the VSIX. |
| 64 | +1. Go to the debug sidebar `View → Debug` |
| 65 | +1. Press the green arrow beside "Launch Extension" |
| 66 | +1. This will then open a second window. |
| 67 | +1. Make a change, and then hit the refresh button on your debug toolbar - this is in your first editor - not the one that poped open. |
| 68 | +1. Wait a sec, your changes should now be reflected! |
| 69 | + |
| 70 | +Whew. Again, if you have an easier way to style these things, let me know! |
| 71 | + |
| 72 | +## I don't like something |
| 73 | + |
| 74 | +First, this theme is new so if something is funky, please open an issue. |
| 75 | + |
| 76 | +These are the things we have control over. If you would like to change something, you can either open a PR and see if I'd like it added, or override the colours in your own settings.json file. |
| 77 | + |
| 78 | +https://code.visualstudio.com/docs/getstarted/theme-color-reference |
| 79 | + |
| 80 | +## Put Cobalt2 in other places! |
| 81 | + |
| 82 | +* [Sublime Text](https://github.com/wesbos/cobalt2) |
| 83 | +* [Atom](https://github.com/wesbos/Cobalt2-atom) |
| 84 | +* [iTerm2](https://github.com/wesbos/Cobalt2-iterm) |
| 85 | +* [Hyper Term](https://github.com/wesbos/hyperterm-cobalt2-theme) |
| 86 | +* [Alfred](https://github.com/wesbos/Cobalt2-Alfred-Theme) |
| 87 | +* [Slack](https://github.com/wesbos/Cobalt2-Slack) |
| 88 | + |
| 89 | +## Thanks |
| 90 | + |
| 91 | +Thanks to Roberto Achar for doing much of the initial porting to VS Code. |
0 commit comments