wesbos / cobalt2-vscode

Cobalt2 Theme for VS Code

Cobalt2 Theme for VS Code

Install on VS Code Marketplace

Installation

1. Open Extensions sidebar panel in VS Code. View → Extensions
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!
3. Click Install to install it.
4. Code > Preferences > Color Theme > Cobalt2
5. Optional: Use the recommended settings below for best experience

Recommended Settings

{
  // This is all that matters
  "workbench.colorTheme": "Cobalt2",
  // The Cursive font is operator Mono, it's $200 and you need to buy it to get the cursive. Dank Mono or Victor Mono are good alternatives
  "editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 17,
  "editor.lineHeight": 25,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "400",
  "prettier.eslintIntegration": true,
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid",
  "editor.renderWhitespace": "all",
}

Colours

Blue: #193549 Blue Highlight: #1F4662 Blue Highlight2: #234E6D Blue Dark: #122738 Yellow: #ffc600 Hot Pink: #ff0088 Blush Pink: #ff628c Orange: #ff9d00 Green

Contributing

To work on the theme:

1. Clone this repo and open in VS Code
2. Open run View → Run
3. Click Launch Extension. This will open up another VS Code Editor
4. Make changes to cobalt2.json. You will see changes reflected in the other editor that opened in step 3.

If you are making a Pull Request, Please give me a screenshot of before/after!

Deploying a new version

These are mostly notes for me.

1. Increment the version number in package.json with npm version major|minor|patch
2. run npm run bundle
3. run npm publish to publish both to npm and vscode extension store

I don't like something

You don't need to fork it!

First, this theme is new so if something is funky, please open an issue. There are many languages and parts of VS Code I don't use, so let me know!

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.

https://code.visualstudio.com/docs/getstarted/theme-color-reference

Put Cobalt2 in other places!

• Warp
• Sublime Text
• Atom
• iTerm2
• Hyper Term
• Alfred
• Slack

Thanks

Thanks to Roberto Achar for doing much of the initial porting to VS Code.

cobalt2-vscode's Issues

Switches nearly not visible in VS Code terminal

Basically this:

Am I doing something wrong or is this how it is? (I am on windows powershell)

Selecting Text From Search

Similar to #23.

When I search for node in my package.json file and then try to highlight this string it looks like the 'node' portion of the string is not highlighted.
Example:
http://typenine.d.pr/6fb4J/1NolJIhL

Current workbench sidebar should be highlighted

re: https://twitter.com/josewhitetower/status/908775324741242880

Not sure if it's possible but I'll look into it

Find all references panel blend-in into code

Find All References Panel - is hard to see where panel starts and where it ends.
(Right click on some variable and then select 'Find all references')

Crash VSCODE

Hi, Wes. update cobal2 and when you enable CSS from command palette, vscode is broken.

"vscode_custom_css.imports": [
"/Volumes/Macintosh HD/Users/Jousmo/.vscodestyles.css"
]

Scrollbar is hiding cursor position and warnings/errors

Scrollbar has no transparency, and so is hiding cursor position and any warning/error

Scrollbar hiding cursor and warning

Scrollbar showing cursor (yellow) and warning (green) in itself when scrolled out

Find/Replace moda icons

Hello,
is there any chance to change color for active icons in Find/Replace modal?
Screenshot attached shows RegEx turned on but some color indication would be great.

Some Search text is too bright on the yellow find

Color contrast not strong enough for search option icons

I find it hard to tell whether the "Match Case" & "Match Whole Word" for search are both ON or both OFF.

Here both are OFF:

And here both are ON:

To solve this, either the contrast between the shades of greys needs to be stronger, or other colors need to be chosen.

Find should have a thin yellow border

This isn't possible via the settings, but maybe via a CSS hack?

This is how it is in Sublime:

Color in the function name

Hi Wes, it is correct that the color of the name of the function is equal to its declaration.

Freemarker theme is confusing

The color scheme when working in a Freemarker file (.ftl) is very hard to read. Functions and statements come through as a readable color, but everything else (variables, parameters, etc) are all white and blend together. The Monokai Dark theme seems to have a readable color scheme for these files, is this something that can be implemented? Thanks Wes!

self not colored in argument of class method in Python

self inside method and in argument isn't colored same.

Activity Bar notification getting clipped along bottom

---

BTW great work on this port! I was originally using this when I made the switch to VS Code, but switched over to some 'unofficial' version because they had the file tree and menu styles. Just switched back to this and it's 🔥

