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 comment.
29 · Everything between /* and */ is a comment.
31 Comments can be nested and the C comments can be inline.
34 The following is valid:
37 // Magic comment.
40 property: /* comment */ value;
41 However, this is not:
45 prop/*comment*/erty: value;
48
52 White space and newlines, like comments, are ignored by the parser.
53 This:
56 property: name;
59 Is identical to:
63 property :
66 name
67 ;
69
73 The preferred file extension for the new theme format is rasi. This is
74 an abbreviation for rofi advanced style information.
75
78 Each element has a section with defined properties. Global properties
79 can be defined in section * { }. Sub-section names begin with a hash
80 symbol #.
81 It is advised to define the global properties section on top of the
84 file to make inheritance of properties clearer.
85 /* Global properties section */
88 * {
89 // list of properties
90 }
91 /* Element theme section. */
93 {element path} {
94 // list of properties
95 }
96 {elements... } {
97 // list of properties
98 }
99 If there are multiple sections with the same name, they are merged.
103 Duplicate properties are overwritten and the last parsed entry kept.
104
107 A theme can have one or more global properties sections. If there is
108 more than one, they will be merged.
109 The global properties section denotes the defaults for each element.
112 Each property of this section can be referenced with @{identifier} (See
113 Properties section)
114 A global properties section is indicated with a * as element path.
117
120 A theme can have multiple element theme sections.
121 The element path can consist of multiple names separated by whitespace
124 or dots. Each element may contain any number of letters, numbers and
125 -'s. The first element in the element path should always start with a
126 #. Multiple elements can be specified by a ,.
127 This is a valid element name:
130 element normal.normal {
133 background-color: blue;
134 }
135 button {
136 background-color: blue;
137 }
138 And is identical to:
142 element normal normal, button {
145 background-color: blue;
146 }
147 Each section inherits the global properties. Properties can be explic‐
151 itly inherited from their parent with the inherit keyword. In the fol‐
152 lowing example:
153 window {
156 a: 1;
157 b: 2;
158 children: [ mainbox ];
159 }
160 mainbox {
161 a: inherit;
162 b: 4;
163 c: 8;
164 }
165 The element mainbox will have the following set of properties (if main‐
169 box is a child of window):
170 a: 1;
173 b: 4;
174 c: 8;
175 If multiple sections are defined with the same name, they are merged by
179 the parser. If multiple properties with the same name are defined in
180 one section, the last encountered property is used.
181
184 The properties in a section consist of:
185 {identifier}: {value};
188 Both fields are mandatory for a property.
192 The identifier names the specified property. Identifiers can consist of
195 any combination of numbers, letters and '-'. It must not contain any
196 whitespace. The structure of the value defines the type of the prop‐
197 erty. The current parser does not define or enforce a certain type of a
198 particular identifier. When used, values with the wrong type that can‐
199 not be converted are ignored.
200 The current theme format supports different types:
203 · a string
205 · an integer number
207 · a fractional number
209 · a boolean value
211 · a color
213 · text style
215 · line style
217 · a distance
219 · a padding
221 · a border
223 · a position
225 · a reference
227 · an orientation
229 · a list of keywords
231 · an environment variable
233 · Inherit
235 Some of these types are a combination of other types.
238
241 Format: "[:print:]+"
242 A string is always surrounded by double quotes ("). Between the quotes
245 there can be any printable character.
246 For example:
249 font: "Awasome 12";
252 The string must be valid UTF-8.
256
259 Format: [-+]?[:digit:]+
260 An integer may contain any number.
263 For examples:
266 lines: 12;
269
273 Format: [-+]?[:digit:]+(\.[:digit:]+)?
274 A real is an integer with an optional fraction.
277 For example:
280 real: 3.4;
283 The following is not valid: .3, 3. or scientific notation: 3.4e-3.
287
290 Format: (true|false)
291 Boolean value is either true or false. This is case-sensitive.
294 For example:
297 dynamic: false;
300
304 rofi supports the color formats as specified in the CSS standard (1,2,3
305 and some of CSS 4)
306 · Format: #{HEX}{3} (rgb)
308 · Format: #{HEX}{4} (rgba)
310 · Format: #{HEX}{6} (rrggbb)
312 · Format: #{HEX}{8} (rrggbbaa)
314 · Format: rgb[a]({INTEGER},{INTEGER},{INTEGER}[, {PERCENTAGE}])
316 · Format: rgb[a]({INTEGER}%,{INTEGER}%,{INTEGER}%[, {PERCENTAGE}])
318 · Format: hsl[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE}])
320 · Format: hwb[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE}])
322 · Format: cmyk( {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE}
324 [, {PERCENTAGE} ])
325 · Format: {named-color} [ / {PERCENTAGE} ]
327 The white-space format proposed in CSS4 is also supported.
330 The different values are:
333 · {HEX} is a hexadecimal number ('0-9a-f' case insensitive).
335 · {INTEGER} value can be between 0 and 255 or 0-100 when representing
337 percentage.
338 · {ANGLE} is the angle on the color wheel, can be in deg, rad, grad or
340 turn. When no unit is specified, degrees is assumed.
341 · {PERCENTAGE} can be between 0-1.0, or 0%-100%
343 ·
345 {named-color} is one of the following colors:
348 AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black,
350 BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Char‐
351 treuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan,
352 DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGrey, DarkGreen, Dark‐
353 Khaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed,
354 DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkSlateGrey,
355 DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey,
356 DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro,
357 GhostWhite, Gold, GoldenRod, Gray, Grey, Green, GreenYellow, HoneyDew,
358 HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LavenderBlush,
359 LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGolden‐
360 RodYellow, LightGray, LightGrey, LightGreen, LightPink, LightSalmon,
361 LightSeaGreen, LightSkyBlue, LightSlateGray, LightSlateGrey, Light‐
362 SteelBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, Mediu‐
363 mAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen,
364 MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed,
365 MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, Old‐
366 Lace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, Pale‐
367 Green, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink,
368 Plum, PowderBlue, Purple, RebeccaPurple, Red, RosyBrown, RoyalBlue,
369 SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver,
370 SkyBlue, SlateBlue, SlateGray, SlateGrey, Snow, SpringGreen, SteelBlue,
371 Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White,
372 WhiteSmoke, Yellow, YellowGreen,transparent
373 For example:
376 background-color: #FF0000;
379 border-color: rgba(0,0,1, 0.5);
380 text-color: SeaGreen;
381 or
385 background-color: transparent;
388 text-color: Black;
389
393 Format: (bold|italic|underline|strikethrough|none)
394 Text style indicates how the highlighted text is emphasized. None indi‐
397 cates that no emphasis should be applied.
398 · bold: make the text thicker then the surrounding text.
400 · italic: put the highlighted text in script type (slanted).
402 · underline: put a line under the highlighted text.
404 · strikethrough: put a line through the highlighted text.
406 · small caps: emphasise the text using capitalization.
408 For some reason small caps does not work on some systems.
411
414 Format: (dash|solid)
415 Indicates how a line should be drawn. It currently supports:
418 * dash: a dashed line, where the gap is the same width as the dash
419 * solid: a solid line
420
423 Format: {Integer}px
424 · Format: {Real}em
426 · Format: {Real}ch
428 · Format: {Real}%
430 · Format: {Integer}mm
432 A distance can be specified in 3 different units:
435 · px: Screen pixels.
437 · em: Relative to text height.
439 · ch: Relative to width of a single number.
441 · mm: Actual size in millimeters (based on dpi).
443 · %: Percentage of the monitor size.
445 Distances used in the horizontal direction use the monitor width. Dis‐
448 tances in the vertical direction use the monitor height. For example:
449 padding: 10%;
452 On a full-HD (1920x1080) monitor, it defines a padding of 192 pixels on
456 the left and right side and 108 pixels on the top and bottom.
457 Calculating sizes
460 Rofi supports some maths in calculating sizes. For this it uses the CSS
461 syntax:
462 width: calc( 100% - 37px );
465 It supports the following operations:
469 · + : Add
471 · - : Subtract
473 · / : Divide
475 · * : Multiply
477 · % : Multiply
479 · min : Minimum of l or rvalue;
481 · max : Maximum of l or rvalue;
483 It uses the C precedence ordering.
486
489 Format: {Integer}
490 · Format: {Distance}
492 · Format: {Distance} {Distance}
494 · Format: {Distance} {Distance} {Distance}
496 · Format: {Distance} {Distance} {Distance} {Distance}
498 If no unit is specified, pixels are assumed.
501 The different number of fields in the formats are parsed like:
504 · 1 field: all
506 · 2 fields: topbottom leftright
508 · 3 fields: top, leftright, bottom
510 · 4 fields: top, right, bottom, left
512
515 Format: {Integer}
516 · Format: {Distance}
518 · Format: {Distance} {Distance}
520 · Format: {Distance} {Distance} {Distance}
522 · Format: {Distance} {Distance} {Distance} {Distance}
524 · Format: {Distance} {Line style}
526 · Format: {Distance} {Line style} {Distance} {Line style}
528 · Format: {Distance} {Line style} {Distance} {Line style} {Distance}
530 {Line style}
531 · Format: {Distance} {Line style} {Distance} {Line style} {Distance}
533 {Line style} {Distance} {Line style}
534 Borders are identical to padding, except that each distance field has a
537 line style property.
538 When no unit is specified, pixels are assumed.
541
544 Indicate a place on the window/monitor.
545 · Format: (center|east|north|west|south|north east|north west|south
547 west|south east)
548 north west | north | north east
551 -------------|-------------|------------
552 west | center | east
553 -------------|-------------|------------
554 south west | south | south east
555
559 It is possible to hide widgets:
560 inputbar {
563 enabled: false; }
564
567 Format: @{PROPERTY NAME}
568 A reference can point to another reference. Currently, the maximum num‐
571 ber of redirects is 20. A property always refers to another property.
572 It cannot be used for a subpart of the property. For example, this is
573 not valid:
574 highlight: bold @pink;
577 But this is:
581 * {
584 myhigh: bold #FAA;
585 }
586 window {
588 highlight: @myhigh;
589 }
590
594 Format: (horizontal|vertical)
595 Specify the orientation of the widget.
598
601 Format: [ keyword, keyword ]
602 A list starts with a '[' and ends with a ']'. The entries in the list
605 are comma-separated. The keyword in the list refers to an widget name.
606
609 Format: ${:alnum:}
610 This will parse the environment variable as the property value. (that
613 then can be any of the above types). The environment variable should
614 be an alphanumeric string without white-space.
615 * {
618 background-color: ${BG};
619 }
620
624 Format: inherit
625 Inherits the property from its parent widget.
628 mainbox {
631 border-color: inherit;
632 }
633
637 Element paths exists of two parts, the first part refers to the actual
638 widget by name. Some widgets have an extra state.
639 For example:
642 element selected {
645 }
646 Here element selected is the name of the widget, selected is the state
650 of the widget.
651 The difference between dots and spaces is purely cosmetic. These are
654 all the same:
655 element .selected {
658 element.selected {
660 }
661 element selected {
662 }
663
668 The current widgets available in rofi:
669 · window
671 · overlay: the overlay widget.
673 · mainbox: The mainbox box.
675 · inputbar: The input bar box.
677 · box: the horizontal @box packing the widgets
679 · case-indicator: the case/sort indicator @textbox
681 · prompt: the prompt @textbox
683 · entry: the main entry @textbox
685 · num-rows: Shows the total number of rows.
687 · num-filtered-rows: Shows the total number of rows after filtering.
689 · listview: The listview.
691 · scrollbar: the listview scrollbar
693 · element: a box in the listview holding the entries
695 · element-icon: the widget in the listview's entry showing the
697 (optional) icon
698 · element-index: the widget in the listview's entry keybindable index
700 (1,2,3..0)
701 · element-text: the widget in the listview's entry showing the text.
703 · mode-switcher: the main horizontal @box packing the buttons.
705 · button: the buttons @textbox for each mode
707 · message: The container holding the textbox.
709 · textbox: the message textbox
711 Note that these path names match the default theme. Themes that provide
714 a custom layout will have different elements, and structure.
715
718 State: State of widget
719 Optional flag(s) indicating state of the widget, used for theming.
722 These are appended after the name or class of the widget.
725 Example:
728 button selected.normal { }
729 element selected.urgent { }
732 Currently only the entrybox and scrollbar have states:
735 Entrybox:
738 {visible modifier}.{state}
739 Where visible modifier can be:
742 * normal: no modification
743 * selected: the entry is selected/highlighted by user
744 * alternate: the entry is at an alternating row (uneven row)
745 Where state is:
748 * normal: no modification
749 * urgent: this entry is marked urgent
750 * active: this entry is marked active
751 These can be mixed.
754 Example:
757 nametotextbox selected.active {
760 background-color: #003642;
761 text-color: #008ed4;
762 }
763 Sets all selected textboxes marked active to the given text and back‐
767 ground color. Note that a state modifies the original element, it
768 therefore contains all the properties of that element.
769 Scrollbar
772 The scrollbar uses the handle state when drawing the small scrollbar
773 handle. This allows the colors used for drawing the handle to be set
774 independently.
775
778 The following properties are currently supported:
779 all widgets:.IP · 2
782 enabled: enable/disable the widget
783 · padding: padding Padding on the inside of the widget
785 · margin: padding Margin on the outside of the widget
787 · border: border Border around the widget (between padding and
789 margin)/
790 · border-radius: padding Sets a radius on the corners of the bor‐
792 ders.
793 · background-color: color Background color
795 · border-color: color Color of the border
797 window:.IP · 2
800 font: string The font used in the window
801 ·
803 transparency: string Indicating if transparency should be used and
806 what type: real - True transparency. Only works with a compositor.
807 background - Take a screenshot of the background image and use that.
808 screenshot - Take a screenshot of the screen and use that. Path to png
809 file - Use an image.
810 ·
812 location: position The place of the anchor on the monitor
815 ·
817 anchor: anchor The anchor position on the window
820 ·
822 fullscreen: boolean Window is fullscreen.
825 ·
827 width: distance The width of the window
830 ·
832 x-offset: distance
835 ·
837 y-offset: distance The offset of the window to the anchor point,
840 allowing you to push the window left/right/up/down
841 scrollbar:.IP · 2
844 background-color: color
845 · handle-width: distance
847 · handle-color: color
849 · border-color: color
851 box:.IP · 2
854 orientation: orientation
855 Set the direction the elements are packed.
856 · spacing: distance
858 Distance between the packed elements.
859 textbox:.IP · 2
862 background-color: color
863 · border-color: the color used for the border around the widget.
865 · font: the font used by this textbox (string).
867 · str: the string to display by this textbox (string).
869 · vertical-align: vertical alignment of the text (0 top, 1 bottom).
871 · horizontal-align: horizontal alignment of the text (0 left, 1
873 right).
874 · text-color: the text color to use.
876 · highlight: text style {color}. color is optional, multiple
878 highlight styles can be added like: bold underline italic #000000;
879 · width: override the desired width for the textbox.
881 · content: Set the displayed text (String).
883 · placeholder: Set the displayed text (String) when nothing is
885 entered.
886 · placeholder-color: Color of the placeholder text.
888 · blink: Enable/Disable blinking on an input textbox (Bool‐
890 ean).
891 listview:.IP · 2
894 columns: integer Number of columns to show (at least 1)
895 · fixed-height: boolean Always show lines rows, even if fewer ele‐
897 ments are available.
898 · dynamic: boolean True if the size should change when filter‐
900 ing the list, False if it should keep the original height.
901 · scrollbar: boolean If the scrollbar should be enabled/disabled.
903 · scrollbar-width: distance Width of the scrollbar
905 · cycle: boolean When navigating, it should wrap around
907 · spacing: distance Spacing between the elements (both vertical
909 and horizontal)
910 · lines: integer Number of rows to show in the list view.
912 · layout: orientation Indicate how elements are stacked. Hor‐
914 izontal implements the dmenu style.
915 · reverse: boolean Reverse the ordering (top down to bottom
917 up).
918 · fixed-columns: boolean Do not reduce the number of columns shown
920 when number of visible elements is not enough to fill them all.
921 Each element is a box called element. Each element can contain an ele‐
924 ment-icon and element-text.
925 listview text highlight:
928 The element-text widget in the listview is the one used to show the
929 text. On this widget set the highlight property (only place this prop‐
930 erty is used) to change the style of highlighting. The highlight prop‐
931 erty consist of the text-style property and a color.
932 To disable highlighting:
935 element-text {
938 highlight: None;
939 }
940 To set to red underlined:
944 element-text {
947 highlight: underline red;
948 }
949
953 The new format allows the layout of the rofi window to be tweaked
954 extensively. For each widget, the themer can specify padding, margin,
955 border, font, and more. It even allows, as an advanced feature, to
956 pack widgets in a custom structure.
957 Basic structure
960 The whole view is made out of boxes that pack other boxes or widgets.
961 The box can be vertical or horizontal. This is loosely inspired by GTK
962 ⟨http://gtk.org/⟩.
963 The current layout of rofi is structured as follows:
966 |------------------------------------------------------------------------------------|
969 | window {BOX:vertical} |
970 | |-------------------------------------------------------------------------------| |
971 | | mainbox {BOX:vertical} | |
972 | | |---------------------------------------------------------------------------| | |
973 | | | inputbar {BOX:horizontal} | | |
974 | | | |---------| |-----------------------------------------------------| |---| | | |
975 | | | | prompt | | entry | |ci | | | |
976 | | | |---------| |-----------------------------------------------------| |---| | | |
977 | | |---------------------------------------------------------------------------| | |
978 | | | |
979 | | |---------------------------------------------------------------------------| | |
980 | | | message | | |
981 | | | |-----------------------------------------------------------------------| | | |
982 | | | | textbox | | | |
983 | | | |-----------------------------------------------------------------------| | | |
984 | | |---------------------------------------------------------------------------| | |
985 | | | |
986 | | |-----------------------------------------------------------------------------| |
987 | | | listview | |
988 | | |-----------------------------------------------------------------------------| |
989 | | | |
990 | | |---------------------------------------------------------------------------| | |
991 | | | mode-switcher {BOX:horizontal} | | |
992 | | | |---------------| |---------------| |--------------| |---------------| | | |
993 | | | | Button | | Button | | Button | | Button | | | |
994 | | | |---------------| |---------------| |--------------| |---------------| | | |
995 | | |---------------------------------------------------------------------------| | |
996 | |-------------------------------------------------------------------------------| |
997 |------------------------------------------------------------------------------------|
998 ci is the case-indicator
1004 Error message structure
1007 |-----------------------------------------------------------------------------------|
1008 | window {BOX:vertical} |
1009 | |------------------------------------------------------------------------------| |
1010 | | error-message {BOX:vertical} | |
1011 | | |-------------------------------------------------------------------------| | |
1012 | | | textbox | | |
1013 | | |-------------------------------------------------------------------------| | |
1014 | |------------------------------------------------------------------------------| |
1015 |-----------------------------------------------------------------------------------|
1016 Advanced layout
1022 The layout of rofi can be tweaked by packing the 'fixed' widgets in a
1023 custom structure.
1024 The following widgets are fixed, as they provide core rofi functional‐
1027 ity:
1028 · prompt
1030 · entry
1032 · overlay
1034 · case-indicator
1036 · message
1038 · listview
1040 · mode-switcher
1042 · num-rows
1044 · num-filtered-rows
1046 The following keywords are defined and can be used to automatically
1049 pack a subset of the widgets. These are used in the default theme as
1050 depicted in the figure above.
1051 · mainbox Packs: inputbar, message, listview, mode-switcher
1053 · inputbar Packs: prompt,entry,case-indicator
1055 Any widget name starting with textbox is a textbox widget, others are
1058 box widgets and can pack other widgets.
1059 There are several special widgets that can be used by prefixing the
1062 name of the widget:
1063 · textbox: This is a textbox widget. The displayed string can be set
1065 with str.
1066 · icon: This is an icon widget. The displayed icon can be set with
1068 filename and size with size.
1069 · button: This is a textbox widget that can have a 'clickable' action.
1071 The action can be set to: ok accept entry. custom accept custom
1072 input. ok|alternate: accept entry and launch alternate action (for
1073 run launch in terminal). custom|alternate: accept custom input and
1074 launch alternate action.
1075 To specify children, set the children property (this always happens on
1078 the box child, see example below):
1079 children: [prompt,entry,overlay,case-indicator];
1082 The theme needs to be updated to match the hierarchy specified.
1086 Below is an example of a theme emulating dmenu:
1089 * {
1092 background-color: Black;
1093 text-color: White;
1094 border-color: White;
1095 font: "Times New Roman 12";
1096 }
1097 window {
1099 anchor: north;
1100 location: north;
1101 width: 100%;
1102 padding: 4px;
1103 children: [ horibox ];
1104 }
1105 horibox {
1107 orientation: horizontal;
1108 children: [ prompt, entry, listview ];
1109 }
1110 listview {
1112 layout: horizontal;
1113 spacing: 5px;
1114 lines: 10;
1115 }
1116 entry {
1118 expand: false;
1119 width: 10em;
1120 }
1121 element {
1123 padding: 0px 2px;
1124 }
1125 element selected {
1126 background-color: SteelBlue;
1127 }
1128 Padding and margin
1132 Just like CSS, rofi uses the box model for each widget.
1133 |-------------------------------------------------------------------|
1136 | margin |
1137 | |-------------------------------------------------------------| |
1138 | | border | |
1139 | | |---------------------------------------------------------| | |
1140 | | | padding | | |
1141 | | | |-----------------------------------------------------| | | |
1142 | | | | content | | | |
1143 | | | |-----------------------------------------------------| | | |
1144 | | |---------------------------------------------------------| | |
1145 | |-------------------------------------------------------------| |
1146 |-------------------------------------------------------------------|
1147 Explanation of the different parts:
1151 · Content - The content of the widget.
1153 · Padding - Clears an area around the widget. The padding shows the
1155 background color of the widget.
1156 · Border - A border that goes around the padding and content. The bor‐
1158 der use the border-color of the widget.
1159 · Margin - Clears an area outside the border. The margin is transpar‐
1161 ent.
1162 The box model allows us to add a border around elements, and to define
1165 space between elements.
1166 The size of each margin, border, and padding can be set. For the bor‐
1169 der, a linestyle and radius can be set.
1170 Spacing
1173 Widgets that can pack more then one child widget (currently box and
1174 listview) have the spacing property. This property sets the distance
1175 between the packed widgets (both horizontally and vertically).
1176 |---------------------------------------|
1179 | |--------| s |--------| s |-------| |
1180 | | child | p | child | p | child | |
1181 | | | a | | a | | |
1182 | | | c | | c | | |
1183 | | | i | | i | | |
1184 | | | n | | n | | |
1185 | |--------| g |--------| g |-------| |
1186 |---------------------------------------|
1187 Advanced box packing
1191 More dynamic spacing can be achieved by adding dummy widgets, for exam‐
1192 ple to make one widget centered:
1193 |--------------------------------------------|
1196 | |-----------| |--------| |-----------| |
1197 | | dummy | | child | | dummy | |
1198 | | expand: y | | | | expand: y | |
1199 | | | | | | | |
1200 | | | | | | | |
1201 | | | | | | | |
1202 | |-----------| |--------| |-----------| |
1203 |--------------------------------------------|
1204 If both dummy widgets are set to expand, child will be centered.
1208 Depending on the expand flag of child the remaining space will be
1209 equally divided between both dummy and child widget (expand enabled),
1210 or both dummy widgets (expand disabled).
1211
1214 To get debug information from the parser, run rofi like:
1215 G_MESSAGES_DEBUG=Parser rofi -show run
1218 Syntax errors are shown in a popup and printed out to command line with
1222 the above command.
1223 To see the elements queried during running, run:
1226 G_MESSAGES_DEBUG=Theme rofi -show run
1229 To test minor changes, part of the theme can be passed on the command
1233 line, for example to set it to full-screen:
1234 rofi -theme-str '#window { fullscreen:true;}' -show run
1237 To print the current theme, run:
1241 rofi -dump-theme
1244
1248 Parts of the theme can be conditionally loaded, like the CSS @media
1249 option.
1250 @media ( min-width: 120 ) {
1253 }
1255 It supports the following keys as constraint:
1259 · min-width: load when width is bigger or equal then value.
1261 · max-width: load when width is smaller then value.
1263 · min-height: load when height is bigger or equal then value.
1265 · max-height: load when height is smaller then value.
1267 · min-aspect-ratio load when aspect ratio is over value.
1269 · max-aspect-ratio: load when aspect ratio is under value.
1271 · monitor-id: The monitor id, see rofi -help for id's.
1273 @media takes an integer number or a fraction, for integer number px can
1276 be added.
1277 @media ( min-width: 120 px ) {
1280 }
1282
1286 The rasi file format offers two methods of including other files. This
1287 can be used to modify existing themes, or have multiple variations on a
1288 theme.
1289 · import: Import and parse a second file.
1291 · theme: Discard theme, and load file as a fresh theme.
1293 Syntax:
1296 @import "myfile"
1299 @theme "mytheme"
1300 The specified file can either by name, filename,full path.
1304 If a filename is provided, it will try to resolve it in the following
1307 order:
1308 · ${XDG_CONFIG_HOME}/rofi/themes/
1310 · ${XDG_CONFIG_HOME}/rofi/
1312 · ${XDG_DATA_HOME}/rofi/themes/
1314 · ${INSTALL PREFIX}/share/rofi/themes/
1316 A name is resolved as a filename by appending the .rasi extension.
1319
1322 Several examples are installed together with rofi. These can be found
1323 in {datadir}/rofi/themes/, where {datadir} is the install path of rofi
1324 data. When installed using a package manager, this is usually:
1325 /usr/share/.
1326
1329 rofi(1), rofi-script(5), rofi-theme-selector(1)
1330 rofi-theme ROFI-THEME(5)