Skip to content

Latest commit

 

History

History
134 lines (111 loc) · 4.07 KB

THEMES.md

File metadata and controls

134 lines (111 loc) · 4.07 KB
Raw

Hain Themes

Hain now has extensive theme support, and comes bundled with default Light and Dark themes.

Bundled themes


Hain Light (by dannya)


Hain Dark (by dannya)

Example 3rd party themes


Total Clean for Alfred 3 (by thanasisrig)


jgold Green (by jongold)


jgold Orange (by jongold)


Themer Colors Polar Ice - Light (by mjswensen)


Themer Colors Polar Ice - Dark (by mjswensen)

...plus hundreds of other themes are now supported!

Technical details

Additional 3rd party theme files (see below for the formats supported) simply need to be dropped into the user preferences directory, eg. C:\Users\danny\AppData\Local\hain-user\themes where they will be scanned on app startup.

There is support for rgba() colours (ie. transparency) in themes, with a new user config setting to enable transparency, but this exposes an Electron bug around windows flickering on show, so it is off by default.

This has been implemented using the Alfred JSON theme format internally, with a best effort attempt to automatically convert these theme types into this format for use:

  • Alfred JSON
  • Alfred XML (however some use serialized NSColor objects that are not parsable, so if this is detected the file is not loaded)
  • Themer JS export files

Other text-based theme formats are easy to support in future as formats are modular.

Here is the internal Alfred-compatible JSON theme format representing the default "Hain Light" theme:

{
  name: 'Hain Light',
  credit: 'dannya',

  result: {
    textSpacing: 6,     // not implemented
    subtext: {
      size: 13,
      colorSelected: '#5E5E5E',
      font: '"Roboto", sans-serif',     // partially-implemented
      color: '#757575'
    },
    shortcut: {
      size: 16,     // not implemented
      colorSelected: '',     // not implemented
      font: '',     // not implemented
      color: ''     // not implemented
    },
    backgroundSelected: 'rgba(0, 0, 0, 0.2)',
    text: {
      size: 18,
      colorSelected: '#272727',
      font: '"Roboto", sans-serif',     // partially-implemented
      color: '#212121'
    },
    iconPaddingHorizontal: 6,     // not implemented
    paddingVertical: 6,     // not implemented
    iconSize: 40     // not implemented
  },
  search: {
    paddingVertical: 8,
    background: '#ffffff',
    spacing: 6,
    text: {
      size: 22,
      colorSelected: '',     // not implemented
      font: '"Roboto", sans-serif',     // partially-implemented
      color: '#000000'
    },
    backgroundSelected: ''     // not implemented
  },
  window: {
    color: '#ffffff',
    paddingHorizontal: 10,     // not implemented
    width: 800,
    height: 544,
    borderPadding: 0,     // not implemented
    borderColor: '',     // not implemented
    blur: 15,     // not implemented
    roundness: 2,     // not implemented
    paddingVertical: 10     // not implemented
  },
  separator: {
    color: '#00BCD4',
    thickness: 0     // not implemented
  },
  scrollbar: {
    color: '#CCCCCC',
    thickness: 10
  }
}