Task: Build Base16 themes auto-magically

[joshgoebel]

Regarding the other themes, I can't avoid noticing that many of them are from the Base16 project.

In the Highlight project, we simply automated the creations of themes using Mustache templates, which greatly simplifies any updates (e.g. when new syntax elements are introduced).

For the task, I've created some scripts, templates, and a slightly updated set of the Base16 YAML definitions, in order to correctly provide names and links of their original authors, and also split between Dark and Light themes (not every B16 theme supports both versions, although some do).

Here are my scripts and assets (feel free to use them, some are public domain and others are MIT licensed):

• https://gitlab.com/tajmone/highlight-extras/-/tree/master/base16
• https://github.com/tajmone/Base16-Sass

Via this automation system you might even end up with more HLJS Base16 themes than you started with, since I've added some extra themes to the list.

Originally posted by @tajmone in #3118 (comment)

[joshgoebel]

@tajmone I'm not loving the results so far (perhaps I just picked a bad theme to start with), but the tooling is super easy: https://github.com/highlightjs/base16-highlightjs

[tajmone]

@tajmone I'm not loving the results so far (perhaps I just picked a bad theme to start with), but the tooling is super easy

While in theory a Base16 scheme should work both in light and dark version (by using different palette colors for the background), some themes only look good in either dark or light.

My approach was to build all versions, then discard those that don't look good (there aren't many of those).

According to the official Base16 Styling Guidelines, each palette entry should be associated with a specific syntax/editor element, the idea being that all schemes should be applicable in the same manner. But this might not always be the case, although as a general rule it should work fairly well.

Automating the themes creation is definitely worth the effort, even at the cost of discarding a few themes that don't play out well, because it allows to introduce new syntax elements in a very quick manner.

In any case, this is how each color entry should be mapped to a syntax/editor element:

color	description
base00	Default Background
base01	Lighter Background (Used for status bars, line number and folding marks)
base02	Selection Background
base03	Comments, Invisibles, Line Highlighting
base04	Dark Foreground (Used for status bars)
base05	Default Foreground, Caret, Delimiters, Operators
base06	Light Foreground (Not often used)
base07	Light Background (Not often used)
base08	Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
base09	Integers, Boolean, Constants, XML Attributes, Markup Link Url
base0A	Classes, Markup Bold, Search Text Background
base0B	Strings, Inherited Class, Markup Code, Diff Inserted
base0C	Support, Regular Expressions, Escape Characters, Markup Quotes
base0D	Functions, Methods, Attribute IDs, Headings
base0E	Keywords, Storage, Selector, Markup Italic, Diff Changed
base0F	Deprecated, Opening/Closing Embedded Language Tags, e.g.

[joshgoebel]

@tajmone Yes I found the documentation and that's what I'm doing. (following Prism and TextMate examples for guidance)

each palette entry should be associated with a specific syntax/editor element, the idea being that all schemes should be applicable in the same manner. But this might not always be the case, although as a general rule it should work fairly well.

Perhaps it does and I'm just not loving 3024 (first in alpha order), lol... I also think sometimes it's hard to know how to map things over such as with:

• all our MANY selector scopes
• meta, meta-string, meta-keyword

Most of the rest was straight-forward for sure.

---

A larger problem though is that our existing Base16 themes are not guaranteed to follow the spec at all (Gruvbox certainly does not in the least). It is the correct palette, but it's like the implementor just randomly chose their fav colors for each element instead of following the spec.

So that means if we wholesale upgrading to "official" base16 builds that we might "break" existing themes. (or perhaps it's only Gruvbox, I don't have time to check them all)... now v11 is certainly the time to do that (and I won't feel too bad for course "correcting" them) but it's still a consideration.

Also there are 174 base16 themes... I don't want to just dump them into the project (we have enough themes in core)... but if they live in a separate repo (like is traditional for base16 templates) then should the exiting Base16 themes leave core as well to exist as part of the base16 repo? Should there be a few fav "blessed" themes that remain?

Right now I'm liking what Prism does... ship a very few "core" themes with the library and then have a separate repo full of additional themes.

CC @highlightjs/core

[joshgoebel]

While in theory a Base16 scheme should work both in light and dark version (by using different palette colors for the background)

Yeah I'm not even exploring that... many themes already ship light and dark versions where they invert the palette themselves, so I'd tend to lean on that vs just doing the palette flip inside a single theme.

[joshgoebel]

Reasonable I think. Highlight.js on the left.

[tajmone]

While working with the Base16 themes I went through the same exact perplexities you've mentioned. I believe that when it comes to mapping you should focus on a few selected schemes: Monokai, Eighties and Google Dark (for Dark themes), and Tube, Google Light (for light themes); if you get good results with these, then most likely you've got a good mapping of the colors to the template.

If some Base16 schemes look strange it's just because they were designed to be so (i.e. mixing colors which lead to unusual contrasts and combinations). The previously mentioned dark and light themes tend to be more conservative in their approach, and can be taken as references, which ultimately means that other more creative and less "orthodox" schemes will be represented as intended.

[joshgoebel]

Want to review to see if there is any hidden wisdom:

https://github.com/chriskempson/base16-builder/blob/master/templates/highlight.js/