wesbos / cobalt2-vscode Goto Github PK

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.

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

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

Thanks for the beautiful theme 👍.

Danke.

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

Basically this:

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

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

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

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"

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.

YOU UGLY

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?

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')

A tad less colour would do the trick!

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?

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

Mine is like this:

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.

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.

It is almost indistinguishable between selected or not.

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

Thanks!

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

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.

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

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

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.

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.

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.

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;
}

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.

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.

extends, HTML attrs, etc...

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.

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

This is how it is in Sublime:

This this theme have syntax support for the liquid language?

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?

Make them all that blue colour. But how?!

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)

Invalid syntax color is annoying and hard for the eye.

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"
]

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 🔥

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

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

Foreground color of activity bar is too bright

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

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"
}

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

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

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

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

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 inside method and in argument isn't colored same.