Struggling to configure GTk/QT theme on laptop

Help
1

Hello!

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

Here’s what I want:

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?

1 Like
2 
  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.

2 Likes
3

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

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?

4

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

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 :leaves:

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 :smiley: 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 :cat:

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 :snowflake:

3 Likes
5

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.

1 Like
6

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

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.

7

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 :smiley:

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.

1 Like
8

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.

9

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
  ];
1 Like
10

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!

2 Likes
11

@eljamm do you still have your catpuccins working everywhere? I updated my system and lost the icons, cursors and themes. Have no Idea how to setup anymore.

12

Some things have changed since then, but I’m using catppuccin/nix and it’s working for me (you can check this out in my config). Can you share your current configuration?

Edit: More likely related to GTK settings suddenly not applying

13

Thanks for the hint on catppuccin.nix, that’s awesome!

I managed to get GTK working with Catppuccin theme, but not Qt. Here’s what I currently have:

{ machine, lib, pkgs, ... }:
let
  hasSeat = machine.seat != null;
  catppuccinFlavor = "macchiato";
  catppuccinAccent = "blue";
in
{
  home.packages = with pkgs; lib.mkIf hasSeat [
    papirus-folders
  ];

  # Mouse cursor
  catppuccin.pointerCursor = {
    enable = true;
    accent = catppuccinAccent;
    flavor = catppuccinFlavor;
  };

  # GTK Setup
  gtk = lib.mkIf hasSeat {
    enable = true;

    catppuccin = {
      #enable = true; # No need to set this anymore
      accent = catppuccinAccent;
      flavor = catppuccinFlavor;

      icon = {
        enable = true;
        accent = catppuccinAccent;
        flavor = catppuccinFlavor;
      };
    };

    gtk3.extraConfig.gtk-application-prefer-dark-theme = true;
  };

  # Qt setup - not working properly
  qt = lib.mkIf hasSeat {
    enable = true;

    platformTheme.name = "kvantum";
    style = {
      name = "kvantum";

      catppuccin = {
        enable = true;
        apply = true;
        accent = catppuccinAccent;
        flavor = catppuccinFlavor;
      };
    };
  };
}

I have no icons in Qt apps (e.g. pavucontrol-qt) and they are just plain white.

How to configure Qt?

14

This is how I have it set up right now:

Didn’t know a module for QT was added for catppuccin-nix :thinking:

It’s worth noting that my method isn’t fully reproducible as I’m using qtct to set kvantum as the theme. Although that can be done automatically as you’ve done before with the icon theme:

15

It worked back then, but the icons are not showing up anymore :frowning:

16

Do theme files exist under $XDG_CONFIG_HOME/Kvantum?

Do you see anything odd in the generated config files?

17

I see the files in there, with a SVG and a kvconfig files. The svg seems a bit odd to me:

Catppuccin-Macchiato-Blue
Catppuccin-Macchiato-Blue845×695 18.2 KB

Seems to be missing many icons, like folders for example? In the case of pavucontrol, the symbols for audio, mic, enabled, etc are not in this SVG. Should they be there?

What do you see in there?

18

Ah, right. That’s for the theme and not the icons. That’s perfectly normal.

Can you manually change the icon theme in qt5ct and qt6ct? You can change it to something else and see if it works, then back to Papirus-Dark and see if that works as well.

19

Oh, that makes sense.

Found something: I get a warning when I open qt6ct:

Please remove the QT_STYLE_OVERRIDE environment variable (current value: kvantum).

The QT_QPA_PLATFORMTHEME environment variable is not set correctly (current value: kvantum, required values: qt6ct or qt5ct).

I don’t set any of those environment variables manually. Do you have them in your env?

20

Those are set by the catppuccin QT module (see here).

I only have the QT_STYLE_OVERRIDE message since my platform theme is qt5ct.

I think that those are just warnings, though, right? or does this mean you can’t change the icon theme if you’re not using qt5ct as a platform theme?