Cannot change color of elements in rofi / i3

[13zebras]

I installed i3 yesterday, latest garuda install iso. When launching rofi via super+d, the box that appears has dark alternating background colors with black text, making it impossible to read. After reading arch wiki, I looked in the config.rasi file to see that the theme is "gorgeHousse.rasi". Opening this file revealed what looked to be standard css for setting colors. After reading the rofi wiki, it seemed like a simple thing to change the colors of elements, for example:

#element.normal.normal {
   background-color: #006600;
   text-color: #ffffff;
}

#element.alternate.normal {
   background-color: #004400;
   text-color: #ffffff;
}

However, only the background-color of the various elements like alternative rows, etc, accepts the new style. Text color does not change no matter what I attempt. I can change the INPUT text color, but not the text color of the elements in the textbox.

There are no settings in config.rasi that would be causing the text-color to be black, at least not that I can see.

Any suggestions? I wouldn't think the default styling of rofi would make text impossible to read. And changing the theme doesn't change the problem. Text won't style as anything but black. Thanks!........ Tom

[SGS]

Did you Super + Shift + R after changing?

Maybe try also other themes like ~/.config/rofi/Arc-Dark.rasi

/************************************************
 * ROFI Color theme
 * User: leofa
 * Copyright: 2017 leofa
 ***********************************************/

* {
    selected-normal-foreground:  rgba ( 249, 249, 249, 100 % );
    foreground:                  rgba ( 196, 203, 212, 100 % );
    normal-foreground:           @foreground;
    alternate-normal-background: rgba ( 64, 69, 82, 59 % );
    red:                         rgba ( 220, 50, 47, 100 % );
    selected-urgent-foreground:  rgba ( 249, 249, 249, 100 % );
    blue:                        rgba ( 38, 139, 210, 100 % );
    urgent-foreground:           rgba ( 204, 102, 102, 100 % );
    alternate-urgent-background: rgba ( 75, 81, 96, 90 % );
    active-foreground:           rgba ( 101, 172, 255, 100 % );
    lightbg:                     rgba ( 238, 232, 213, 100 % );
    selected-active-foreground:  rgba ( 249, 249, 249, 100 % );
    alternate-active-background: rgba ( 75, 81, 96, 89 % );
    background:                  rgba ( 45, 48, 59, 95 % );
    alternate-normal-foreground: @foreground;
    normal-background:           @background;
    lightfg:                     rgba ( 88, 104, 117, 100 % );
    selected-normal-background:  rgba ( 64, 132, 214, 100 % );
    border-color:                rgba ( 124, 131, 137, 100 % );
    spacing:                     2;
    separatorcolor:              rgba ( 29, 31, 33, 100 % );
    urgent-background:           rgba ( 29, 31, 33, 17 % );
    selected-urgent-background:  rgba ( 165, 66, 66, 100 % );
    alternate-urgent-foreground: @urgent-foreground;
    background-color:            rgba ( 0, 0, 0, 0 % );
    alternate-active-foreground: @active-foreground;
    active-background:           rgba ( 29, 31, 33, 17 % );
    selected-active-background:  rgba ( 68, 145, 237, 100 % );
}
#window {
    background-color: @background;
    border:           1;
    padding:          5;
}
#mainbox {
    border:  0;
    padding: 0;
}
#message {
    border:       2px 0px 0px ;
    border-color: @separatorcolor;
    padding:      1px ;
}
#textbox {
    text-color: @foreground;
}
#listview {
    fixed-height: 0;
    border:       2px 0px 0px ;
    border-color: @separatorcolor;
    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-color: @normal-foreground;
    handle-width: 8px ;
    padding:      0;
}
#sidebar {
    border:       2px 0px 0px ;
    border-color: @separatorcolor;
}
#button {
    spacing:    0;
    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;
}
#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;
}

config.rasi

configuration {
        modi: "window,run,ssh,combi,drun";
        combi-modi: "window,drun";
        font: "Source Code Pro 12";
        terminal: "alacritty";
        theme: "Arc-Dark.rasi";
/*

BTW, I never changed some colors.

[13zebras]

Hey SGS!

Yes, I restarted i3. I also logged out and rebooted. No joy.

And switching themes didn't help. With the Arc-Dark theme, the text colors are still black.

In your code snippet, all the foreground colors are some shade of white, and then down in the css the text-color is set to one of the various foreground white shades. But all I get is black.

I booted to the live-usb just to see what it looked liked. Same. Text is black.

[SGS]

You're right, it's the same for me, but it never bothered me.
I'll do some research and let you know when I've found a solution.

[13zebras]

Thanks for checking. I've been searching on Github, and I think I might have a solution. I'll check tomorrow and post my results. I'm pretty sure it has to do with the syntax used in the themes installed. More later.

[13zebras]

Okay, here is the solution: the two rofi themes in the Garuda i3 install are using an older syntax. If you look at the themes in the Rofi github repo, the syntax is different.

I also followed links from the Rofi wiki to other theme collections. I liked these:

https://github.com/Murzchnvok/rofi-collection

I tested several with Garuda i3, and they worked perfectly. And looked much better! Here is the code from the dracula.rasi theme:

/*
 * ROFI color theme
 *
 * Based on Something Found in the Internet
 *
 * User: Contributors
 * Copyright: *!
 */

configuration {
  display-run: " ";
  display-drun: "  ";
  display-window: "  ";
  drun-display-format: "{icon} {name}";
  font: "JetBrainsMono Nerd Font Medium 10";
  modi: "window,run,drun";
  show-icons: true;
}

* {
  bg: #282a36;
  bg-alt: #44475a;
  
  fg: #f8f8f2;

  blue: #6272a4;
  purple: #bd93f9;

  background-color: @bg;
  
  border: 0;
  margin: 0;
  padding: 0;
  spacing: 0;
}

element {
  padding: 12;
  text-color: @blue;
}

element selected {
  text-color: @purple;
}

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

entry {
  background-color: @blue;
  padding: 12 0 12 3;
  text-color: @fg;
}

inputbar {
  children: [prompt, entry];
}

listview {
  columns: 1;
  lines: 8;
}

mainbox {
  children: [inputbar, listview];
}

prompt {
  background-color: @blue;
  enabled: true;
  font: "FontAwesome 12";
  padding: 12 0 0 12;
  text-color: @fg;
}

window {
  transparency: "real";
}

And that should take care of the problem! Thanks!

[SGS]

Thank you very much

[13zebras]

Great choice! I'm not typically a fan of dracula when the colors fill my entire screen with text (like VS Code), but I do like it in smaller doses. Thanks again for the help.

[SGS]

My internet is down in a few minutes for maintenance, so I took what was there

The themes can be chosen by every experienced i3wm user.

I was of the opinion, v4 would be current.

But, I have to thank