find & replace: case sensitive, whole word, regex buttons selection state hard to see

It is almost indistinguishable between selected or not.

Slightly brighter grey text color and a VERY faint box around the button when selected.

Thanks!

Blade Syntax

Hey Wes, Love cobalt use it on everything, thanks!

Looking at switching to VS from Sublime and the syntax highlighting for blade on the cobalt theme doesn't seem to be working like it does on Sublime.

cant seem to work out where to alter settings to get this to be a bit better using this for blade syntax: https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade. Any chance you could point me in the right direction if not something to do with this theme?

Having trouble with custom css

I can't figure out why the custom css is not working (I can tell because the cursor hack is not overwriting the underline-thin setting)
I've followed these steps:

1. installed the vscode-custom-css plugin
2. copied the css into vscodestyles.css and set vscode_custom_css.imports to the file path
3. enabled Custom CSS and JS form the command palate
4. restarted vs code

Still no change to the cursor

I noticed this in the custom-css plugin documentation:
IMPORTANT: Items in “vscode_custom_css.imports” should be URLs, instead of file paths. For local files, prefix it with “file://”.

I tried prefixing with "file://" but that didn't work either. I even tried linking to Wes' css on github in my settings to no avail:

What am I missing?

Error Messages should have a border

They kind of blend in right now and I missed a few of them.

Unclosed compotent – following text difficult to see

