Selected items are not displayed correctly (Rofi + pywal)

[d4rios]

When launching rofi with the template generated by pywal I can't see the selected items. When I scroll up and down with the arrow keys they are produced as jumps.

If I enter the name of a program or application I don't see the match of the application I am going to launch. I can only confirm the application when I press the enter key and it is opened.

This behavior happens with both the dark and light pywal theme.

I am not clear if it's pywal's or rofi's problem.

I attach a video where you can see and understand better what I am trying to say.

I hope you can help me with this.

Thank you very much.

https://drive.google.com/file/d/1Y5x8MR9jt2Lsc1Ae0m6bgcsFwmX0zpc0/view?usp=sharing

[DaveDavenport]

it looks like pywal is generating an invalid theme for the version of rofi you are running.

can you paste some information? rofi version, configuration, theme.

[d4rios]

Of course!!.

rofi

rofi -v
Version: 1.7.3

python-pywal

wal -v
wal 3.3.0

launcher.rasi

configuration {
    location: 						0;
    fixed-num-lines: 				        true;
    show-icons: 					false;
    sidebar-mode: 					true;
    scroll-method: 					1;
    window-format: 					"[{w}] ··· {c} ···   {t}";
    click-to-exit: 					true;
    combi-hide-mode-prefix: 		        false;
    display-window: 				        "";
    display-windowcd: 				"";
    display-run: 					"";
    display-ssh: 					"";
    display-drun: 					"";
    display-combi: 					"";
}

/* Dark theme. */
@import "~/.cache/wal/colors-rofi-dark"

* {
    font:                                      "Iosevka 10";
    background-color:             	@background;
}

window {
    border: 						1px;
    border-color: 					@selected;
    border-radius: 					0px;
    width: 							500px;
    height: 						0px;
}

prompt {
    spacing: 					0;
    border: 					0;
    background-color:             	        @highlight;
    text-color: 					@background;
    padding:    					6px 10px 6px 10px;
}

textbox-prompt-colon {
    expand: 					false;
    str: 						"";
    padding:    					6px 4px 6px 4px;
    text-color: 					inherit;
}

entry {
    spacing:    					0;
    expand:                                       true;
    horizontal-align:                           0;
    text-color: 					@foreground;
    placeholder-color:                       @FG;
    placeholder:                                "Buscar...";
    padding:    					6px 2px 6px 2px;
    border: 					0px 0px 1px 0px;
    border-color: 				@selected;
    border-radius: 				0px;
}

case-indicator {
    spacing:    					0;
    text-color: 					@foreground;
}

inputbar {
    spacing:    					0px;
    text-color: 					@foreground;
    border: 					0px;
    border-color: 				@selected;
    border-radius: 				0px;
    children: 					[ prompt,textbox-prompt-colon,entry ];
}

mainbox {
    border: 						0px;
    border-color: 					@selected;
    spacing: 						6px;
    padding: 						10px;
}

listview {
    lines:							7;
    columns:						1;
    fixed-height: 					0;
    border: 						0px;
    border-color: 					@foreground;
    spacing: 						2px;
    scrollbar: 						false;
    padding: 						4px 0px 0px;
}

element-text, element-icon {
    background-color: inherit;
    text-color:       inherit;
}

element {
    border: 						0px;
    padding: 						7px;
}
element normal.normal {
    background-color: 			@background;
    text-color:       				@foreground;
}
element normal.urgent {
    background-color: 			@background;
    text-color:       				@off;
}
element normal.active {
    background-color: 			@background;
    text-color:       				@on;
}
element selected.normal {
    background-color: 			@selected;
    text-color:       				@background;
    border: 					0px;
    border-color: 				@selected;
}
element selected.urgent {
    background-color: 			@background;
    text-color:       				@off;
}
element selected.active {
    background-color: 			@background;
    text-color:       				@selected;
}
element alternate.normal {
    background-color: 			@background;
    text-color:       				@foreground;
}
element alternate.urgent {
    background-color: 			@background;
    text-color:       				@foreground;
}
element alternate.active {
    background-color: 			@background;
    text-color:       				@foreground;
}

