rofi-theme(5) (NAME) rofi-theme - rofi (Getting started with theming) rofi . . ~/.config/rofi/config.rasi . : configuration { modes: [ combi ]; combi-modes: [ window, drun, run ]; } @theme "gruvbox-light" /* Insert theme modifications after this */ Type to filter : entry { placeholder: "Type here"; } entry placeholder "Type here" . rofi << >> . : entry { placeholder: "Type here"; cursor: pointer; } . element : element { orientation: horizontal; children: [ element-text, element-icon ]; spacing: 5px; } : | element | | | | |elementtext | | elementicon | | | | element listview . (orientation) (spacing) . (px) . element-icon . element-icon { size: 2.5em; } | element | | | | |elementtext | | element | | | | | | | | | | | | icon | | | | em . entry element-text . entry, element-text { text-color: red; background-color: rgb(0,0,255); } text-color background-color rgb . . : element-text { vertical-align: 0.5; } | element | | | | | | | element | | | |element-text | | | | | | | | icon | | | | . : entry { cursor-color: rgb(220,20,60); cursor-width: 8px; hide-cursor-on-empty: true; } cursor-color text-color . cursor-width hide-cursor-on-empty false . : rofi -dump-theme (Default theme loading) rofi . . : @theme "default" @theme config.rasi . @theme config.rasi . @import @theme (Multiple file handling) . : rofi -no-config -dump-theme (DESCRIPTION) rofi . . . . (Format specification) (Encoding) UTF-8 . (\n) (\r\n) . (Comments) C ++C . o // . o /* */ . C . : // Magic comment. property: /* comment */ value; : prop/*comment*/erty: value; (White space) . : property: name; : property : name ; (File extension) rasi . rofi advanced style information . rasinc . (Basic Structure) . * { } . # . . /* Global properties section */ * { // list of properties } /* Element theme section. */ {element path} { // list of properties } {elements... } { // list of properties } . . (Global properties section) . . . @{identifier} ( ). * . (Element theme section) . . - . # . , . : element normal.normal { background-color: blue; } button { background-color: blue; } : element normal normal, button { background-color: blue; } . inherit . : window { a: 1; b: 2; children: [ mainbox ]; } mainbox { a: inherit; b: 4; c: 8; } mainbox ( mainbox window ): a: 1; b: 4; c: 8; . . (Properties Format) : {identifier}: {value}; . identifier . `-` . . value . identifier . . : o (string) o (integer) o (fractional) o (boolean) o (color) o (image) o (text style) o (line style) o (distance) o (padding) o (border) o (position) o (reference) o (orientation) o (cursor) o (list of keywords) o (array of values) o (environment variable) o (Inherit) . (String) o : (["'])[:print:]+\1 (") (' ) . . : font: "Awasome 12"; UTF-8 : text { content: "Line one\n\tIndented line two 'Quoted text'"; } text { content: 'Line one\n\tIndented line two "Quoted text"'; } text { content: "Line one\n\tIndented line two \"Quoted text\""; } : \b \f \n \r \t \v \ " ' ( ). (Integer) o : [-+]?[:digit:]+ . : lines: 12; (Real) o : [-+]?[:digit:]+(\.[:digit:]+)? . : real: 3.4; : .3 3. : 3.4e-3. (Boolean) o : (true|false) true false . . : dynamic: false; (Image) rofi . o : url("path to image"); o : url("path to image", scale); (scale) none both width height . o : linear-gradient(stop color,stop1, color, stop2 color, ...); o : linear-gradient(to direction, stop color,stop1, color, stop2 color, ...); (direction) top left right bottom . o : linear-gradient(angle, stop color,stop1, color, stop2 color, ...); deg rad grad ( ). path (stop) . (Color) rofi CSS ( 1 2 3 CSS 4) . o : #{HEX}{3} (rgb) o : #{HEX}{4} (rgba) o : #{HEX}{6} (rrggbb) o : #{HEX}{8} (rrggbbaa) o : rgb[a]({INTEGER},{INTEGER},{INTEGER}[, {PERCENTAGE}]) o : rgb[a]({INTEGER}%,{INTEGER}%,{INTEGER}%[, {PERCENTAGE}]) o : hsl[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE}]) o : hwb[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE}]) o : cmyk( {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE} ]) o : {named-color} [ / {PERCENTAGE} ] CSS4 . : o {HEX} (`0-9a-f` ). o {INTEGER} 0 255 0 100 . o {ANGLE} deg rad grad turn . . o {PERCENTAGE} 0 1.0 %0 %100 . o {named-color} : AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGrey, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkSlateGrey, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, GoldenRod, Gray, Grey, Green, GreenYellow, HoneyDew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenRodYellow, LightGray, LightGrey, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSlateGrey, LightSteelBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, Purple, RebeccaPurple, Red, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, SlateGrey, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, YellowGreen, transparent : background-color: #FF0000; border-color: rgba(0,0,1, 0.5); text-color: SeaGreen; : background-color: transparent; text-color: Black; (Text style) o : (bold|italic|underline|strikethrough|none) . None . o bold: . o italic: () . o underline: . o strikethrough: (). 1.50.0 pango : o uppercase: . o lowercase: . pango . : o capitalize: . (Line style) o : (dash|solid) . : o dash: . o solid: (Distance) o : {Integer}px o : {Real}em o : {Real}ch o : {Real}% o : {Real}mm : o px: . o em: . o ch: . o mm: ( dpi). o %: (monitor). . . : padding: 10%; Full-HD (1920x1080) . (Calculating sizes) Rofi . CSS : width: calc( 100% - 37px ); width: calc( 20% min 512 ); : o + : o - : o / : o * : o modulo : o min : o max : o floor : o ceil : o round : C . (Padding) o : {Integer} o : {Distance} o : {Distance} {Distance} o : {Distance} {Distance} {Distance} o : {Distance} {Distance} {Distance} {Distance} . : o : (all) o : o : o : (Border) o : {Integer} o : {Distance} o : {Distance} {Distance} o : {Distance} {Distance} {Distance} o : {Distance} {Distance} {Distance} {Distance} o : {Distance} {Line style} o : {Distance} {Line style} {Distance} {Line style} o : {Distance} {Line style} {Distance} {Line style} {Distance} {Line style} o : {Distance} {Line style} {Distance} {Line style} {Distance} {Line style} {Distance} {Line style} . . (Position) / . | north west | north | north east | | west | center | east | | south west | south | south east | o : (center|east|north|west|south|north east|north west|south west|south east) (Visibility) : inputbar { enabled: false; } (Reference) o : @{PROPERTY NAME} . . . : highlight: bold @pink; : * { myhigh: bold #FAA; } window { highlight: @myhigh; } o : var(PROPERTY NAME, DEFAULT) . . . : window { width: var( width, 30%); } width (*{}) width . (Orientation) o : (horizontal|vertical) ( ). (Cursor) o : (default|pointer|text) . (List of keywords) o : [ keyword, keyword ] `[` `]` . . keyword . (List of values) o : [ value, value, ... ] `[` `]` . . (Environment variable) o : ${:alnum:} ( ). - . * { background-color: ${BG}; } o : env(ENVIRONMENT, default) ( ). - . . window { width: env(WIDTH, 40%); } WIDTH (40%) . (Inherit) o : inherit . mainbox { border-color: inherit; } (Elements paths) . . : element selected { } element selected selected . . : element .selected { element.selected { } element selected { } (Supported element paths) (Base widgets) rofi : o window o overlay: o mainbox: (mainbox) o inputbar: o box: @box o case-indicator: / @textbox o prompt: @textbox o entry: @textbox o num-rows: . o num-filtered-rows: . o textbox-current-entry: . o icon-current-entry: . o listview: o scrollbar: o element: o element-icon: () o element-index: (1,2,3..0) o element-text: o mode-switcher: @box . o button: @textbox o message: . o textbox: . . (State) : () . . (Example) button selected.normal { } element selected.urgent { } (entrybox) (scrollbar) : (Entrybox) {visible modifier}.{state} visible modifier : o normal: o selected: / o alternate: ( ) state : o normal: o urgent: o active: . : nametotextbox selected.active { background-color: #003642; text-color: #008ed4; } . . (Scrollbar) handle . . (Widget properties) : (all widgets) o enabled: / o padding: o margin: o border: ( ) o border-radius: . o border-aa: (aliasing) . . o border-disable-nvidia-workaround: . o background-color: o background-image: o border-color: o cursor: . (window) o font: () o transparency: : o real - (compositor) . o background - . o screenshot - . o Path png - . o location: (anchor) () o anchor: o fullscreen: . o width: () o x-offset: o y-offset: /// (scrollbar Properties) o background-color: o handle-width: () o handle-color: o border-color: o handle-rounded-corners: (box) o orientation: () o spacing: () (textbox) o background-color: o border-color: . o font: (). o str/content: (). o vertical-align: 0 () 1 (). o horizontal-align: 0 () 1 (). o text-color: . o text-transform: {color} . o highlight: {color} : bold underline italic #000000 element-text . o width: . o content: (). o placeholder: () . o placeholder-markup: true placeholder pango . o placeholder-color: placeholder. o blink: / (). o markup: pango markup . o tab-stops: . . ( ). o cursor-width: . o cursor-color: . o hide-cursor-on-empty: (). o cursor-outline: ( ) (). o cursor-outline-width: ( ). o cursor-outline-color: (). o text-outline: (). o text-outline-width: ( ). o text-outline-color: (). (listview) o columns: ( ). o fixed-height: lines . o dynamic: True False . o scrollbar: . o scrollbar-width: (). o cycle: / (wrap around). o spacing: ( ). o lines: . o layout: . (Horizontal) dmenu . o reverse: ( ). o flow: . Vertical . o fixed-columns: . o require-input: . . (Overlay widget) o timeout: . (Listview widget) . : o element box. o scrollbar scrollbar . children . listview box element . element : o element-icon: . o element-text: . o element-index: . element-icon element-text element . children [no]-show-icons . . (listview text highlight) element-text listview . highlight ( ) . highlight text-style . : element-text { highlight: None; } : element-text { highlight: underline red; } (Layout) rofi . . . (Basic layout structure) . . GTK . rofi : | window {BOX:vertical} | | | | | mainbox {BOX:vertical} | | | | | | | | | inputbar {BOX:horizontal} | | | | | | | | | | | | | prompt | |:| | entry | |#fr| | / | |#ns| |ci | | | | | | | | | | | | | | | | | | | | | | | | | message | | | | | | | | | | | | | textbox | | | | | | | | | | | | | | | | | | | | | | | | | listview | | | | | | | | | | | | | element | | | | | | | | | | | | | | | | |elementicon | |elementtext | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | modeswitcher {BOX:horizontal} | | | | | | | | | | | | | Button | | Button | | Button | | Button | | | | | | | | | | | | | | | | o ci case-indicator o fr num-filtered-rows o ns num-rows (Error message structure) | window {BOX:vertical} | | | | | errormessage {BOX:vertical} | | | | | | | | | textbox | | | | | | | | | (Advanced layout) rofi <<>> . rofi : o prompt o entry o overlay o case-indicator o message o listview o mode-switcher o num-rows o num-filtered-rows . : o mainbox : inputbar, message, listview, mode-switcher o inputbar : prompt,entry,case-indicator textbox (box) . : (Textbox widget) . content . : textbox-custom { expand: false; content: "My Message"; } (Icon) . filename size . action . action ( `rofi -show keys` ). squared false . : icon-paste { expand: false; filename: "gtk-paste"; size: 24; vertical-align: 0.5; action: "kb-primary-paste"; } (button) . action : keybinding: ( `rofi -show keys` ). button-paste { expand: false; content: "My Clickable Message"; vertical-align: 0.5; action: "kb-primary-paste"; } (Children) children ( box ): inputbar { children: [prompt,entry,overlay,case-indicator]; } . dmenu : * { background-color: Black; text-color: White; border-color: White; font: "Times New Roman 12"; } window { anchor: north; location: north; width: 100%; padding: 4px; children: [ horibox ]; } horibox { orientation: horizontal; children: [ prompt, entry, listview ]; } listview { layout: horizontal; spacing: 5px; lines: 10; } entry { expand: false; width: 10em; } element { padding: 0px 2px; } element selected { background-color: SteelBlue; } (Padding and margin) CSS rofi (box model) . | margin | | | | | border | | | | | | | | | padding | | | | | | | | | | | | | content | | | | | | | | | | | | | | | | : o (Content) - . o (Padding) - . . o (Border) - . border-color . o (Margin) - . . . . . (Spacing) ( box listview) spacing . ( ). | s s | | | child | p | child | p | child | | | | | a | | a | | | | | | c | | c | | | | | | i | | i | | | | | | n | | n | | | | | g g | (Advanced box packing) (dummy) : | | | | dummy | | child | | dummy | | | | expand: true; | | | | expand: true; | | | | | | | | | | | | | | | | | | | | | | | | | | | | expand child . expand child dummy child ( expand) dummy ( expand). (Debugging) rofi : G_MESSAGES_DEBUG=Parser rofi -show run . : G_MESSAGES_DEBUG=Theme rofi -show run : rofi -theme-str 'window { fullscreen:true;}' -show run : rofi -theme+window+fullscreen true -show run : rofi -dump-theme (Media support) @media CSS. @media ( min-width: 120 ) { } : o min-width: . o max-width: . o min-height: . o max-height: . o min-aspect-ratio: . o max-aspect-ratio: . o monitor-id: `rofi -help` . o enabled: . DMENU dmenu . @media px . @media ( min-width: 120 px ) { } @media ( enabled: env(DO_LIGHT, false )) { } @media ( enabled: DMENU) { } (Conflicting constraints) . . . . listview . . (Font Parsing) Rofi pango . pango . . : mono 18 : FontAwesome 22 pango: : \[FAMILY-LIST] \[STYLE-OPTIONS] \[SIZE] \[VARIATIONS] FAMILY-LIST STYLE_OPTIONS SIZE ( ) "px" . VARIATIONS "axis=value" ( = ). (styles) : "Normal" "Roman" "Oblique" "Italic". (variants) : "Small-Caps" "All-Small-Caps" "Petite-Caps" "All-Petite-Caps" "Unicase" "Title-Caps". (weights) : "Thin" "Ultra-Light" "Extra-Light" "Light" "Semi-Light" "Demi-Light" "Book" "Regular" "Medium" "Semi-Bold" "Demi-Bold" "Bold" "Ultra-Bold" "Extra-Bold" "Heavy" "Black" "Ultra-Black" "Extra-Black". (stretch) : "Ultra-Condensed" "Extra-Condensed" "Condensed" "Semi-Condensed" "Semi-Expanded" "Expanded" "Extra-Expanded" "Ultra-Expanded". (gravity) : "Not-Rotated" "South" "Upside-Down" "North" "Rotated-Left" "East" "Rotated-Right" "West". . FAMILY-LIST family_name NULL . STYLE-OPTIONS . SIZE 0 . : "Cantarell Italic Light 15 `wght`=200" (Icon Handling) Rofi : o (Filename) o (icon-name) (icon-theme) . o (Markup String) . GdkPixbuf . . Pango . . : echo -en "testing\0icon\x1f" | ./rofi -dmenu : G_MESSAGES_DEBUG=Helpers.IconFetcher rofi . (Multiple file handling) rasi . . o import: . o theme: . : @import "myfile" @theme "mytheme" -theme @theme . name filename full path . : o . `~` `~user` . o @import @theme . o ${XDG_CONFIG_HOME}/rofi/themes/ o ${XDG_CONFIG_HOME}/rofi/ o ${XDG_DATA_HOME}/rofi/themes/ o ${INSTALL PREFIX}/share/rofi/themes/ ( ) .rasi .rasinc . .rasi .rasinc . ( ) : ?import "myfile" . (EXAMPLES) rofi . {datadir}/rofi/themes/ {datadir} rofi . /usr/share/ . (SEE ALSO) rofi(1), rofi-script(5), rofi-theme-selector(1) rofi rofi-theme(5)