Struggling to configure GTk/QT theme on laptop

heitorpb · March 27, 2024, 12:57pm

Hello!

I’m Nixifying my laptop and I’m struggling to get the themes to my liking.

Here’s what I want:

Breeze-dark theme everywhere
mocha-light cursor theme, from Catppuccin icon theme
mocha-lavender icon theme, from Catppuccin folders theme

I’m using Sway and home-manager to configure my user.

Here’s what I have in my configuration.nix:

  environment.systemPackages = with pkgs; [
    # Themes
    kdePackages.breeze-gtk
    kdePackages.breeze-icons
    kdePackages.breeze.qt5
    kdePackages.breeze
    catppuccin-cursors # Mouse cursor theme
    catppuccin-papirus-folders # Icon theme, e.g. for pcmanfm-qt
    papirus-folders # For the catppucing stuff work
  ];

  qt = {
    enable = true;
    platformTheme = "kde";
  };

And in my home.nix:

let
      theme = "Breeze-Dark";
      iconTheme = "cat-mocha-lavender"; # For icons, e.g. in pcmanfm-qt
      cursorTheme = "mochaLight";
      cursorSize = 16;
in
  # Cursor setup
  home.pointerCursor = {
    name = machine.seat.cursorTheme;
    package = pkgs.catppuccin-cursors;
    gtk.enable = true;
    size = machine.seat.cursorSize;
  };

  # GTK Setup
  gtk = {
    enable = true;
    theme.name = theme;
    iconTheme.name = iconTheme;
    cursorTheme = {
      size = cursorSize;
      name = cursorTheme;
    };
    gtk3 = {
      bookmarks = [
        "file:///tmp"
      ];
      extraConfig.gtk-application-prefer-dark-theme = true;
    };
  };
  dconf.settings."org/gtk/settings/file-chooser" = {
    sort-directories-first = true;
  };

  # GTK4 Setup
  dconf.settings."org/gnome/desktop/interface" = {
    gtk-theme = lib.mkForce "Breeze";
    color-scheme = "prefer-dark";
  };

But that is not complete yet, or I got something wrong.

My cursor is not changed, it is still the default one.

On Qt applications, like pcmanfm-qt, I still get a white theme, and no catppuccin icons. Firefox Open File dialog shows in dark. But pcmanfm uses dark theme but some weird icons.

So, what am I missing?

nex · March 27, 2024, 6:56pm

  home.pointerCursor = {
    gtk.enable = true;
    name = "Catppuccin-Mocha-Light-Cursors";
    package = pkgs.catppuccin-cursors.mochaLight;
    size = 16;
  };

Here you can find some names. For Nix users.

heitorpb · March 28, 2024, 11:59am

Oh, that was spot on. Thank you!
Now my cursor is how I want

But stuff is still missing. The QT apps are not in the breeze dark variant and the icon theme is not used anywhere. Any tips?

eljamm · March 28, 2024, 4:19pm

This was literally me a few days ago, except I went full catppuccin

I’m running Gnome under Wayland, so I’m not sure how well this applies to Sway, but I hope this helps you in the right direction. Also, if there is a better way to do this then I hope someone corrects me.

PS: This is all done using home-manager, so you only need to edit your home.nix.

With Breeze

First add the required packages, the rest will be specified later within options:

  home.packages = with pkgs; [
    papirus-folders
  ];

GTK

This sets the GTK interface, icon and cursor. I was using just gtk.cursorTheme for mine, but I noticed that some apps (like steam) didn’t respect it. Thankfully, the solution posted by @nex solved that for me Now I have them both set just up in case.

  gtk = {
    enable = true;
    theme = {
      name = "Breeze-Dark";
      package = pkgs.libsForQt5.breeze-gtk;
    };
    iconTheme = {
      name = "Papirus-Dark";
      package = pkgs.catppuccin-papirus-folders.override {
        flavor = "mocha";
        accent = "lavender";
      };
    };
    cursorTheme = {
      name = "Catppuccin-Mocha-Light-Cursors";
      package = pkgs.catppuccin-cursors.mochaLight;
    };
    gtk3 = {
      extraConfig.gtk-application-prefer-dark-theme = true;
    };
  };

  home.pointerCursor = {
    gtk.enable = true;
    name = "Catppuccin-Mocha-Light-Cursors";
    package = pkgs.catppuccin-cursors.mochaLight;
    size = 16;
  };

  dconf.settings = {
    "org/gnome/desktop/interface" = {
      gtk-theme = "Breeze-Dark";
      color-scheme = "prefer-dark";
    };
  };

By the way, I’m noticing that you’re setting Breeze-Dark in gtk.theme, but you’re enabling Breeze in dconf.settings. Shouldn’t that also be the Breeze-Dark ?

QT