sidebar {
    border:       					0px;
    border-color: 				@selected;
    border-radius: 				0px;
}

button {
    margin: 					5px 0px 0px 0px;
    horizontal-align:                           0.5;
    vertical-align:                               0.5;
    padding: 					7px;
    text-color: 					@foreground;
    border: 					0px;
    border-radius: 				0px;
    border-color: 				@selected;
}

button selected {
    background-color:             	        @selected;
    text-color: 					@background;
    border: 					0px;
    border-radius: 				0px;
    border-color: 				@selected;
}

scrollbar {
    width:        					4px;
    border:       					0px;
    handle-color: 				@foreground;
    handle-width: 				8px;
    padding:      				0;
}

message {
    border: 					0px;
    border-color: 				@selected;
    padding: 					1px;
}

textbox {
    text-color: 					@foreground;
}

The themes are "/.cache/wal/colors-rofi-dark" and "/.cache/wal/colors-rofi-light".

The same thing happened with earlier versions of rofi.

[d4rios]

My colors-rofi-dark is this:

colors-rofi-dark

• {
  active-background: #B55E74;
  active-foreground: @Foreground;
  normal-background: @background;
  normal-foreground: @Foreground;
  urgent-background: #555062;
  urgent-foreground: @Foreground;

  alternate-active-background: @background;
  alternate-active-foreground: @Foreground;
  alternate-normal-background: @background;
  alternate-normal-foreground: @Foreground;
  alternate-urgent-background: @background;
  alternate-urgent-foreground: @Foreground;

  selected-active-background: #555062;
  selected-active-foreground: @Foreground;
  selected-normal-background: #B55E74;
  selected-normal-foreground: @Foreground;
  selected-urgent-background: #5A698C;
  selected-urgent-foreground: @Foreground;

  background-color: @background;
  background: #0d1115;
  foreground: #a5cde5;
  border-color: @background;
  spacing: 2;
  }

#window {
background-color: @background;
border: 0;
padding: 2.5ch;
}

#mainbox {
border: 0;
padding: 0;
}

#message {
border: 2px 0px 0px;
border-color: @border-color;
padding: 1px;
}

#textbox {
text-color: @Foreground;
}

#inputbar {
children: [ prompt,textbox-prompt-colon,entry,case-indicator ];
}

#textbox-prompt-colon {
expand: false;
str: ":";
margin: 0px 0.3em 0em 0em;
text-color: @normal-foreground;
}

#listview {
fixed-height: 0;
border: 2px 0px 0px;
border-color: @border-color;
spacing: 2px;
scrollbar: true;
padding: 2px 0px 0px;
}

#element {
border: 0;
padding: 1px;
}

#element.normal.normal {
background-color: @normal-background;
text-color: @normal-foreground;
}

#element.normal.urgent {
background-color: @urgent-background;
text-color: @urgent-foreground;
}

#element.normal.active {
background-color: @active-background;
text-color: @active-foreground;
}

#element.selected.normal {
background-color: @selected-normal-background;
text-color: @selected-normal-foreground;
}

#element.selected.urgent {
background-color: @selected-urgent-background;
text-color: @selected-urgent-foreground;
}

#element.selected.active {
background-color: @selected-active-background;
text-color: @selected-active-foreground;
}

#element.alternate.normal {
background-color: @alternate-normal-background;
text-color: @alternate-normal-foreground;
}

#element.alternate.urgent {
background-color: @alternate-urgent-background;
text-color: @alternate-urgent-foreground;
}

#element.alternate.active {
background-color: @alternate-active-background;
text-color: @alternate-active-foreground;
}

#scrollbar {
width: 4px;
border: 0;
handle-width: 8px;
padding: 0;
}

#sidebar {
border: 2px 0px 0px;
border-color: @border-color;
}

#button {
text-color: @normal-foreground;
}

#button.selected {
background-color: @selected-normal-background;
text-color: @selected-normal-foreground;
}

#inputbar {
spacing: 0;
text-color: @normal-foreground;
padding: 1px;
}

#case-indicator {
spacing: 0;
text-color: @normal-foreground;
}

#entry {
spacing: 0;
text-color: @normal-foreground;
}

