Skip to content

Theming

Jump to bottom
Paul Delafosse edited this page May 25, 2022 · 4 revisions

Onagre theme can be configured in $XDG_CONFIG_HOME/onagre/theme.scss.

A .scss extension is used for configuration in order to get syntax highlighting, but only a small subset of scss is supported along with some custom properties prefixed with --.

Difference with css/scss:

  • no selectors, each class must respect the predefined nesting order.
  • color properties support only hex values (opacity is supported).
  • unit properties support pixel values only (except for border-radius which expects percent value.
  • unit suffix such as px and % are optional.

Inheritance:

The following values will propagate to their child : background, color font-size, icon-size. If you don't plan to override them you can omit the child definition.

Additionally .row-selected inherit the base .row style so you can override only what's needed.

Special classes

.plugin-hint : if you define this class onagre will apply a custom style to the search input parts matching plugin regex, you can completely disable this by removing this class from your theme.

.category-icon: unless defined onagre will not draw category icons.

Reference

.onagre

  • Description: the main container containing global configurations.

  • Allowed properties: --exit-unfocused, --font-family, --icon-theme, --icon-size, font-size, width, height, background, color, border-color, border-radius, border-width, padding, padding-left/right/top/bottom.

  • Inner classes: .container

.container

  • Description: the theme root.

  • Allowed properties: background, color, border-color, border-radius, border-width, padding, padding-left/right/top/bottom.

  • Inner classes: .rows, .search

.search

  • Description: styling for the search bar.

  • Allowed properties: background, color, border-color, border-radius, border-width, padding, padding-left/right/top/bottom, --spacing, --width, --height, --align-x, --align-y.

  • Inner classes: .input, .plugin-hint.

.input

  • Description: styling for the search input.

  • Allowed properties: background, color, border-color, border-radius, border-width, padding, padding-left/right/top/bottom, --width, --height, --align-x, --align-y, --text-width, --selection-color, --placeholder-color, font-size.

.plugin-hint

  • Description: set a custom style for text matching plugin regexes.

  • Allowed properties: background, color, border-color, border-radius, border-width, padding, padding-left/right/top/bottom, --width, --height, --align-x, --align-y, font-size.

.rows

  • Description: styling for the search result container.

  • Allowed properties: background, color, border-color, border-radius, border-width, padding, padding-left/right/top/bottom, --width, --height.

  • Inner classes: .row-selected, .row

.row, .row-selected

  • Description: styling for search result rows.

  • Allowed properties: background, color, border-color, border-radius, border-width, padding, padding-left/right/top/bottom, --width, --height align-x, align-y, --spacing.

  • Inner classes: .title, .description, .icon, .category-icon.

.title, .description

  • Description: styling for title and description.

  • Allowed properties: background, color, border-color, border-radius, border-width, padding, padding-left/right/top/bottom, --width, --height align-x, align-y, font-size.

.icon, .category-icon

  • Description: styling for icons and category icons, note that icon will be renderd only if --icon-theme is defined. If .category-icon is not defined only main icons will be rendered.

  • Allowed properties: background, color, border-color, border-radius, border-width, padding, padding-left/right/top/bottom, --width, --height align-x, align-y, --width, --height, --icon-size.

.scrollable

  • Description: styling for the scrollbar.

  • Allowed properties: background, border-color, border-radius, border-width, width, margin.

  • Inner classes: .scroller

.scroller

  • Description: styling for the scroller.

  • Allowed properties: color, border-color, border-radius, border-width, width.

Custom properties

  • --exit-unfocused
    • Type: bool
  • --font-family
    • Type: String
  • --icon-theme
    • Type: String
  • --width, --height
    • Type: lenght
    • Possible values: fill, shrink, fill-portion {value}, {value}
  • --icon-size
    • Type: Integer or pixel value
  • --spacing, --text-width*
    • Type: Integer or pixel value
  • --placeholder-color, --selection-color
    • Type: hexcolor

Example

.onagre {
  --exit-unfocused: false;
  height: 250px;
  width: 400px;
  --font-family: "Iosevka,Iosevka Nerd Font";
  font-size: 18px;
  background: #151515;
  color: #414141;
  padding: 10px;

  .container {
    .search {
      --spacing: 1;
      background: #d8dee9;
      border-radius: 0;
      color: #18181b;
      padding: 4px;
      --height: fill-portion 1;
      .plugin-hint {
        font-size: 9px;
        padding: 4px;
        border-width: 2px;
        --align-x: center;
        --align-y: center;
        --width: fill-portion 2;
        --height: fill;
      }

      .input {
        --width: fill-portion 11;
      }

    }

    .rows {
      --height: fill-portion 6;
      .row-selected {
        color: #ffffff;
        --spacing: 3px;
      }
    }

    .scrollable {
      background: #151515;
      width: 0;
      .scroller {
        width: 0;
        color: #151515;
      }
    }
  }
}
Clone this wiki locally