There is no problem with the Breeze light theme, but I spent a lot of time searching and experimenting and the only way I found to set Breeze-Dark for QT is to make it follow the gtk theme:

  qt = {
    enable = true;
    platformTheme = "gtk";
    style = {
      name = "gtk2";
      package = pkgs.libsForQt5.breeze-qt5;
    };
  };

The icon theme for QT apps should also automatically be set to the one from gtk.iconTheme.

Full Catppuccin

Edit: Check out catppuccin-nix. You can already use it to set catppuccin for gtk (and other apps) and I’m sure it’s gonna grow more in the future.

I just want to share my current catppuccin config in case you or anyone else wants to try it.

First add the required packages, the rest will be specified later within options:

  home.packages = with pkgs; [
    (catppuccin-kvantum.override {
      accent = "Blue";
      variant = "Macchiato";
    })
    libsForQt5.qtstyleplugin-kvantum
    libsForQt5.qt5ct
    papirus-folders
  ];

GTK

  gtk = {
    enable = true;
    theme = {
      name = "Catppuccin-Macchiato-Standard-Blue-Dark";
      package = pkgs.catppuccin-gtk.override {
        accents = [ "blue" ];
        size = "standard";
        variant = "macchiato";
      };
    };
    iconTheme = {
      name = "Papirus-Dark";
      package = pkgs.catppuccin-papirus-folders.override {
        flavor = "macchiato";
        accent = "blue";
      };
    };
    cursorTheme = {
      name = "Catppuccin-Macchiato-Dark-Cursors";
      package = pkgs.catppuccin-cursors.macchiatoDark;
    };
    gtk3 = {
      extraConfig.gtk-application-prefer-dark-theme = true;
    };
  };

  home.pointerCursor = {
    gtk.enable = true;
    name = "Catppuccin-Macchiato-Dark-Cursors";
    package = pkgs.catppuccin-cursors.macchiatoDark;
    size = 16;
  };

  dconf.settings = {
    "org/gnome/desktop/interface" = {
      gtk-theme = "Catppuccin-Macchiato-Standard-Blue-Dark";
      color-scheme = "prefer-dark";
    };

    # For Gnome shell
    "org/gnome/shell/extensions/user-theme" = {
      name = "Catppuccin-Macchiato-Standard-Blue-Dark";
    };
  };

QT

  qt = {
    enable = true;
    platformTheme = "qtct";
    style.name = "kvantum";
  };

  xdg.configFile."Kvantum/kvantum.kvconfig".source = (pkgs.formats.ini { }).generate "kvantum.kvconfig" {
    General.theme = "Catppuccin-Macchiato-Blue";
  };

Finally, you need to choose the icon theme for QT apps. Open qt5ct, then click Icon Theme > Papirus-Dark > Apply. If you use QT6 apps then you need to the the same in qt6ct (make sure the theme is kvantum there).

Hopefully this has been helpful. Happy nixing

nex · March 28, 2024, 4:42pm

We probably need to enforce theme by setting variables in sway configuration or somewhere else.
Snippet from hyprland.conf:

# Some default env vars.
env = XCURSOR_SIZE,16
#env = QT_QPA_PLATFORMTHEME,qt5ct # change to qt6ct if you have that
#env =  GTK2_RC_FILES,/home/USER/.config/gtk-2.0/gtkrc
env =  QT_QPA_PLATFORMTHEME,gtk2
env =  QT_STYLE_OVERRIDE,gtk2

Icons are working in pcmanfm-qt with some variables.

eljamm · March 28, 2024, 5:16pm

After posting my reply the icons disappeared from my pcmanfm-qt

Thankfully the issue was easily fixed from the settings, just go to Edit > Preferences > User Interface and choose Papirus-Dark as your icon theme.

Don’t know why this happened now, but I remember this happening to me before in other distros.

systemd.user.sessionVariables was the only way for qt5ct to read QT_QPA_PLATFORMTHEME for me. I tried:

environment.sessionVariables
environment.variables
home.sessionVariables

But those didn’t work.

Also, this was only necessary when using nixpkgs.config.qt as I didn’t have to manually set any variable when just using qt. This is on Gnome, though, so it might be necessary for other DE or WM.

heitorpb · March 28, 2024, 6:39pm

Oh, that’s super helpful!

Only reason I was using Breeze+catppuccin is history xD I’m now on [almost] full catppuccin thanks to you

I got no icons on pcmanfm-qt and pavucontrol-qt. Everything else looks fine.

Here’s my home.nix:

