search

srcery-colors / srcery-vscode

Srcery theme for Visual Studio Code, based on srcery-colors/srcery-vim
MIT License
31 stars 1 forks source link

Road to specification completion #1

Open gagbo opened 5 years ago

gagbo commented 5 years ago

Summary

To avoid any surprise when loading this VSC theme, it should provide a value for every customizable item found in the documentation (so it is overwritten when the theme is loaded), or at least consider providing it.

Reference

All the references for this issue come from Visual Studio Code documentation

Contributions

Everyone is welcome to add/modify colours in this list. I (@gagbo) just aim to provide the most complete theme possible, so anyone who would want to tweak it can find directly the property they want to change in the source. Keeping the list in alphabetical order is important so we don't specify twice the same key, or forget one.

List

Contrast colors

Base colors

Text colors

Colors inside a text document, such as the welcome page.

Button control

A set of colors for button widgets such as Open Folder button in the Explorer of a new window.

Dropdown control

A set of colors for all Dropdown widgets such as in the Integrated Terminal or the Output panel. Note that the Dropdown control is not used on macOS currently.

Input control

Colors for input controls such as in the Search view or the Find/Replace dialog.

Scrollbar control

Badge

Badges are small information labels, for example, search results count.

Progress bar

Lists and trees

Colors for list and trees like the File Explorer. An active list/tree has keyboard focus, an inactive does not.

Activity Bar

The Activity Bar is displayed either on the far left or right of the workbench and allows fast switching between views of the Side Bar.

Side Bar

The Side Bar contains views like the Explorer and Search.

Editor Groups & Tabs

Editor Groups are the containers of editors. There can be many editor groups. A Tab is the container of an editor. Multiple Tabs can be opened in one editor group.

Editor colors

The most prominent editor colors are the token colors used for syntax highlighting and are based on the language grammar installed. These colors are defined by the Color Theme but can also be customized with the editor.tokenColorCustomizations setting. See Customizing a Color Theme for details on updating a Color Theme and the available token types.

All other editor colors are listed here:

Basic Editor colors

Selection colors

Selection colors are visible when selecting one or more characters. In addition to the selection also all regions with the same content are highlighted.

Word highlight colors

Word highlight colors are visible when the cursor is inside a symbol or a word. Depending on the language support available for the file type, all matching references and declarations are highlighted and read and write accesses get different colors. If document symbol language support is not available, this falls back to word highlighting.

Find matches

Find colors depend on the current find string in the Find/Replace dialog.

Hover Highlight

The hover highlight is shown behind the symbol for which a hover is shown.

Line Highlight

The current line is typically shown as either background highlight or a border (not both). We chose to use editor.lineHighlightBackground so editor.lineHighlightBorder is marked as done

Link

The link color is visible when clicking on a link.

Range Highlight

The range highlight is visible when selecting a search result.

White spaces

To see the editor white spaces, enable Toggle Render Whitespace.

Indent Guides

To see the editor indent guides, set "editor.renderIndentGuides": true.

Rulers

To see editor rulers, define their location with "editor.rulers"

CodeLens:

CodeLens

Bracket colors

Overview ruler:

This ruler is located beneath the scroll bar on the right edge of the editor and gives an overview of the decorations in the editor.

Errors and warnings:

Unused source code:

Gutter colors

The gutter contains the glyph margins and the line numbers:

Diff editor colors

For coloring inserted and removed text, use either a background or a border color but not both.

Editor widget colors

The Editor widget is shown in front of the editor content. Examples are the Find/Replace dialog, the suggestion widget, and the editor hover.

Debug widget colors

The Debug Exception widget is a peek view that shows in the editor when debug stops at an exception.

Editor Marker colors

The editor marker view shows when navigating to errors and warnings in the editor (Go to Next Error or Warning command).

Peek view colors

Peek views are used to show references and declarations as a view inside the editor.

Merge conflicts

Merge conflict decorations are shown when the editor contains special diff ranges.

