Style libadwaita apps ✨

Rather than changing the GTK theme, we now use the default Adwaita
theme with modified colours. This creates a consistent look across
all GTK3, GTK4 and Libadwaita apps.

TODO: Gnome shell theme

flake.nix

@@ -67,7 +67,7 @@
           ./modules/fish.nix
           ./modules/gnome.nix
           ./modules/grub.nix
-          ./modules/gtk.nix
+          ./modules/gtk
           ./modules/helix.nix
           ./modules/kitty.nix
           ./modules/lightdm.nix

modules/gtk.nix

@@ -1,165 +0,0 @@
-{ pkgs, config, lib, ... }:
-
-let
-  rendersvg = pkgs.runCommandLocal "rendersvg" { } ''
-    mkdir -p $out/bin
-    ln -s ${pkgs.resvg}/bin/resvg $out/bin/rendersvg
-  '';
-
-  materia = with pkgs;
-    stdenvNoCC.mkDerivation {
-      name = "stylix-materia";
-
-      src = fetchFromGitHub {
-        owner = "nana-4";
-        repo = "materia-theme";
-        rev = "af63425f9bbb2ac9bc4853a4357457d743c65308";
-        sha256 = "+E8eJQcDw4F12MmGrCoFUeGFZzYZWQtY7PVhXVAZRFY=";
-      };
-
-      nativeBuildInputs = [ bc meson ninja nodePackages.sass optipng rendersvg ];
-
-      FONTCONFIG_FILE = makeFontsConf {
-        fontDirectories = [ config.stylix.fonts.sansSerif.package ];
-      };
-
-      postPatch = ''
-        patchShebangs .
-        sed -e '/handle-horz-.*/d' -e '/handle-vert-.*/d' -i src/gtk-2.0/assets.txt
-      '';
-
-      # Based on https://github.com/nana-4/materia-theme/blob/master/change_color.sh
-      preConfigure = with config.lib.stylix.colors.withHashtag;
-        let font = config.stylix.fonts.sansSerif.name;
-        in ''
-          echo 'Setting font family'
-
-          sed 's/$font-family: .*;/$font-family: "${font}";/' \
-            -i src/gnome-shell/sass/_typography.scss
-          sed 's/$font-family-large: .*;/$font-family-large: "${font}";/' \
-            -i src/gnome-shell/sass/_typography.scss
-
-          echo 'Substituting colors'
-
-          PATHLIST=(
-            './src/_theme-color.scss'
-            './src/chrome'
-            './src/cinnamon'
-            './src/cinnamon/assets'
-            './src/gnome-shell'
-            './src/gtk-2.0/assets.svg'
-            './src/gtk-2.0/assets-dark.svg'
-            './src/gtk-2.0/gtkrc'
-            './src/gtk-2.0/gtkrc-dark'
-            './src/gtk-2.0/gtkrc-light'
-            './src/gtk-3.0/assets.svg'
-            './src/metacity-1'
-            './src/unity'
-            './src/xfwm4'
-          )
-
-          mv src/_theme-color.template.scss src/_theme-color.scss
-
-          for FILEPATH in "$PATHLIST"; do
-            find "$FILEPATH" -type f -not -name '_color-palette.scss' -exec sed -i'\' \
-              -e 's/#121212/%BG%/g' \
-              -e 's/#f9f9f9/%BG%/g' \
-              -e 's/#000000/%FG%/g' \
-              -e 's/#212121/%FG%/g' \
-              -e 's/#eeeeee/%FG%/g' \
-              -e 's/#ffffff/%FG%/g' \
-              -e 's/#272727/%HDR_BG%/g' \
-              -e 's/#424242/%HDR_BG%/g' \
-              -e 's/#f0f0f0/%HDR_BG%/g' \
-              -e 's/#1e1e1e/%HDR_BG2%/g' \
-              -e 's/#303030/%HDR_BG2%/g' \
-              -e 's/#ebebeb/%HDR_BG2%/g' \
-              -e 's/#1d1d1d/%HDR_FG%/g' \
-              -e 's/#e4e4e4/%HDR_FG%/g' \
-              -e 's/#ffffff/%HDR_FG%/g' \
-              -e 's/#565656/%INACTIVE_FG%/g' \
-              -e 's/#a7a7a7/%INACTIVE_FG%/g' \
-              -e 's/#c1c1c1/%INACTIVE_FG%/g' \
-              -e 's/#2e2e2e/%MATERIA_SURFACE%/g' \
-              -e 's/#ffffff/%MATERIA_SURFACE%/g' \
-              -e 's/#1e1e1e/%MATERIA_VIEW%/g' \
-              -e 's/#ffffff/%MATERIA_VIEW%/g' \
-              -e 's/#1967d2/%SEL_BG%/g' \
-              -e 's/#8ab4f8/%SEL_BG%/g' \
-              -e 's/#8ab4f8/%SEL_BG%/g' \
-              {} \; ;
-
-            find "$FILEPATH" -type f -exec sed -i'\' \
-              -e 's/%BG%/${base00}/g' \
-              -e 's/%BG2%/${base01}/g' \
-              -e 's/%FG%/${base05}/g' \
-              -e 's/%HDR_BG%/${base01}/g' \
-              -e 's/%HDR_BG2%/${base01}/g' \
-              -e 's/%HDR_BG3%/${base01}/g' \
-              -e 's/%HDR_FG%/${base05}/g' \
-              -e 's/%INACTIVE_FG%/${base04}/g' \
-              -e 's/%MATERIA_SURFACE%/${base01}/g' \
-              -e 's/%MATERIA_VIEW%/${base00}/g' \
-              -e 's/%SEL_BG%/${base02}/g' \
-              -e 's/%SEL_BG2%/${base03}/g' \
-              -e 's/%TERMINAL_COLOR4%/${base0A}/g' \
-              -e 's/%TERMINAL_COLOR5%/${base0D}/g' \
-              -e 's/%TERMINAL_COLOR9%/${base03}/g' \
-              -e 's/%TERMINAL_COLOR10%/${base09}/g' \
-              -e 's/%TERMINAL_COLOR11%/${base01}/g' \
-              -e 's/%TERMINAL_COLOR12%/${base02}/g' \
-              -e 's/%MATERIA_SELECTION_OPACITY%/0.32/g' \
-              -e 's/%MATERIA_PANEL_OPACITY%/0.6/g' \
-              {} \; ;
-          done
-        '';
-
-      preBuild = ''
-        export HOME="$NIX_BUILD_ROOT"
-        cd ..
-
-        echo 'Rendering GTK2 assets'
-        ./render-assets.sh gtk2-light
-
-        echo 'Rendering GTK3 assets'
-        ./render-assets.sh gtk
-
-        cd build
-      '';
-
-      mesonFlags = [
-        "-Dcolors=default"
-        # TODO: Provide an option to choose compact/default
-        "-Dsizes=compact"
-      ];
-    };
-
-  theme = {
-    package = materia;
-    name = "Materia-compact";
-  };
-
-in {
-  options.stylix.targets.gtk.enable =
-    config.lib.stylix.mkEnableTarget "the GTK theme"
-    # GTK will probably be unused without Xorg / Wayland.
-    # There isn't a single option which covers all Wayload compositors,
-    # and many of them don't have NixOS modules at all. Therefore, we use
-    # OpenGL as the next best condition to detect that Wayland is enabled.
-    (config.services.xserver.enable || config.hardware.opengl.enable);
-
-  config = lib.mkIf config.stylix.targets.gtk.enable {
-    # Required for Home Manager's GTK settings to work
-    programs.dconf.enable = true;
-
-    home-manager.sharedModules = [{
-      gtk = {
-        enable = true;
-        inherit theme;
-        font = config.stylix.fonts.sansSerif;
-      };
-    }];
-
-    services.xserver.displayManager.lightdm.greeters.gtk.theme = theme;
-  };
-}

