Theme Packs

Qubes 10.0 ThemePacks allow cosmetic theming and adding ornaments to layers.

A ThemePack is described in a JSON file, which lists ornaments, ornaments can be applied to layers through the Ornament property.

A ThemePack can be located on the computer's storage or inside a JSON document.
According to its location, you'll have to specify its path or its reference.

The JSON must contain

• a name field, holding the ThemePack name
• and ornaments array, holding an arbitrary number of named ornaments, with the following fields
  • name field, identifies the ornament, this name is a promise, changing it will break layers that refer to it
  • description field, optionally provides a textual description of the ornament
  • css field, which contains the css for the ornament, which MUST be normalized to apply to an element with a "ornament-class" CSS class. This name is substituted at runtime.

An exemple theme pack is below.

{
   "name": "Name of the ThemePack",
   "ornaments": [
      {
         "name": "ellipsis",
         "css": ".ornament-class { border-radius:100%; overflow:hidden }"
      },
      {
         "name": "slant-shade",
         "description": "weird slant shaded style to test clipping and shadows",
         "css": ".ornament-class { filter: drop-shadow(5px 5px 5px #555) } .ornament-class > table { clip-path: polygon(20px 0, 100% 0, 90% 100%, 0 100%, 0 20px) }"
      },
      {
         "name": "left-redband",
         "description": "red band accent on the left on 66% of height and width 1em",
         "css": ".ornament-class > table { position: relative } .ornament-class > table:before { content: ' '; display: block; position: absolute; width: 1em; height: 66%; top: 0; background: #E2001A }"
      },
      {
         "name": "line-highlight-on-hover",
         "css": ".ornament-class tr:hover { filter: brightness(1.1); transition: 250ms; }"
      } 
   ]
}