#prompt {
spacing: 0;
text-color: @normal-foreground;
}

It is strange. The themes are untouched. As they are generated after installation of both packages (rofi and python-pywal). As I said it also happens with the light variant (color-rofi-light.rasi). It is not possible for me to distinguish anything in rofi launcher.

[DaveDavenport]

You use @Foreground but it is never set, only @foreground is set.
If you refer to a non exiting property you get the default value.

[DaveDavenport]

The following are undefined:

'highlight'

'fg'

'Foreground'

'selected'

[d4rios]

I did not make any modifications. I simply navigated here https://github.com/dylanaraps/pywal/wiki/Customization#rofi and followed these instructions.

rofi

Add one of the following lines to your rofi config file inside the configuration{...} block located in ~/.config/rofi/config.rasi. If the file doesn't exist, you can just create it.

/* Dark theme. */
@import "~/.cache/wal/colors-rofi-dark"

/* Light theme. */
@import "~/.cache/wal/colors-rofi-light"

That is, both themes colors-rofi-dark/colors-rofi-light are as pywal generates them by default. That's where my surprise and strangeness comes from at the same time.

[DaveDavenport]

What you paste here is not the same as in the repository you linked.

There are even differences between the two times you pasted the theme. (or do you mix two themes? I am confused now).. But there seem to be customization.

[DaveDavenport]

Added option to git that will validate all 'variables' (the @ links) and print errors when they are invalid.

[d4rios]

My rofi and python-pywal installations were done via aur with yay helper. Will this be fixed with an update or should I modify my files manually?

Thank you at least for checking so promptly.

[DaveDavenport]

at some point it will be part of rofi 1.7.4. But it looks like the theme you use has many broken elements.
(selected, Foreground, on, off, fg, highlight).
I have 0 experience with pywal, not even sure what it does or how it works. I mostly seen problems with it.

rofi -rasi-validate test.rasi 
Failed to resolve: `window { border-color: var(selected);}`
Failed to resolve: `mainbox { border-color: var(selected);}`
Failed to resolve: `message { border-color: var(selected);}`
Failed to resolve: `inputbar { border-color: var(selected);}`
Failed to resolve: `element normal normal { text-color: var(Foreground);}`
Failed to resolve: `element normal urgent { text-color: var(off);}`
Failed to resolve: `element normal active { text-color: var(on);}`
Failed to resolve: `element selected normal { background-color: var(selected);}`
Failed to resolve: `element selected normal { border-color: var(selected);}`
Failed to resolve: `element selected urgent { text-color: var(off);}`
Failed to resolve: `element selected active { text-color: var(selected);}`
Failed to resolve: `sidebar { border-color: var(selected);}`
Failed to resolve: `button selected { background-color: var(selected);}`
Failed to resolve: `button selected { border-color: var(selected);}`
Failed to resolve: `button { border-color: var(selected);}`
Failed to resolve: `entry { border-color: var(selected);}`
Failed to resolve: `entry { placeholder-color: var(fg);}`
Failed to resolve: `prompt { background-color: var(highlight);}`

[d4rios]

Excuse me. It seems that I made a mistake in posting the link.This is the correct one. "https://github.com/dylanaraps/pywal/wiki/Customization#rofi"

That's where I got the instructions to customize rofi with pywal generated themes.
The first thing I pasted was the rofi launcher (launcher.rasi). As I have it and you can see in the video. The second thing I pasted was the dark theme that pywal creates (colors-rofi-dark). Sorry for confusing you.

I agree with you that maybe some of the files have broken elements. I'm not entirely sure and that's the part I was hoping you could help me with.

However, I don't want to take up any more of your time. I thank you infinitely for your help and the very quick response you have given me. It shows what a hard worker you are. I will continue to use rofi and maybe try a different theme.

Congratulations for such an excellent job. I love rofi and will continue to use it on my pc.

Thank you very much and greetings from the Basque country, in the north of Spain.

[DaveDavenport]

the broken parts in your first paste of the theme are causing the issues.

[d4rios]

Considering that my color theme has broken parts I decided not to complicate it and use a different theme.

Thank you very much for your help and for the time spent.