modules/gtk/default.nix

@@ -0,0 +1,33 @@
+{ pkgs, config, lib, ... }:
+
+let
+  css = config.lib.stylix.colors {
+    template = builtins.readFile ./gtk.mustache;
+    extension = "css";
+  };
+ 
+in {
+  options.stylix.targets.gtk.enable =
+    config.lib.stylix.mkEnableTarget "all GTK3, GTK4 and Libadwaita apps" true;
+
+  config = lib.mkIf config.stylix.targets.gtk.enable {
+    # Required for Home Manager's GTK settings to work
+    programs.dconf.enable = true;
+
+    home-manager.sharedModules = [{
+      gtk = {
+        enable = true;
+        font = config.stylix.fonts.sansSerif;
+        theme = {
+          package = pkgs.adw-gtk3;
+          name = "adw-gtk3";
+        };
+      };
+
+      xdg.configFile = {
+        "gtk-3.0/gtk.css".source = css;
+        "gtk-4.0/gtk.css".source = css;
+      };
+    }];
+  };
+}

modules/gtk/gtk.mustache

@@ -0,0 +1,78 @@
+@define-color accent_color #{{base0A-hex}};
+@define-color accent_bg_color #{{base0A-hex}};
+@define-color accent_fg_color #{{base00-hex}};
+@define-color destructive_color #{{base08-hex}};
+@define-color destructive_bg_color #{{base08-hex}};
+@define-color destructive_fg_color #{{base00-hex}};
+@define-color success_color #{{base0B-hex}};
+@define-color success_bg_color #{{base0B-hex}};
+@define-color success_fg_color #{{base00-hex}};
+@define-color warning_color #{{base0E-hex}};
+@define-color warning_bg_color #{{base0E-hex}};
+@define-color warning_fg_color #{{base00-hex}};
+@define-color error_color #{{base08-hex}};
+@define-color error_bg_color #{{base08-hex}};
+@define-color error_fg_color #{{base00-hex}};
+@define-color window_bg_color #{{base00-hex}};
+@define-color window_fg_color #{{base05-hex}};
+@define-color view_bg_color #{{base00-hex}};
+@define-color view_fg_color #{{base05-hex}};
+@define-color headerbar_bg_color #{{base01-hex}};
+@define-color headerbar_fg_color #{{base05-hex}};
+@define-color headerbar_border_color #{{base01-hex}}cc;
+@define-color headerbar_backdrop_color @window_bg_color;
+@define-color headerbar_shade_color rgba(0, 0, 0, 0.07);
+@define-color card_bg_color #{{base01-hex}};
+@define-color card_fg_color #{{base05-hex}};
+@define-color card_shade_color rgba(0, 0, 0, 0.07);
+@define-color dialog_bg_color #{{base01-hex}};
+@define-color dialog_fg_color #{{base05-hex}};
+@define-color popover_bg_color #{{base01-hex}};
+@define-color popover_fg_color #{{base05-hex}};
+@define-color shade_color rgba(0, 0, 0, 0.07);
+@define-color scrollbar_outline_color #{{base02-hex}};
+@define-color blue_1 #{{base0D-hex}};
+@define-color blue_2 #{{base0D-hex}};
+@define-color blue_3 #{{base0D-hex}};
+@define-color blue_4 #{{base0D-hex}};
+@define-color blue_5 #{{base0D-hex}};
+@define-color green_1 #{{base0B-hex}};
+@define-color green_2 #{{base0B-hex}};
+@define-color green_3 #{{base0B-hex}};
+@define-color green_4 #{{base0B-hex}};
+@define-color green_5 #{{base0B-hex}};
+@define-color yellow_1 #{{base0A-hex}};
+@define-color yellow_2 #{{base0A-hex}};
+@define-color yellow_3 #{{base0A-hex}};
+@define-color yellow_4 #{{base0A-hex}};
+@define-color yellow_5 #{{base0A-hex}};
+@define-color orange_1 #{{base09-hex}};
+@define-color orange_2 #{{base09-hex}};
+@define-color orange_3 #{{base09-hex}};
+@define-color orange_4 #{{base09-hex}};
+@define-color orange_5 #{{base09-hex}};
+@define-color red_1 #{{base08-hex}};
+@define-color red_2 #{{base08-hex}};
+@define-color red_3 #{{base08-hex}};
+@define-color red_4 #{{base08-hex}};
+@define-color red_5 #{{base08-hex}};
+@define-color purple_1 #{{base0E-hex}};
+@define-color purple_2 #{{base0E-hex}};
+@define-color purple_3 #{{base0E-hex}};
+@define-color purple_4 #{{base0E-hex}};
+@define-color purple_5 #{{base0E-hex}};
+@define-color brown_1 #{{base0F-hex}};
+@define-color brown_2 #{{base0F-hex}};
+@define-color brown_3 #{{base0F-hex}};
+@define-color brown_4 #{{base0F-hex}};
+@define-color brown_5 #{{base0F-hex}};
+@define-color light_1 #{{base01-hex}};
+@define-color light_2 #{{base01-hex}};
+@define-color light_3 #{{base01-hex}};
+@define-color light_4 #{{base01-hex}};
+@define-color light_5 #{{base01-hex}};
+@define-color dark_1 #{{base01-hex}};
+@define-color dark_2 #{{base01-hex}};
+@define-color dark_3 #{{base01-hex}};
+@define-color dark_4 #{{base01-hex}};
+@define-color dark_5 #{{base01-hex}};