![]() ![]() Some minor administration was required too I had to set up proper channels and templates for submitting pull requests and issue reports on the GitHub repository. I named this theme Werewolf (after the main character of the series) and shared it publicly a few months ago. your preferred colors for brackets, comments, etc). Syntax highlighting can be as involved as you’d like it to be you can easily find yourself tinkering with minor details that demand a lot of consideration (e.g. Updating the background colors of your editor, sidebar, and terminal is enough to radically change the overall appearance of your IDE.Ĭonfiguring tokenColors, on the other hand, is a trickier task that I wouldn’t want to front-load. You can think of these color settings as being responsible for composing the “frame” within which your code will be displayed. My suggestion is to work through your preferred colors first by going through the list of available options in the VSCode docs. your editor, sidebar, terminal, etc), while tokenColors handles syntax highlighting. colors manages the different components in your VSCode interface (e.g. There are two major sections here: colors and tokenColors. To be clear, building a VSCode theme mostly just involves assigning hex values to keys in a JSON file that permits common violations such as trailing commas and comments: To me, it makes sense to use RGB values that are slight variations of each other when coloring tokens that are functionally similar, because it feels like an intuitive way of classifying related chunks of information. boolean, string) and used a color resembling gold for complex object types (e.g. In my case, I used a darker orange for primitive type references (e.g. ![]() You can imagine extending this approach to type annotations as well. Both hex codes have a substantial amount of green in them (which makes them appear somewhat similar) but the latter also has a substantial amount of blue (which gives string primitives a more tealish glow and helps them stand out slightly from their numerical counterparts). ![]() Thus, I had to expand my selection of colors by exploring different compositions of RGB values.įor example, I used #43BF90 for integers/floats and #7ACCC9 for strings. Calibrating ColorsĪs you might’ve noticed in some of the code snippets, not every noteworthy piece of syntax can be differentiated with single versions of blue, green, and yellow. I was able to look at the current state of my theme and compare it to the art piece: If my theme felt like an extension of its source of inspiration, then I knew I was on the right track. This provided me with a sanity check of sorts. Placing my IDE and my reference image side by side This eventually led to combinations of colors like the one you see below:Įach time I spun up VSCode to iterate on my theme’s colors, I adjusted my IDE’s window and positioned it right next to my reference image:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |