powhttp

Themes

powhttp comes with a built-in light and dark theme and an "auto" theme which switches between the two depending on the system theme. You can also add custom themes to the app in case you want to use a different theme than the two built-in ones.


Create your own Theme

Themes are stored as JSON files in a dedicated directory. There are a number of configurable properties but only a few of them are required to create a valid theme. Optional properties either have fallbacks in place or get auto-generated based on the appearance and other colors of the theme.

It is generally recommended to handpick most colors because auto-generated colors will most likely not look as fitting as handpicked ones but if you want to just quickly create a theme and fine-tune the unsuitable colors later then this is a great shortcut to make use of.


Theme Structure

All colors need to be formatted in hex and only a few properties accept an additional alpha value to set the opacity for components like the scrollbar or selected text.

At the top-level a theme consists of the following properties:

  • name: The name getting displayed inside the app
  • appearance: The tone of the theme, either light or dark
  • style: An object containing the configured properties

Here is an example for a very minimal theme that only defines required properties:

{
    "name": "One Dark",
    "appearance": "dark",
    "style": {
        "background.base": "#282c34",
        "foreground.base": "#dcdcdc",
        "border.base": "#394547",
        "syntax.comment": "#5c6370",
        "syntax.string": "#98c379",
        "syntax.keyword": "#c678dd",
        "syntax.number": "#d19a66",
        "syntax.identifier": "#abb2bf",
        "syntax.regexp": "#56b6c2",
        "syntax.delimiter": "#abb2bf",
        "syntax.type": "#e5c07b",
        "syntax.tag": "#e06c75",
        "syntax.metatag": "#56b6c2",
        "syntax.key": "#e06c75"
    }
}

All style properties can be grouped into the following:

  • accent, red, green and yellow
  • compare.*: Highlight colors for two side comparisons.
  • scrollbar.*: Scrollbar inactive, hover and active background.
  • selection.*: Selection inactive and active background.
  • editor.*: Editor line number foreground, match background and border, ...
  • background.*: Different background levels.
  • foreground.*: Different foreground levels.
  • border.*: Different border levels.
  • content_type.*: Background and foreground for different kinds of content-type icons.
  • syntax.*: Foreground for all kinds of language tokens.

You can find the full example theme at https://powhttp.com/example-theme.json.


Shortcuts and Fallbacks

Most properties are not required and can be optionally defined to fine-tune the colors of a theme. Almost all shortcuts and fallbacks pick a color depending on the appearance property of the theme so it's important that this value matches the actual tone of the theme.

The following properties fallback to the built-in theme property value:

  • accent, red, green and yellow
  • compare.*
  • content_type.*

The following properties can be defined to auto-generate the remaining properties:

  • accent -> editor.match.*
  • background.base -> scrollbar.*, selection.* and background.(100-800)
  • foreground.base -> editor.* (except editor.match.*) and foreground.(300-900)
  • border.base -> border.(400-700)
  • syntax.comment -> syntax.(js|css|html|xml|yaml|gql).comment
  • syntax.string -> syntax.(js|css|json|yaml|gql).string, syntax.css.hex and syntax.(html|xml).attribute_value
  • syntax.keyword -> syntax.(js|css|json|yaml|gql).keyword
  • syntax.number -> syntax.(js|css|json|yaml|gql).number and syntax.css.unit
  • syntax.identifier -> syntax.(js|gql).identifier
  • syntax.regexp -> syntax.js.regexp
  • syntax.delimiter -> syntax.(js|css|html|json|xml|yaml|gql).delimiter
  • syntax.type -> syntax.(js|gql).type and syntax.css.attribute_value
  • syntax.tag -> syntax.(css|html|xml).tag
  • syntax.metatag -> syntax.(html|xml).metatag
  • syntax.key -> syntax.(css|html|xml).attribute_name and syntax.(json|yaml|gql).key

Adding Themes

Adding a theme just requires you to place the theme inside of the dedicated themes directory. Every theme inside of that directory will get loaded at startup and should then be selectable inside of the app under Settings -> Appearance.

Here is the location of that directory for every operating system powhttp supports:

  • Windows: %APPDATA%/powhttp/themes
  • macOS: ~/Library/Application Support/powhttp/themes
  • Linux: ~/.config/powhttp/themes