Documentation minihtml Reference

Sublime Merge uses a custom HTML and CSS engine, named minihtml, for parsing colors in themes and color schemes. The HTML functionality of the engine is not currently utilized.

minihtml provides a limited subset of CSS features found in most web browsers. While only certain features may be implemented, they are designed to be standards compliant. Any feature implemented should function the same way in minihtml as in a browser.

CSS

Colors

Colors may be specified via:

  • Named colors: white, tan, etc
  • Shorthand hex: #fff
  • Shorthand hex with alpha: #fff8
  • Full hex: #ffffff
  • Full hex with alpha: #ffffff80
  • RGB functional notation: rgb(255, 255, 255)
  • RGBA functional notation: rgba(255, 255, 255, 0.5)
  • HSL functional notation: hsl(0, 100%, 100%)
  • HSLA functional notation: hsla(0, 100%, 100%, 0.5)
  • transparent

color() Mod Function

Additionally, color values may be modified using the CSS Color Module Level 4 color-mod function with the following adjusters:

  • alpha()/a()
  • saturation()/s()
  • lightness()/l()
  • blend()
  • blenda()
.error {
    background-color: color(var(--background) alpha(0.25));
}
.error {
    background-color: color(var(--background) blend(red 50%));
}

The color-mod function will be most useful in combination with variables (as set in the theme or color scheme).

Predefined Variables

When a color scheme is loaded, the background and foreground colors are set to CSS variables, along with the closest color found to a handful of basic colors. These variables are also exposed to themes.

  • var(--background)
  • var(--foreground)
  • var(--accent)
  • var(--redish)
  • var(--orangish)
  • var(--yellowish)
  • var(--greenish)
  • var(--cyanish)
  • var(--bluish)
  • var(--purplish)
  • var(--pinkish)

The algorithm to pick the colors uses the HSL color space and uses several heuristics to try and pick colors that are suitable for foreground use. In the case that the automatic color selection is undesirable, a color scheme author may manually set the appropriately named variable in their .sublime-color-scheme.