[BUG] Using a separate theme file gives different look

[budimanjojo]

Rofi version (rofi -v)

Version: 1.7.5

Configuration

https://gist.github.com/budimanjojo/3b68219e3a82e02f3692ec647f20c9e7

Theme

https://gist.github.com/budimanjojo/0ef36ee70676430b98b382149740cb45

Timing report

No response

Launch command

rofi -show drun

Step to reproduce

If I use the full configuration and style in a single file (~/.config/rofi/config.rasi), it looks just like I want it to be.
If I separate the file like this:

~/.config/rofi/config.rasi

configuration {
  font: "UbuntuMono Nerd Font 12";
  display-drun: " ";
  show-icons: true;
  drun-display-format: "{name}";
  disable-history: false;
  sidebar-mode: false;
}
@theme "style"

~/.local/share/rofi/style.rasi

* {
  selected-normal-foreground:  #1A1B26;
  foreground:                  #C0CAF5;
  normal-foreground:           @foreground;
  alternate-normal-background: @background;
  selected-urgent-foreground:  @selected-normal-foreground;
  urgent-foreground:           @selected-normal-foreground;
  alternate-urgent-background: @selected-normal-background;
  active-foreground:           #C0CAF5;
  selected-active-foreground:  @active-foreground;
  alternate-active-background: #1A1B26;
  background:                  #1A1B26;
  alternate-normal-foreground: @foreground;
  normal-background:           @background;
  selected-normal-background:  #7AA2F7;
  spacing:                     2px;
  separatorcolor:              #C0CAF5;
  urgent-background:           #F7768E;
  selected-urgent-background:  @selected-normal-background;
  alternate-urgent-foreground: @urgent-foreground;
  background-color:            @background;
  alternate-active-foreground: @active-foreground;
  active-background:           @background;
  selected-active-background:  @selected-normal-background;
  prompt-foreground:           #F7768E;
}

#window {
  background-color: @background;
  border-color: @separatorcolor;
  border: 1px;
  border-radius: 5px;
  padding: 5px;
  width: 25%;
}

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

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

#textbox {
  text-color: @foreground;
}

#listview {
  fixed-height: 0;
  border: 1px 0px 0px ;
  border-color: @separatorcolor;
  spacing: 5px;
  scrollbar: false;
  padding: 10px 0px 0px ;
  lines: 10;
}

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

#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;
}

#mode-switcher {
  border: 2px 0px 0px ;
  border-color: @separatorcolor;
}

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

#inputbar {
  spacing: 5px;
  text-color: @normal-foreground;
  padding: 3px ;
}

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

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

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

#textbox-prompt-colon {
  expand: false;
  str: ":";
  text-color: @prompt-foreground;
}

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

Expected behavior

It should look the same which is like this:

Actual behavior

The one with separated style file looks like this:

Additional information

No response

[DaveDavenport]

This is intended behaviour, see the rofi-theme manpage.
Try changing @theme by @import.

[DaveDavenport]

     The rasi file format offers two methods of including other files.  This can be used to  modify
       existing themes, or have multiple variations on a theme.

              • import:  Import and parse a second file.

              • theme:   **Discard theme**, and load file as a fresh theme.

[budimanjojo]

Ah okay. Can I see the code of the default theme? I'm using home-manager in NixOS where it uses @theme by default and I don't see a way to use @import instead

[DaveDavenport]

I have no idea what home-manager is, but I strongly suggest you to read the manpages.
It tells you how to get the default theme for your rofi version.
Also how to get the full theme (as parsed) for the first setup, etc.

[budimanjojo]

So I need to dump the theme (before setting up) to a file and work from there?

[DaveDavenport]

to get default theme: https://github.com/davatorium/rofi/blob/next/doc/rofi-theme.5.markdown#default-theme-loading

to get the theme rofi uses in your situation before you moved it to separate file:
https://github.com/davatorium/rofi/blob/next/doc/rofi-theme.5.markdown#debugging

To print the current theme, run:

rofi -dump-theme