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 |