How to set gtk "colors" for adw-gtk3 package?

[mobsenpai]

[NOT AN ISSUE]

Description

Hi. Just a simple question of how to set gtk colors (mind it not the gtk theme) for adw-gtk3 gtk theme package. Only way I can think of is to use xdg.configFile and write it to gtk.css but I wan't to know more options or any good declarative way of doing it.

[chaorace]

I think that's the only way to make adw-gtk3 work "correctly" with HM currently. That's what I've personally resorted to doing, at least. I'd very much like to see the adw-gtk3 method get officially adopted by HM -- it's just so much more reliable than the current method in my personal experience.

One little tip I have to share is that you should manually override the dconf theme configuration because HM sets it to adw-gtk3 when it should actually instead point to the "true" theme. If no fix is applied (... and you're using Wayland), many newer GTK applications which prefer checking dconf won't be styled correctly -- X11 users aren't affected as they can set the theme via xsettings (e.g.: gsettings set org.gnome.desktop.interface [theme])

Wayland users who don't want xdg-desktop-portal-gtk can disable LibADW portal integration via ADW_DISABLE_PORTAL=1 (thereby forcing GTK to check "gtk.css"/GNOME_THEME)... but I recommend avoiding this because it makes theming certain sandboxed GTK applications almost impossible. I much prefer using xdg-desktop-portal-gtk & dconf.settings to achieve the same effect without extra breakage (at least as far as I'm aware! :crossed_fingers:).

Here's a quick config demo to better illustrate how everything fits together:

{ lib, pkgs, ... }: let
  # Specify the theme locally since `config.gtk.theme` is otherwise occupied
  gtkTheme = {
    name = 'Gruvbox-Dark-BL';
    package = pkgs.gruvbox-gtk-theme;
  };
