Help loadin svgs in GTK CSS

Help
1

Hello! I am trying to manually theme wlogout using stylix and home-manger and have gotten everything to work except the icon theming. The themed icons will not load no matter what I do. My guess is that it has something to do with them being svgs, but I am unsure. Below is the snippet from my configuration. I have triple checked and the paths to these svgs are correct once nix compiles the style.css file.

programs.wlogout = {
  enable = true;
  layout = [
    {
      label = "lock";
      action = "swaylock";
      text = "Lock";
      keybind = "l";
    }
    {
      label = "logout";
      action = "niri msg action Quit { skip_confirmation: true }";
      text = "Logout";
      keybind = "e";
    }
    {
      label = "shutdown";
      action = "systemctl poweroff";
      text = "Shutdown";
      keybind = "s";
    }
    {
      label = "reboot";
      action = "systemctl reboot";
      text = "Reboot";
      keybind = "r";
    }
  ];
  style =
    with config.lib.stylix.colors.withHashtag;
    let
      iconThemePackage = config.stylix.iconTheme.package;
      iconThemeName = config.stylix.iconTheme.${config.stylix.polarity};
      iconThemePath = "${iconThemePackage}/share/icons/${iconThemeName}";
    in
    ''
      @define-color base00 ${base00}; @define-color base01 ${base01}; @define-color base02 ${base02}; @define-color base03 ${base03};
      @define-color base04 ${base04}; @define-color base05 ${base05}; @define-color base06 ${base06}; @define-color base07 ${base07};

      @define-color base08 ${base08}; @define-color base09 ${base09}; @define-color base0A ${base0A}; @define-color base0B ${base0B};
      @define-color base0C ${base0C}; @define-color base0D ${base0D}; @define-color base0E ${base0E}; @define-color base0F ${base0F};

      * {
        font-family: "${config.stylix.fonts.monospace.name}";
        font-size: ${builtins.toString config.stylix.fonts.sizes.desktop}pt;
        background-image: none;
      }

      window {
        background-color: alpha(@base00, 0.5);
      }

      button {
        color: @base05;
        font-size: 16px;
        background-color: @base00;
        border-style: none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 35%;
        border-radius:30px;
        margin: 182px 5px;
        text-shadow: 0px 0px;
        box-shadow: 0px 0px;
      }

      button:focus, button:active, button:hover {
        background-color: @base01;
        outline-style: none;
      }

      #lock {
        background-image: url("${iconThemePath}/status/48/status_lock.svg"), url("${pkgs.wlogout}/share/wlogout/icons/lock.png");
      }

      #logout {
        background-image: url("${iconThemePath}/status/48/stock_dialog-warning"), url("${pkgs.wlogout}/share/wlogout/icons/logout.png");
      }

      #suspend {
        background-image: url("${iconThemePath}/status/48/state_paused.svg"), url("${pkgs.wlogout}/share/wlogout/icons/suspend.png");
      }

      #hibernate {
        background-image: url("${iconThemePath}/status/48/weather-clear-night.svg"), url("${pkgs.wlogout}/share/wlogout/icons/hibernate.png");
      }

      #shutdown {
        background-image: url("${iconThemePath}/status/48/state_shutoff.svg"), url("${pkgs.wlogout}/share/wlogout/icons/shutdown.png");
      }

      #reboot {
        background-image: url("${iconThemePath}/status/48/state_running.svg"), url("${pkgs.wlogout}/share/wlogout/icons/reboot.png");
      }
    '';
};
1 Like
2

I was able to figure it out. GTK did not come with the SVG loader for some reason, so you have to add it with this line: programs.gdk-pixbuf.modulePackages = [ pkgs.librsvg ];. Also, for the background image parts of the CSS, use image([PRIMARY ICON], [SECONDARY ICON]) so that they do not over lap. You can also load the icons easier with -gtk-icontheme("[ICON NAME]").

1 Like