Panel colors

Panels are shown below the editor area and contain views like Output and Integrated Terminal.

Status Bar colors

The Status Bar is shown in the bottom of the workbench.

Title Bar colors

Menu Bar colors

Notification colors

Notification toasts slide up from the bottom-right of the workbench. The toasts are the pop ups. Once opened in the Notification Center, they are displayed in a list with a header.

Extensions

Quick picker

Integrated Terminal colors

Debug

Welcome page

Git colors

Settings Editor colors

Note: These colors are for the GUI settings editor which can be opened with the Preferences: Open Settings (UI) command.

Breadcrumbs

The theme colors for breadcrumbs navigation:

Snippets

The theme colors for snippets:

roosta commented 5 years ago

Wow, this is quite something, putting me to shame :) I should probably do something similar to the emacs theme when I get around to it. Great initiative.

gagbo commented 5 years ago

Don't worry too much, looking at pretty colors and adding 4/5 values in the json is currently my "pause" activity :)

And also, this is probably a lot harder on Emacs because there are a lot more font-locks to define with all the plugin/mode-specific ones :)

It is a lot easier to do this on VSC just because there's a well illustrated documentation with all the values related to UI stuff. The colors for the classic Vim highlight groups (semantic highlighting, or "almost anything within the actual editor pane for non text files") is apprently done in another part of the JSON (currently the tokens part of the theme) and I don't expect to touch this one much, and just try to take PRs in for the languages that I do not use. Not entirely sure for now how I'll manage this

roosta commented 5 years ago

It's always nice with a calming pause activity :) yeah there's a lot of font-locks in Emacs but there's a function that lists all of them list-faces-display. I've been using it a bit to color in stuff that's missing, but I can't account for all the plugins, and sometimes the only way to set a correct color is by knowing how the face is used. Do you mean the regex's that define the highlight groups? I wouldn't expect you to do much with that, isn't that outside the scope of a color theme?

gagbo commented 5 years ago

oh no, for the "highlight group like" color associations mean associating a color to a token type : 

{
    "name": "Built-in constant",
    "scope": "constant.language",
    "settings": {
        "foreground": "#0aaeb3"
        }
    },

These kind of associations in the thme file look like the hi link cComment Comment or hi! rubyComment guifg=... statements in Vim colorthemes.

The colors I am currently defining are only used for non-semantic/generic stuff, that's what I mean.

roosta commented 5 years ago

Right, gotcha.

gagbo commented 5 years ago

For information, I'm starting to think that everything that is around the editor should be darker than it, so the focus is more pronounced towards the editor panel. This is what it looks like currently, to show an idea :

screenshot_srcery_vscode_efae84c

The constrast is pretty strong between the two colors for now, but I plan on reducing it (the darker black is actually #000000 so I'll probably make it warmer soon, it's just to illustrate here)

roosta commented 5 years ago

I like the idea, there are other shades of black and gray defined in srcery that you could use:

name hex
hard_black #121212
xgray1 #262626
xgray2 #303030
xgray3 #3A3A3A
xgray4 #444444
xgray5 #4E4E4E

Also, there is the possibility to use other colors from the xterm palette. The colors listed in the table above are from this palette. They are chosen because the availability of these colors are pretty good in any given 256 color terminal env.

gagbo commented 5 years ago

Noted, I'll try to use them more. What I've been doing so far is using a color picker to just change the Value (as in HSV) of the ansi black or ansi white colors, this way I thought to keep the "earthiness" of the colorscheme.

Since outside of integrated terminal there are only going to be 24 bit colors with transparency support, I don't think it matters too much to use xgray colors there if it's just for compatibility.

roosta commented 5 years ago

You could do that as well, like you said in vscode it doesn't matter. I simply use those extra colors for consistency since both vim and emacs have a strong terminal presence. If it looks better to pick out some new accent colors go ahead.

gagbo commented 5 years ago

( Next thing to do : notifications are darker when hovered on. They should be brighter )