# Theme for graphical apps
{ machine, lib, pkgs, ... }:
{
  home.packages = with pkgs; [
    (catppuccin-kvantum.override {
      accent = "Blue";
      variant = "Mocha";
    })
    libsForQt5.qtstyleplugin-kvantum
    papirus-folders
  ];

  # Cursor setup
  home.pointerCursor = {
    name = "Catppuccin-Mocha-Lavender-Cursors";
    package = pkgs.catppuccin-cursors.mochaLavender;
    gtk.enable = true;
    size = machine.seat.cursorSize;
  };

  # GTK Setup
  gtk = {
    enable = true;
    theme = {
      name = "Catppuccin-Mocha-Standard-Blue-Dark";
      package = pkgs.catppuccin-gtk.override {
        accents = [ "blue" ];
        size = "standard";
        variant = "mocha";
      };
    };
    iconTheme = {
      #name = "Catppuccin-Mocha-Blue";
      name = "cat-mocha-blue";
      package = pkgs.catppuccin-papirus-folders.override {
        flavor = "mocha";
        accent = "blue";
      };
    };
    cursorTheme = {
      name = "Catppuccin-Mocha-Lavender-Cursors";
      package = pkgs.catppuccin-cursors.mochaLavender;
    };
    gtk3 = {
      extraConfig.gtk-application-prefer-dark-theme = true;
    };
  };
  dconf.settings = {
    "org/gtk/settings/file-chooser" = {
      sort-directories-first = true;
    };

    # GTK4 Setup
    "org/gnome/desktop/interface" = {
      gtk-theme = "Catppuccin-Mocha-Standard-Blue-Dark";
      color-scheme = "prefer-dark";
    };
  };

  xdg.configFile."Kvantum/kvantum.kvconfig".source = (pkgs.formats.ini { }).generate "kvantum.kvconfig" {
    General.theme = "Catppuccin-Mocha-Blue";
  };
}

And I have this in my configuration.nix:

  environment.systemPackages = with pkgs; [
    libsForQt5.qt5ct
  ];
  qt = {
    enable = true;
    platformTheme = "qt5ct";
    style= "kvantum";
  };

I think is some small little knob in the corner to turn…

I can get the icons to show in pcmanfm-qt if I set Edit → Preferences → Display → Icon Theme to Papirus-Dark. But that does not propagate to pavucontrol-qt for example.

eljamm · March 28, 2024, 9:24pm

I figured out the icon problem. I think this is also the reason why pcmanfm-qt had no icons.

The issues is that QT apps don’t have their icon theme set by default, so you can configure each one individually like we did with pcmanfm-qt. However, a better solution is to do it for all of them using qt5ct, as the Arch wiki suggests.

Just open qt5ct > Icon Theme > Papirus-Dark then click Apply.

This isn’t exactly the Nix way of doing things, but it’s something that works for now. We could probably also do this by modifying $HOME/.config/qt5ct/qt5ct.conf using home-manager, but I don’t know how exactly.

eljamm · March 28, 2024, 11:13pm

I was wrong here. Using nixpkgs.config.qt was pretty much a workaround as ot turns out the applications that didn’t show the icons were using QT6, and setting QT_QPA_PLATFORMTHEME = "qt5ct" made them use that instead of qt6ct (I’ll fix this in my original answer).

This is the same issue that we faced with pcmanfm-qt, but with QT6 apps. Fixing that is pretty much just setting the interface theme as kvantum and icon theme as Papirus-Dark in qt6ct.

Note: if any pcmanfm-qt user is wondering why the Application Menu is empty when right clicking a file Open With > Other Applications, that’s because you need to add the following packages:

  environment.systemPackages = with pkgs; [
    lxqt.lxqt-menu-data
    shared-mime-info # optional, but nice to have
  ];

heitorpb · April 1, 2024, 12:23pm

AHA!

Got it working! I manually wrote the configuration files for qt5ct and qt6ct this way:

  xdg.configFile = lib.mkIf hasSeat {
    kvantum = {
      target = "Kvantum/kvantum.kvconfig";
      text = lib.generators.toINI { } {
        General.theme = "Catppuccin-Mocha-Blue";
      };
    };

    qt5ct = {
      target = "qt5ct/qt5ct.conf";
      text = lib.generators.toINI { } {
        Appearance = {
          icon_theme = "Papirus-Dark";
        };
      };
    };

    qt6ct = {
      target = "qt6ct/qt6ct.conf";
      text = lib.generators.toINI { } {
        Appearance = {
          icon_theme = "Papirus-Dark";
        };
      };
    };

My hasSeat is a boolean that only writes this file if I have a systemd-seat (graphical interface), I use the same configuration files for my headless server. I need this because I use impermanence (Erase your darlings: immutable infrastructure for mutable systems - Graham Christensen). Also, I don’t want to have to manually setup my icons in the other laptop.

My complete configuration file is now this: wm-theme with these extra packages system-wide:

    libsForQt5.qtstyleplugin-kvantum.
    libsForQt5.qt5ct # Magic for some Qt apps keep functionality.

But it seems those two could be moved to my user.

Thank you @eljamm @nex!