1ROFI-THEME(5) File Formats Manual ROFI-THEME(5)
2
6 rofi-theme - Rofi theme format files
7
10 The need for a new theme format was motivated by the fact that the way
11 rofi handled widgets has changed. From a very static drawing of lines
12 and text to a nice structured form of packing widgets. This change made
13 it possible to provide a more flexible theme framework. The old theme
14 format and config file are not flexible enough to expose these options
15 in a user-friendly way. Therefore, a new file format has been created,
16 replacing the old one.
17
21 The encoding of the file is utf-8. Both unix (\n) and windows (\r\n)
22 newlines format are supported. But unix is preferred.
23
26 C and C++ file comments are supported.
27 • Anything after // and before a newline is considered a com‐
30 ment.
31 • Everything between /* and */ is a comment.
33 Comments can be nested and the C comments can be inline.
37 The following is valid:
40 // Magic comment.
43 property: /* comment */ value;
44 However, this is not:
48 prop/*comment*/erty: value;
51
55 White space and newlines, like comments, are ignored by the parser.
56 This:
59 property: name;
62 Is identical to:
66 property :
69 name
70 ;
72
76 The preferred file extension for the new theme format is rasi. This is
77 an abbreviation for rofi advanced style information.
78
81 Each element has a section with defined properties. Global properties
82 can be defined in section * { }. Sub-section names begin with a hash
83 symbol #.
84 It is advised to define the global properties section on top of the
87 file to make inheritance of properties clearer.
88 /* Global properties section */
91 * {
92 // list of properties
93 }
94 /* Element theme section. */
96 {element path} {
97 // list of properties
98 }
99 {elements... } {
100 // list of properties
101 }
102 If there are multiple sections with the same name, they are merged. Du‐
106 plicate properties are overwritten and the last parsed entry kept.
107
110 A theme can have one or more global properties sections. If there is
111 more than one, they will be merged.
112 The global properties section denotes the defaults for each element.
115 Each property of this section can be referenced with @{identifier} (See
116 Properties section)
117 A global properties section is indicated with a * as element path.
120
123 A theme can have multiple element theme sections.
124 The element path can consist of multiple names separated by whitespace
127 or dots. Each element may contain any number of letters, numbers and
128 -'s. The first element in the element path should always start with a
129 #. Multiple elements can be specified by a ,.
130 This is a valid element name:
133 element normal.normal {
136 background-color: blue;
137 }
138 button {
139 background-color: blue;
140 }
141 And is identical to:
145 element normal normal, button {
148 background-color: blue;
149 }
150 Each section inherits the global properties. Properties can be explic‐
154 itly inherited from their parent with the inherit keyword. In the fol‐
155 lowing example:
156 window {
159 a: 1;
160 b: 2;
161 children: [ mainbox ];
162 }
163 mainbox {
164 a: inherit;
165 b: 4;
166 c: 8;
167 }
168 The element mainbox will have the following set of properties (if main‐
172 box is a child of window):
173 a: 1;
176 b: 4;
177 c: 8;
178 If multiple sections are defined with the same name, they are merged by
182 the parser. If multiple properties with the same name are defined in
183 one section, the last encountered property is used.
184
187 The properties in a section consist of:
188 {identifier}: {value};
191 Both fields are mandatory for a property.
195 The identifier names the specified property. Identifiers can consist of
198 any combination of numbers, letters and '-'. It must not contain any
199 whitespace. The structure of the value defines the type of the prop‐
200 erty. The current parser does not define or enforce a certain type of a
201 particular identifier. When used, values with the wrong type that can‐
202 not be converted are ignored.
203 The current theme format supports different types:
206 • a string
209 • an integer number
211 • a fractional number
213 • a boolean value
215 • a color
217 • image
219 • text style
221 • line style
223 • a distance
225 • a padding
227 • a border
229 • a position
231 • a reference
233 • an orientation
235 • a cursor
237 • a list of keywords
239 • an environment variable
241 • Inherit
243 Some of these types are a combination of other types.
247
250 • Format: "[:print:]+"
251 A string is always surrounded by double quotes ("). Between the quotes
255 there can be any printable character.
256 For example:
259 font: "Awasome 12";
262 The string must be valid UTF-8.
266
269 • Format: [-+]?[:digit:]+
270 An integer may contain any number.
274 For examples:
277 lines: 12;
280
284 • Format: [-+]?[:digit:]+(\.[:digit:]+)?
285 A real is an integer with an optional fraction.
289 For example:
292 real: 3.4;
295 The following is not valid: .3, 3. or scientific notation: 3.4e-3.
299
302 • Format: (true|false)
303 Boolean value is either true or false. This is case-sensitive.
307 For example:
310 dynamic: false;
313
317 rofi support a limited set of background-image formats.
318 • Format: url("path to image");
321 • Format: url("path to image", scale); where scale is: none,
323 both, width, height
324 • Format: linear-gradient(stop color,stop1, color, stop2 color,
326 ...);
327 • Format: linear-gradient(to direction, stop color,stop1, color,
329 stop2 color, ...); where direction is: top,left,right,bot‐
330 tom.
331 • Format: linear-gradient(angle, stop color,stop1, color, stop2
333 color, ...); Angle in deg,rad,grad (as used in color).
334 Where the path is a string, and stop color is of type color.
338
341 rofi supports the color formats as specified in the CSS standard (1,2,3
342 and some of CSS 4)
343 • Format: #{HEX}{3} (rgb)
346 • Format: #{HEX}{4} (rgba)
348 • Format: #{HEX}{6} (rrggbb)
350 • Format: #{HEX}{8} (rrggbbaa)
352 • Format: rgb[a]({INTEGER},{INTEGER},{INTEGER}[, {PERCENTAGE}])
354 • Format: rgb[a]({INTEGER}%,{INTEGER}%,{INTEGER}%[, {PERCENT‐
356 AGE}])
357 • Format: hsl[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PER‐
359 CENTAGE}])
360 • Format: hwb[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PER‐
362 CENTAGE}])
363 • Format: cmyk( {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE}, {PER‐
365 CENTAGE} [, {PERCENTAGE} ])
366 • Format: {named-color} [ / {PERCENTAGE} ]
368 The white-space format proposed in CSS4 is also supported.
372 The different values are:
375 • {HEX} is a hexadecimal number ('0-9a-f' case insensitive).
378 • {INTEGER} value can be between 0 and 255 or 0-100 when repre‐
380 senting percentage.
381 • {ANGLE} is the angle on the color wheel, can be in deg, rad,
383 grad or turn. When no unit is specified, degrees is assumed.
384 • {PERCENTAGE} can be between 0-1.0, or 0%-100%
386 •
388 {named-color} is one of the following colors:
391 AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque,
393 Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood,
394 CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Corn‐
395 silk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, Dark‐
396 Gray, DarkGrey, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveG‐
397 reen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen,
398 DarkSlateBlue, DarkSlateGray, DarkSlateGrey, DarkTurquoise,
399 DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue,
400 FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, Ghost‐
401 White, Gold, GoldenRod, Gray, Grey, Green, GreenYellow, Honey‐
402 Dew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, Laven‐
403 derBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, Light‐
404 Cyan, LightGoldenRodYellow, LightGray, LightGrey, LightGreen,
405 LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightS‐
406 lateGray, LightSlateGrey, LightSteelBlue, LightYellow, Lime,
407 LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue,
408 MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue,
409 MediumSpringGreen, MediumTurquoise, MediumVioletRed, Midnight‐
410 Blue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, Old‐
411 Lace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGolden‐
412 Rod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, Peach‐
413 Puff, Peru, Pink, Plum, PowderBlue, Purple, RebeccaPurple, Red,
414 RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen,
415 SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, Slate‐
416 Grey, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato,
417 Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, Yellow‐
418 Green,transparent
419 For example:
423 background-color: #FF0000;
426 border-color: rgba(0,0,1, 0.5);
427 text-color: SeaGreen;
428 or
432 background-color: transparent;
435 text-color: Black;
436
440 • Format: (bold|italic|underline|strikethrough|none)
441 Text style indicates how the highlighted text is emphasized. None indi‐
445 cates that no emphasis should be applied.
446 • bold: make the text thicker then the surrounding text.
449 • italic: put the highlighted text in script type (slanted).
451 • underline: put a line under the highlighted text.
453 • strikethrough: put a line through the highlighted text.
455
459 • Format: (dash|solid)
460 Indicates how a line should be drawn. It currently supports:
464 * dash: a dashed line, where the gap is the same width as the dash
465 * solid: a solid line
466
469 • Format: {Integer}px
470 • Format: {Real}em
472 • Format: {Real}ch
474 • Format: {Real}%
476 • Format: {Integer}mm
478 A distance can be specified in 3 different units:
482 • px: Screen pixels.
485 • em: Relative to text height.
487 • ch: Relative to width of a single number.
489 • mm: Actual size in millimeters (based on dpi).
491 • %: Percentage of the monitor size.
493 Distances used in the horizontal direction use the monitor width. Dis‐
497 tances in the vertical direction use the monitor height. For example:
498 padding: 10%;
501 On a full-HD (1920x1080) monitor, it defines a padding of 192 pixels on
505 the left and right side and 108 pixels on the top and bottom.
506 Calculating sizes
509 Rofi supports some maths in calculating sizes. For this it uses the CSS
510 syntax:
511 width: calc( 100% - 37px );
514 It supports the following operations:
518 • + : Add
521 • - : Subtract
523 • / : Divide
525 • * : Multiply
527 • % : Multiply
529 • min : Minimum of l or rvalue;
531 • max : Maximum of l or rvalue;
533 It uses the C precedence ordering.
537
540 • Format: {Integer}
541 • Format: {Distance}
543 • Format: {Distance} {Distance}
545 • Format: {Distance} {Distance} {Distance}
547 • Format: {Distance} {Distance} {Distance} {Distance}
549 If no unit is specified, pixels are assumed.
553 The different number of fields in the formats are parsed like:
556 • 1 field: all
559 • 2 fields: topbottom leftright
561 • 3 fields: top, leftright, bottom
563 • 4 fields: top, right, bottom, left
565
569 • Format: {Integer}
570 • Format: {Distance}
572 • Format: {Distance} {Distance}
574 • Format: {Distance} {Distance} {Distance}
576 • Format: {Distance} {Distance} {Distance} {Distance}
578 • Format: {Distance} {Line style}
580 • Format: {Distance} {Line style} {Distance} {Line style}
582 • Format: {Distance} {Line style} {Distance} {Line style} {Dis‐
584 tance} {Line style}
585 • Format: {Distance} {Line style} {Distance} {Line style} {Dis‐
587 tance} {Line style} {Distance} {Line style}
588 Borders are identical to padding, except that each distance field has a
592 line style property.
593 When no unit is specified, pixels are assumed.
596
599 Indicate a place on the window/monitor.
600 •
603 Format: (center|east|north|west|south|north east|north
606 west|south west|south east)
607 north west | north | north east
609 -------------|-------------|------------
610 west | center | east
611 -------------|-------------|------------
612 south west | south | south east
613
618 It is possible to hide widgets:
619 inputbar {
622 enabled: false; }
623
626 • Format: @{PROPERTY NAME}
627 A reference can point to another reference. Currently, the maximum num‐
631 ber of redirects is 20. A property always refers to another property.
632 It cannot be used for a subpart of the property. For example, this is
633 not valid:
634 highlight: bold @pink;
637 But this is:
641 * {
644 myhigh: bold #FAA;
645 }
646 window {
648 highlight: @myhigh;
649 }
650
654 • Format: (horizontal|vertical)
655 Specify the orientation of the widget.
659
662 • Format: (default|pointer|text)
663 Specify the type of mouse cursor that is set when the mouse pointer is
667 over the widget.
668
671 • Format: [ keyword, keyword ]
672 A list starts with a '[' and ends with a ']'. The entries in the list
676 are comma-separated. The keyword in the list refers to an widget name.
677
680 • Format: ${:alnum:}
681 This will parse the environment variable as the property value. (that
685 then can be any of the above types). The environment variable should
686 be an alphanumeric string without white-space.
687 * {
690 background-color: ${BG};
691 }
692
696 • Format: inherit
697 Inherits the property from its parent widget.
701 mainbox {
704 border-color: inherit;
705 }
706
710 Element paths exists of two parts, the first part refers to the actual
711 widget by name. Some widgets have an extra state.
712 For example:
715 element selected {
718 }
719 Here element selected is the name of the widget, selected is the state
723 of the widget.
724 The difference between dots and spaces is purely cosmetic. These are
727 all the same:
728 element .selected {
731 element.selected {
733 }
734 element selected {
735 }
736
741 The current widgets available in rofi:
742 • window
745 • overlay: the overlay widget.
748 • mainbox: The mainbox box.
750 • inputbar: The input bar box.
752 • box: the horizontal @box packing the widgets
755 • case-indicator: the case/sort indicator @textbox
757 • prompt: the prompt @textbox
759 • entry: the main entry @textbox
761 • num-rows: Shows the total number of rows.
763 • num-filtered-rows: Shows the total number of rows after
765 filtering.
766 • listview: The listview.
769 • scrollbar: the listview scrollbar
772 • element: a box in the listview holding the entries
774 • element-icon: the widget in the listview's entry showing
777 the (optional) icon
778 • element-index: the widget in the listview's entry key‐
780 bindable index (1,2,3..0)
781 • element-text: the widget in the listview's entry showing
783 the text.
784 • mode-switcher: the main horizontal @box packing the buttons.
788 • button: the buttons @textbox for each mode
791 • message: The container holding the textbox.
794 • textbox: the message textbox
797 Note that these path names match the default theme. Themes that provide
803 a custom layout will have different elements, and structure.
804
807 State: State of widget
808 Optional flag(s) indicating state of the widget, used for theming.
811 These are appended after the name or class of the widget.
814 Example:
817 button selected.normal { }
818 element selected.urgent { }
821 Currently only the entrybox and scrollbar have states:
824 Entrybox:
827 {visible modifier}.{state}
828 Where visible modifier can be:
831 * normal: no modification
832 * selected: the entry is selected/highlighted by user
833 * alternate: the entry is at an alternating row (uneven row)
834 Where state is:
837 * normal: no modification
838 * urgent: this entry is marked urgent
839 * active: this entry is marked active
840 These can be mixed.
843 Example:
846 nametotextbox selected.active {
849 background-color: #003642;
850 text-color: #008ed4;
851 }
852 Sets all selected textboxes marked active to the given text and back‐
856 ground color. Note that a state modifies the original element, it
857 therefore contains all the properties of that element.
858 Scrollbar
861 The scrollbar uses the handle state when drawing the small scrollbar
862 handle. This allows the colors used for drawing the handle to be set
863 independently.
864
867 The following properties are currently supported:
868 all widgets:
871 • enabled: enable/disable the widget
872 • padding: padding Padding on the inside of the widget
874 • margin: padding Margin on the outside of the widget
876 • border: border Border around the widget (between pad‐
878 ding and margin)/
879 • border-radius: padding Sets a radius on the corners of the
881 borders.
882 • background-color: color Background color
884 • background-image: image Background image
886 • border-color: color Color of the border
888 • cursor: cursor Type of mouse cursor that is set when the
890 mouse pointer is hovered over the widget.
891 window:
895 •
896 font: string The font used in the window
899 •
901 transparency: string Indicating if transparency should be
904 used and what type: real - True transparency. Only works with a
905 compositor. background - Take a screenshot of the background
906 image and use that. screenshot - Take a screenshot of the
907 screen and use that. Path to png file - Use an image.
908 •
910 location: position The place of the anchor on the monitor
913 •
915 anchor: anchor The anchor position on the window
918 •
920 fullscreen: boolean Window is fullscreen.
923 •
925 width: distance The width of the window
928 •
930 x-offset: distance
933 •
935 y-offset: distance The offset of the window to the anchor
938 point, allowing you to push the window left/right/up/down
939 scrollbar:
943 • background-color: color
944 • handle-width: distance
946 • handle-color: color
948 • border-color: color
950 box:
954 • orientation: orientation
955 Set the direction the elements are packed.
956 • spacing: distance
958 Distance between the packed elements.
959 textbox:
963 • background-color: color
964 • border-color: the color used for the border around the
966 widget.
967 • font: the font used by this textbox (string).
969 • str: the string to display by this textbox
971 (string).
972 • vertical-align: Vertical alignment of the text. A number
974 between 0 (top) and 1 (bottom).
975 • horizontal-align: Horizontal alignment of the text. A number
977 between 0 (left) and 1 (right).
978 • text-color: the text color to use.
980 • highlight: text style {color}. color is optional,
982 multiple highlight styles can be added like: bold underline
983 italic #000000; This option is only available on the ele‐
984 ment-text widget.
985 • width: override the desired width for the textbox.
987 • content: Set the displayed text (String).
989 • placeholder: Set the displayed text (String) when noth‐
991 ing is entered.
992 • placeholder-color: Color of the placeholder text.
994 • blink: Enable/Disable blinking on an input textbox
996 (Boolean).
997 • markup: Force markup on, beware that only valid
999 pango markup strings are shown.
1000 listview:
1004 • columns: integer Number of columns to show (at least
1005 1)
1006 • fixed-height: boolean Always show lines rows, even if fewer
1008 elements are available.
1009 • dynamic: boolean True if the size should change when
1011 filtering the list, False if it should keep the original
1012 height.
1013 • scrollbar: boolean If the scrollbar should be en‐
1015 abled/disabled.
1016 • scrollbar-width: distance Width of the scrollbar
1018 • cycle: boolean When navigating, it should wrap
1020 around
1021 • spacing: distance Spacing between the elements (both
1023 vertical and horizontal)
1024 • lines: integer Number of rows to show in the list
1026 view.
1027 • layout: orientation Indicate how elements are
1029 stacked. Horizontal implements the dmenu style.
1030 • reverse: boolean Reverse the ordering (top down to
1032 bottom up).
1033 • fixed-columns: boolean Do not reduce the number of columns
1035 shown when number of visible elements is not enough to fill
1036 them all.
1037 Each element is a box called element. Each element can contain an ele‐
1041 ment-icon and element-text.
1042 listview text highlight:
1045 The element-text widget in the listview is the one used to show the
1046 text. On this widget set the highlight property (only place this prop‐
1047 erty is used) to change the style of highlighting. The highlight prop‐
1048 erty consist of the text-style property and a color.
1049 To disable highlighting:
1052 element-text {
1055 highlight: None;
1056 }
1057 To set to red underlined:
1061 element-text {
1064 highlight: underline red;
1065 }
1066
1070 The new format allows the layout of the rofi window to be tweaked ex‐
1071 tensively. For each widget, the themer can specify padding, margin,
1072 border, font, and more. It even allows, as an advanced feature, to
1073 pack widgets in a custom structure.
1074 Basic structure
1077 The whole view is made out of boxes that pack other boxes or widgets.
1078 The box can be vertical or horizontal. This is loosely inspired by GTK
1079 ⟨http://gtk.org/⟩.
1080 The current layout of rofi is structured as follows:
1083 |------------------------------------------------------------------------------------|
1086 | window {BOX:vertical} |
1087 | |-------------------------------------------------------------------------------| |
1088 | | mainbox {BOX:vertical} | |
1089 | | |---------------------------------------------------------------------------| | |
1090 | | | inputbar {BOX:horizontal} | | |
1091 | | | |---------| |-| |---------------------------------|---| |---| |---| |---| | | |
1092 | | | | prompt | |:| | entry |#fr| | / | |#ns| |ci | | | |
1093 | | | |---------| |_| |---------------------------------|---| |---| |---| |---| | | |
1094 | | |---------------------------------------------------------------------------| | |
1095 | | | |
1096 | | |---------------------------------------------------------------------------| | |
1097 | | | message | | |
1098 | | | |-----------------------------------------------------------------------| | | |
1099 | | | | textbox | | | |
1100 | | | |-----------------------------------------------------------------------| | | |
1101 | | |---------------------------------------------------------------------------| | |
1102 | | | |
1103 | | |-----------------------------------------------------------------------------| |
1104 | | | listview | |
1105 | | |-----------------------------------------------------------------------------| |
1106 | | | |
1107 | | |---------------------------------------------------------------------------| | |
1108 | | | mode-switcher {BOX:horizontal} | | |
1109 | | | |---------------| |---------------| |--------------| |---------------| | | |
1110 | | | | Button | | Button | | Button | | Button | | | |
1111 | | | |---------------| |---------------| |--------------| |---------------| | | |
1112 | | |---------------------------------------------------------------------------| | |
1113 | |-------------------------------------------------------------------------------| |
1114 |------------------------------------------------------------------------------------|
1115 • ci is the case-indicator
1121 • fr is the num-filtered-rows
1123 • ns is the num-rows
1125 Error message structure
1130 |-----------------------------------------------------------------------------------|
1131 | window {BOX:vertical} |
1132 | |------------------------------------------------------------------------------| |
1133 | | error-message {BOX:vertical} | |
1134 | | |-------------------------------------------------------------------------| | |
1135 | | | textbox | | |
1136 | | | |-----------------| |-------------------------------------------------| | | |
1137 | | | |element-icon | |element-text | | | |
1138 | | | |-----------------| |-------------------------------------------------| | | |
1139 | | |-------------------------------------------------------------------------| | |
1140 | |------------------------------------------------------------------------------| |
1141 |-----------------------------------------------------------------------------------|
1142 Advanced layout
1148 The layout of rofi can be tweaked by packing the 'fixed' widgets in a
1149 custom structure.
1150 The following widgets are fixed, as they provide core rofi functional‐
1153 ity:
1154 • prompt
1157 • entry
1159 • overlay
1161 • case-indicator
1163 • message
1165 • listview
1167 • mode-switcher
1169 • num-rows
1171 • num-filtered-rows
1173 The following keywords are defined and can be used to automatically
1177 pack a subset of the widgets. These are used in the default theme as
1178 depicted in the figure above.
1179 • mainbox Packs: inputbar, message, listview, mode-switcher
1182 • inputbar Packs: prompt,entry,case-indicator
1184 Any widget name starting with textbox is a textbox widget, others are
1188 box widgets and can pack other widgets.
1189 There are several special widgets that can be used by prefixing the
1192 name of the widget:
1193 textbox
1196 This is a read-only textbox widget. The displayed string can be set
1197 with content.
1198 Example:
1201 textbox-custom {
1204 expand: false;
1205 content: "My Message";
1206 }
1207 Icon
1211 This is an icon widget. The displayed icon can be set with filename and
1212 size with size. If the property action is set, it acts as a button.
1213 action can be set to a keybinding name and completes that action. (see
1214 rofi -show keys for a list).
1215 If the squared property is set to false the widget height and width are
1218 not forced to be equal.
1219 Example:
1222 icon-paste {
1225 expand: false;
1226 filename: "gtk-paste";
1227 size: 24;
1228 vertical-align: 0.5;
1229 action: "kb-primary-paste";
1230 }
1231 button
1235 This is a textbox widget that can have a 'clickable' action. The ac‐
1236 tion can be set to: keybinding: accepts a keybinding name and completes
1237 that action. (see rofi -show keys for a list).
1238 button-paste {
1241 expand: false;
1242 content: "My Clickable Message";
1243 vertical-align: 0.5;
1244 action: "kb-primary-paste";
1245 }
1246 Children
1250 To specify children, set the children property (this always happens on
1251 the box child, see example below):
1252 inputbar {
1255 children: [prompt,entry,overlay,case-indicator];
1256 }
1257 The theme needs to be updated to match the hierarchy specified.
1261 Below is an example of a theme emulating dmenu:
1264 * {
1267 background-color: Black;
1268 text-color: White;
1269 border-color: White;
1270 font: "Times New Roman 12";
1271 }
1272 window {
1274 anchor: north;
1275 location: north;
1276 width: 100%;
1277 padding: 4px;
1278 children: [ horibox ];
1279 }
1280 horibox {
1282 orientation: horizontal;
1283 children: [ prompt, entry, listview ];
1284 }
1285 listview {
1287 layout: horizontal;
1288 spacing: 5px;
1289 lines: 10;
1290 }
1291 entry {
1293 expand: false;
1294 width: 10em;
1295 }
1296 element {
1298 padding: 0px 2px;
1299 }
1300 element selected {
1301 background-color: SteelBlue;
1302 }
1303 Padding and margin
1307 Just like CSS, rofi uses the box model for each widget.
1308 |-------------------------------------------------------------------|
1311 | margin |
1312 | |-------------------------------------------------------------| |
1313 | | border | |
1314 | | |---------------------------------------------------------| | |
1315 | | | padding | | |
1316 | | | |-----------------------------------------------------| | | |
1317 | | | | content | | | |
1318 | | | |-----------------------------------------------------| | | |
1319 | | |---------------------------------------------------------| | |
1320 | |-------------------------------------------------------------| |
1321 |-------------------------------------------------------------------|
1322 Explanation of the different parts:
1326 • Content - The content of the widget.
1329 • Padding - Clears an area around the widget. The padding shows
1331 the background color of the widget.
1332 • Border - A border that goes around the padding and content.
1334 The border use the border-color of the widget.
1335 • Margin - Clears an area outside the border. The margin is
1337 transparent.
1338 The box model allows us to add a border around elements, and to define
1342 space between elements.
1343 The size of each margin, border, and padding can be set. For the bor‐
1346 der, a linestyle and radius can be set.
1347 Spacing
1350 Widgets that can pack more then one child widget (currently box and
1351 listview) have the spacing property. This property sets the distance
1352 between the packed widgets (both horizontally and vertically).
1353 |---------------------------------------|
1356 | |--------| s |--------| s |-------| |
1357 | | child | p | child | p | child | |
1358 | | | a | | a | | |
1359 | | | c | | c | | |
1360 | | | i | | i | | |
1361 | | | n | | n | | |
1362 | |--------| g |--------| g |-------| |
1363 |---------------------------------------|
1364 Advanced box packing
1368 More dynamic spacing can be achieved by adding dummy widgets, for exam‐
1369 ple to make one widget centered:
1370 |--------------------------------------------|
1373 | |-----------| |--------| |-----------| |
1374 | | dummy | | child | | dummy | |
1375 | | expand: y | | | | expand: y | |
1376 | | | | | | | |
1377 | | | | | | | |
1378 | | | | | | | |
1379 | |-----------| |--------| |-----------| |
1380 |--------------------------------------------|
1381 If both dummy widgets are set to expand, child will be centered. De‐
1385 pending on the expand flag of child the remaining space will be equally
1386 divided between both dummy and child widget (expand enabled), or both
1387 dummy widgets (expand disabled).
1388
1391 To get debug information from the parser, run rofi like:
1392 G_MESSAGES_DEBUG=Parser rofi -show run
1395 Syntax errors are shown in a popup and printed out to command line with
1399 the above command.
1400 To see the elements queried during running, run:
1403 G_MESSAGES_DEBUG=Theme rofi -show run
1406 To test minor changes, part of the theme can be passed on the command
1410 line, for example to set it to full-screen:
1411 rofi -theme-str 'window { fullscreen:true;}' -show run
1414 To print the current theme, run:
1418 rofi -dump-theme
1421
1425 Parts of the theme can be conditionally loaded, like the CSS @media op‐
1426 tion.
1427 @media ( min-width: 120 ) {
1430 }
1432 It supports the following keys as constraint:
1436 • min-width: load when width is bigger or equal then
1439 value.
1440 • max-width: load when width is smaller then value.
1442 • min-height: load when height is bigger or equal then
1444 value.
1445 • max-height: load when height is smaller then value.
1447 • min-aspect-ratio load when aspect ratio is over value.
1449 • max-aspect-ratio: load when aspect ratio is under value.
1451 • monitor-id: The monitor id, see rofi -help for id's.
1453 @media takes an integer number or a fraction, for integer number px can
1457 be added.
1458 @media ( min-width: 120 px ) {
1461 }
1463
1467 Rofi uses pango ⟨https://pango.gnome.org/⟩ for font rendering. The font
1468 should be specified in a format that pango understands. This normally
1469 is the font name followed by the font size. For example:
1470 mono 18
1473 Or
1477 FontAwesome 22
1480
1484 The rasi file format offers two methods of including other files. This
1485 can be used to modify existing themes, or have multiple variations on a
1486 theme.
1487 • import: Import and parse a second file.
1490 • theme: Discard theme, and load file as a fresh theme.
1492 Syntax:
1496 @import "myfile"
1499 @theme "mytheme"
1500 The specified file can either by name, filename,full path.
1504 If a filename is provided, it will try to resolve it in the following
1507 order:
1508 • ${XDG_CONFIG_HOME}/rofi/themes/
1511 • ${XDG_CONFIG_HOME}/rofi/
1513 • ${XDG_DATA_HOME}/rofi/themes/
1515 • ${INSTALL PREFIX}/share/rofi/themes/
1517 A name is resolved as a filename by appending the .rasi extension.
1521
1524 Several examples are installed together with rofi. These can be found
1525 in {datadir}/rofi/themes/, where {datadir} is the install path of rofi
1526 data. When installed using a package manager, this is usually:
1527 /usr/share/.
1528
1531 rofi(1), rofi-script(5), rofi-theme-selector(1)
1532 rofi-theme ROFI-THEME(5)