-
-
Notifications
You must be signed in to change notification settings - Fork 27
Theming
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.
-
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
-
Description: the theme root.
-
Allowed properties:
background
,color
,border-color
,border-radius
,border-width
,padding
,padding-left/right/top/bottom
. -
Inner classes:
.rows
,.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
.
-
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
.
-
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
.
-
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
-
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
.
-
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
.
-
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
.
-
Description: styling for the scrollbar.
-
Allowed properties:
background
,border-color
,border-radius
,border-width
,width
,margin
. -
Inner classes:
.scroller
-
Description: styling for the scroller.
-
Allowed properties:
color
,border-color
,border-radius
,border-width
,width
.
-
--exit-unfocused
- Type:
bool
- Type:
-
--font-family
- Type:
String
- Type:
-
--icon-theme
- Type:
String
- Type:
-
--width, --height
- Type:
lenght
- Possible values:
fill
,shrink
,fill-portion {value}
,{value}
- Type:
-
--icon-size
- Type:
Integer
orpixel value
- Type:
-
--spacing
,--text-width
*- Type:
Integer
orpixel value
- Type:
-
--placeholder-color
,--selection-color
- Type:
hexcolor
- Type:
.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;
}
}
}
}