in {
  # adw-gtk3 goes here
  gtk = {
    enable = true;
    theme = {
      package = pkgs.adw-gtk3;
      name = "adw-gtk3";
    };
  };

  # Actual theming goes here
  xdg.configFile = let
    gtkThemeDir = "${gtkTheme.package}/share/themes/${gtkTheme.name}";
  in {
    "gtk-3.0/gtk.css".source = "${gtkThemeDir}/gtk-3.0/gtk.css";
    # The gtk-4.0/gtk.css can instead be pointed at gtk-3.0 if the theme has no gtk-4.0 dir
    "gtk-4.0/gtk.css".source = "${gtkThemeDir}/gtk-4.0/gtk.css";
  };

  # (Wayland) Fixing dconf-based theme configuration & sandboxed applications
  ## The theme MUST be installed, not merely available somewhere the nix-store
  home.packages = [ gtkTheme.package ];
  ## Override HM's standard behavior of setting this to gtk.theme.name
  dconf.settings."org/gnome/desktop/interface".gtk-theme = lib.mkForce gtkTheme.name;
  ## For dconf-based config, your machine MUST have xdg-desktop-portal-gtk installed
  ## It might already be installed, so CHECK first and only add below config IF necessary
  xdg.portal = {
    enable = true;
    extraPortals = [ pkgs.xdg-desktop-portal-gtk ];
  };

[mobsenpai]

Tq for so much detailed answer. I like how you are using the gtk.css file from gruvbox package itself, and not making my own, that's really a good idea. Also as you said there may be some theming inconsistencies, which is what I may be facing for now. This is what I ended up doing before your response

{
  config,
  lib,
  pkgs,
  ...
}: let
  cssContent = with config.myhome.colorscheme; ''
    @define-color accent_color ${xcolors.orange};
    @define-color accent_bg_color ${xcolors.darkorange};
    @define-color accent_fg_color ${xcolors.white};

    @define-color destructive_color ${xcolors.aqua};
    @define-color destructive_bg_color ${xcolors.darkaqua};
    @define-color destructive_fg_color ${xcolors.white};

    @define-color success_color ${xcolors.green};
    @define-color success_bg_color ${xcolors.darkgreen};
    @define-color success_fg_color ${xcolors.white};

    @define-color warning_color ${xcolors.yellow};
    @define-color warning_bg_color ${xcolors.darkyellow};
    @define-color warning_fg_color ${xcolors.white};

    @define-color error_color ${xcolors.red};
    @define-color error_bg_color ${xcolors.darkred};
    @define-color error_fg_color ${xcolors.white};

    @define-color window_bg_color ${xcolors.black1};
    @define-color window_fg_color ${xcolors.white};

    @define-color view_bg_color ${xcolors.black1};
    @define-color view_fg_color ${xcolors.white};

    @define-color headerbar_bg_color ${xcolors.black1};
    @define-color headerbar_fg_color ${xcolors.white};
    @define-color headerbar_border_color ${xcolors.white};
    @define-color headerbar_backdrop_color @window_bg_color;
    @define-color headerbar_shade_color rgba(0, 0, 0, 0.36);

    @define-color card_bg_color rgba(255, 255, 255, 0.08);
    @define-color card_fg_color ${xcolors.white};
    @define-color card_shade_color rgba(0, 0, 0, 0.36);

    @define-color dialog_bg_color ${xcolors.black2};
    @define-color dialog_fg_color ${xcolors.white};

    @define-color popover_bg_color ${xcolors.black2};
    @define-color popover_fg_color ${xcolors.white};

    @define-color shade_color rgba(0, 0, 0, 0.36);
    @define-color scrollbar_outline_color rgba(0, 0, 0, 0.5);
  '';
in {
  options = {
    myhome.gtk.enable = lib.mkEnableOption "enables gtk";
  };

  config = lib.mkIf config.myhome.gtk.enable {
    gtk = {
      enable = true;

      font = {
        package = pkgs.nerdfonts.override {fonts = ["JetBrainsMono"];};
        name = "JetBrainsMono Nerd Font";
        size = 10;
      };

      iconTheme = {
        package = pkgs.gnome.adwaita-icon-theme;
        name = "Adwaita";
      };

      theme = {
        package = pkgs.adw-gtk3;
        name = "adw-gtk3";
      };

      gtk3.extraCss = cssContent;
      gtk4.extraCss = cssContent;
    };

    qt = {
      enable = true;
      platformTheme = "gtk";
      style = {
        name = "gtk2";
        package = pkgs.qt6Packages.qt6gtk2;
      };
    };
  };
}

But I am not able to figure out why the sidebar (of file/folder upload dialog, which comes in browser) is not themed. here is the pic:

If I am not wrong you suggest to use dconf, and xdg-portal (I am using xdg-desktop-portal-gtk). What should I do to solve this? will dconf solve it? Do give any ideas please, tq.

[chaorace]

The dconf thing only really comes into play if the theme isn't applying at all. From what you've shown, it looks like the theme is there but kind of... broken.

My first impression is that something might be wrong with the CSS. Would it be possible to try loading up a different known-working style? Even if it doesn't fix the issue, a visual comparison of two different themes may help reveal more about what's going on.

By the way, about your QT config: I don't think the current setting of qt.style.name is actually doing anything. You could leave it blank instead if you're happy with it.

EDIT: I said something in an earlier version of this comment about also setting a QT style to get more modern looking elements, but that's not actually the case. I can't believe I didn't notice sooner! :facepalm:

[mobsenpai]

• [x] Used css file from a package, still the same result.
• [ ] Info: Using adw-gtk3-dark in the theme name, the sidebar(of file upload dialog) gets do get dark themed but in adwaita colors.
• [x] Info: This sidebar issue it only with file/folder upload dialog box.
• [ ] Checked home-manager repo, found out that only platformtheme is needed. Which one to use? -> gtk or gtk3
• [ ] Variable not picked up on hyprland? export QT_QPA_PLATFORMTHEME=gtk3 in terminal and then launch any qt app, it works and shows the theme, but it doesn't for export QT_QPA_PLATFORMTHEME=gtk.
• [ ] Is QT_QPA_PLATFORM="wayland;xcb" variable related to this?