I noticed that when I create new component/tag and it is not closed (because I'm editing it) following text is marked error-like (see second Checkbox component on screenshot). Is it possible to make this red lighter, because now it is sometimes difficult to see (when charakters like = are next)

editor.Ruler is too opaque

A tad less colour would do the trick!

Background color for selected text in sidebar and search

Have you considered changing the background color for selected text in areas like the side bar, find panel, and search box? The dark on slightly lighter background can be tricky to see.

Thanks for your work on this - it looks great so far.

Color Shadow

Some popups have this ugly shadow - not sure if we can darken it up or something so it looks better.

Built in terminal single letter flag color is black/unreadable

Version control merge conflict highlighting is gone.

I frequently use vscode's version control tab to resolve merge conflicts. Since this theme was updated last week the merge conflict highlighting is not working.

This is the merge conflict interface with the extension turned off:

This is with it turned on:

I'm loving this theme but I'm not liking what it's doing to the merge conflict markers

Id names don't highlight as strings

When creating an id in an HTML tag the string value does not get highlighted as a string. It has the same colour of tags. It is working fine with other attributes like class, rel, href, alt, etc.

color highlight

Is there a setting to display color highlight inline as a background color, like you have? Thanks.

Mine is like this:

Discrepancies between Sublime and VSCode syntax coloring

Thanks to everyone who has contributed to this awesome theme and the VSCode version.

I'm noticing some small differences between Sublime and VSCode when using the theme. I'm not fluent in how the themes are constructed, so I'm not sure which ones are just a result of differences in themeing options or syntax highlighting between the two.

Here's a few examples:

JS - (sublime on left, vscode on right)

Differences:

• Base color is different -- light grey in Sublime, white in VSCode
• Quoted Strings are dark green in Sublime, mint in VSCode
• Function call inside of a function is not highligted in Sublime and highlighted in VSCode (call to peep() inside the peep() function

I code mainly in python, so here's an example comparison:

Differences:

• docstrings are blue in Sublime, mint in VSCode
• certain references are light blue in VSCode where nothing has that color in Sublime (lines 699 and 716 have examples)
• certain references are pale yellow in Sublime and white or light blue in VSCode (lines 697, 699, and 716)
• quoted strings are dark green in Sublime, mint in VSCode

---

I'm happy to help fix, but I think it would be helpful for someone with more experience to determine which of these differences are due to differences in how Sublime and VSCode themes work and which ones are just things that haven't been ported yet.

Invalid Syntax Color

Invalid syntax color is annoying and hard for the eye.

Increase minimap slider contrast to enhance its visibility

The minimap slider is always visible in my settings.

"editor.minimap.showSlider": "always"

I find it hard to see because of the low contrast to the background

Here as comparison the minimap slider of the Material Theme where the slider is easily distinguishable from the background.

I suggest increasing the contrast of the slider to enhance its visibility.

Match Italics to Sublime

extends, HTML attrs, etc...

Workbench badge count is not visually circular

Using your recommended custom CSS with Operator Mono.

This seems to do the trick although I haven't tested it thoroughly.

.monaco-count-badge {
    padding: .2em .6em;
}

Classes and Ids have same highliting in CSS

I don't know if this is the intended behavior, but I do miss having different highlighting for classes and ids in CSS.

Transparency in file explorer error/suggestion

This info "A file or folder name must be provided" is transparent

Stylus syntax support

Dear Wes,

There is a plugin called language-stylus which add syntax support for Stylus in VScode.
However when using that with cobalt 2 almost all text will be green.

i added support for stylus syntax in cobalt 2 by adding source.stylus (then the property name u defined) every time you used source.css

This adds full proper syntax support to stylus with Cobalt2.

i have attached the before and after screenshots and the edited cobalt2.json

Withouth support.stylus added:

With support.stylus added:

Added support.stylus to cobalt2.json:
cobalt2-with-stylus.zip

Multiple Selection on Words Highlight Color

When you select a word, it highlights all words on the page so you can see them. But then when you start selecting the other instances, there's no visible difference between the ones that have been selected and the ones that haven't been. See screenshot for example, hopefully that'll help it make more sense.

As you can see, I've selected the first four (but you can only tell because of the caret next to them). It'd be nice if the selected ones looked different than the non-selected ones.

Style inline error tips

YOU UGLY

Searched text highlighted color is too closer to base color

Hey Wes, I guess the image below explain it all:

Thanks for the beautiful theme 👍.

Danke.

Expand selection doesn't work well with quotes

Ideal behaviour would be to not include quotes.

If quotes and text have have same color, it includes quotes in the selection else it doesn't.

Selection VS Selected is goofy

Make them all that blue colour. But how?!

Where am I going wrong with custom CSS import?

I can figure out where I'm going wrong with importing my custom CSS, am I just formatting the path incorrectly? Also tried putting the file in root as suggested ~/.vscodestyles.css and also adding file:// but just don't seem to be able to make any changes via the CSS file.

Probably being a big noob and missing something obvious but it's driving me nuts.

{
  "workbench.colorTheme": "Cobalt2",
  "editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 17,
  "editor.lineHeight": 25,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "400",
  "prettier.eslintIntegration": true,
  // this isn't really underline-thin but we hack it to be a thicker cursor
  "editor.cursorStyle": "underline-thin",
  "editor.cursorBlinking": "solid",
  // Very important: Install this plugin: https://github.com/be5invis/vscode-custom-css
  // you'll need to change this to an absolute path on your computer
  "vscode_custom_css.imports": [
    "/Volumes/Macintosh HD/Users/lev/.vscodestyles.css"
  ],
  "editor.renderWhitespace": "all"
}

[php] variable colours

Hey Wes,

I like the look of this theme, but feel perhaps the variables in PHP could use a little bit of colour. Below is the theme I was using compared to cobalt.

Cobalt

Other

Change activity bar foreground color

Foreground color of activity bar is too bright

With "activityBar.foreground": "#aaaaaa" it aligns well with the theme.

Split window needs a clear border, or a darker background for the gutter.

When using a split editor it's difficult to see the separation, especially in the settings editor. Could we get a darker gutter or a thicker border?

Does this have support for liquid?

This this theme have syntax support for the liquid language?

Styled title bar

It would be extra 🔥 if the title bar were styled an appropriate cobalt blue color.

See this discussion and also this theme as an example of what titleBar properties are available.

It looks like the keys are:

    "titleBar.activeBackground"
    "titleBar.activeForeground"
    "titleBar.inactiveBackground"
    "titleBar.inactiveForeground"

Find others when highlighted

If I put my cursor on anything, it finds the other instances.

Annoying - I rather it only happen when you select it. Or at least not on quotes

Scrollbars and thumbs tough to see

The horizontal and vertical scrollbars, as well as the thumbs when hovering over them, are tricky to see in the editor window. I wasn't sure if this was by design or if you'd consider tweaking the color(s) to make them a bit easier to see.

Whitespace not rendered with edtior.renderWhitespace set to boundary or all

This is how it looks in other themes:

Indentation with Spaces:

Indentation with Tabs:

In Cobalt 2 neither the dot's nor the tabs are shown.

find & replace highlight color hard to see at night

This morning it looks ok, but late at night with f.lux on, I couldn't see what it was highlighting at all, it all looked orange.

NOTE: I also use a smaller font size than you do.

Thanks btw this is a truly great theme.

Stylus Syntax goofed up