firefox: add firefoxGnomeTheme.enable option (#702)

Link: #702 Tested-by: Daniel Thwaites <[email protected]> Approved-by: Daniel Thwaites <[email protected]> Reviewed-by: NAHO <[email protected]> Tested-by: NAHO <[email protected]>
danth · Jan 6, 2025 · 1d7b70e · 1d7b70e · knoopx · Jan 7, 2025
1 parent 284c5b0
commit 1d7b70e
Show file tree

Hide file tree

Showing 5 changed files with 182 additions and 27 deletions.
diff --git a/flake.lock b/flake.lock
diff --git a/flake.nix b/flake.nix
@@ -92,6 +92,11 @@
       # [1]: https://github.com/danth/stylix/issues/534
       url = "github:tinted-theming/tinted-kitty/eb39e141db14baef052893285df9f266df041ff8";
     };
+
+    firefox-gnome-theme = {
+      flake = false;
+      url = "github:rafaelmardojai/firefox-gnome-theme";
+    };
   };
 
   outputs =

diff --git a/modules/firefox/hm.nix b/modules/firefox/hm.nix
@@ -1,19 +1,7 @@
-# Consider also updating the LibreWolf module when updating this module,
-# as they are very similar.
-
 { config, lib, ... }:
 
 let
-  profileSettings = {
-    settings = {
-      "font.name.monospace.x-western" = config.stylix.fonts.monospace.name;
-      "font.name.sans-serif.x-western" = config.stylix.fonts.sansSerif.name;
-      "font.name.serif.x-western" = config.stylix.fonts.serif.name;
-    };
-  };
-  makeProfileSettingsPair =
-    profileName: lib.nameValuePair profileName profileSettings;
-  derivatives = [
+  targets = [
     {
       path = "firefox";
       name = "Firefox";
@@ -23,31 +11,84 @@ let
       name = "LibreWolf";
     }
   ];
+  eachConfig = mkCfg: targets: lib.mkMerge (map mkCfg targets);
+  eachTarget =
+    mkCfg:
+    lib.mkIf config.stylix.enable (
+      eachConfig (
+        target:
+        let
+          cfg = config.stylix.targets.${target.path};
+          programCfg = config.programs.${target.path};
+        in
+        lib.mkIf cfg.enable (mkCfg {
+          inherit target cfg programCfg;
+        })
+      ) targets
+    );
 in
 {
   options.stylix.targets = lib.listToAttrs (
     map (
-      drv:
-      lib.nameValuePair drv.path {
-        enable = config.lib.stylix.mkEnableTarget drv.name true;
+      target:
+      lib.nameValuePair target.path {
+        enable = config.lib.stylix.mkEnableTarget target.name true;
 
         profileNames = lib.mkOption {
-          description = "The ${drv.name} profile names to apply styling on.";
+          description = "The ${target.name} profile names to apply styling on.";
           type = lib.types.listOf lib.types.str;
           default = [ ];
         };
+
+        firefoxGnomeTheme.enable = config.lib.stylix.mkEnableTarget ''
+          [Firefox GNOME
+          theme](https://github.com/rafaelmardojai/firefox-gnome-theme)
+        '' false;
       }
-    ) derivatives
+    ) targets
   );
 
-  config = lib.mkMerge (
-    map (
-      drv:
-      lib.mkIf (config.stylix.enable && config.stylix.targets.${drv.path}.enable) {
-        programs.${drv.path}.profiles = lib.listToAttrs (
-          map makeProfileSettingsPair config.stylix.targets.${drv.path}.profileNames
-        );
-      }
-    ) derivatives
+  # This and the below assignment aren't merged because of
+  # https://discourse.nixos.org/t/infinite-recursion-in-module-with-mkmerge/10989
+  config.programs = eachTarget (
+    { target, cfg, ... }:
+    eachConfig (profileName: {
+      ${target.path}.profiles.${profileName} = lib.mkMerge [
+        {
+          settings = {
+            "font.name.monospace.x-western" = config.stylix.fonts.monospace.name;
+            "font.name.sans-serif.x-western" = config.stylix.fonts.sansSerif.name;
+            "font.name.serif.x-western" = config.stylix.fonts.serif.name;
+          };
+        }
+        (lib.mkIf cfg.firefoxGnomeTheme.enable {
+          settings = {
+            "toolkit.legacyUserProfileCustomizations.stylesheets" = true;
+            "svg.context-properties.content.enabled" = true;
+          };
+
+          userChrome = builtins.readFile (
+            config.lib.stylix.colors {
+              template = ./userChrome.mustache;
+              extension = "css";
+            }
+          );
+
+          userContent = ''
+            @import "firefox-gnome-theme/userContent.css";
+          '';
+        })
+      ];
+    }) cfg.profileNames
+  );
+
+  config.home.file = eachTarget (
+    { cfg, programCfg, ... }:
+    lib.mkIf cfg.firefoxGnomeTheme.enable (
+      eachConfig (profileName: {
+        "${programCfg.configPath}/${profileName}/chrome/firefox-gnome-theme".source =
+          config.lib.stylix.templates.firefox-gnome-theme;
+      }) cfg.profileNames
+    )
   );
 }
diff --git a/modules/firefox/userChrome.mustache b/modules/firefox/userChrome.mustache
@@ -0,0 +1,91 @@
+@import "firefox-gnome-theme/userChrome.css";
+
+/* This is strongly inspired by ../gtk/gtk.mustache. */
+:root {
+  /* Palette */
+  --gnome-palette-blue-1: #{{base0D-hex}};
+  --gnome-palette-blue-2: #{{base0D-hex}};
+  --gnome-palette-blue-3: #{{base0D-hex}};
+  --gnome-palette-blue-4: #{{base0D-hex}};
+  --gnome-palette-blue-5: #{{base0D-hex}};
+  --gnome-palette-green-1: #{{base0B-hex}};
+  --gnome-palette-green-2: #{{base0B-hex}};
+  --gnome-palette-green-3: #{{base0B-hex}};
+  --gnome-palette-green-4: #{{base0B-hex}};
+  --gnome-palette-green-5: #{{base0B-hex}};
+  --gnome-palette-yellow-1: #{{base0A-hex}};
+  --gnome-palette-yellow-2: #{{base0A-hex}};
+  --gnome-palette-yellow-3: #{{base0A-hex}};
+  --gnome-palette-yellow-4: #{{base0A-hex}};
+  --gnome-palette-yellow-5: #{{base0A-hex}};
+  --gnome-palette-orange-1: #{{base09-hex}};
+  --gnome-palette-orange-2: #{{base09-hex}};
+  --gnome-palette-orange-3: #{{base09-hex}};
+  --gnome-palette-orange-4: #{{base09-hex}};
+  --gnome-palette-orange-5: #{{base09-hex}};
+  --gnome-palette-red-1: #{{base08-hex}};
+  --gnome-palette-red-2: #{{base08-hex}};
+  --gnome-palette-red-3: #{{base08-hex}};
+  --gnome-palette-red-4: #{{base08-hex}};
+  --gnome-palette-red-5: #{{base08-hex}};
+  --gnome-palette-purple-1: #{{base0E-hex}};
+  --gnome-palette-purple-2: #{{base0E-hex}};
+  --gnome-palette-purple-3: #{{base0E-hex}};
+  --gnome-palette-purple-4: #{{base0E-hex}};
+  --gnome-palette-purple-5: #{{base0E-hex}};
+  --gnome-palette-brown-1: #{{base0F-hex}};
+  --gnome-palette-brown-2: #{{base0F-hex}};
+  --gnome-palette-brown-3: #{{base0F-hex}};
+  --gnome-palette-brown-4: #{{base0F-hex}};
+  --gnome-palette-brown-5: #{{base0F-hex}};
+  --gnome-palette-light-1: #{{base01-hex}};
+  --gnome-palette-light-2: #{{base01-hex}};
+  --gnome-palette-light-3: #{{base01-hex}};
+  --gnome-palette-light-4: #{{base01-hex}};
+  --gnome-palette-light-5: #{{base01-hex}};
+  --gnome-palette-dark-1: #{{base01-hex}};
+  --gnome-palette-dark-2: #{{base01-hex}};
+  --gnome-palette-dark-3: #{{base01-hex}};
+  --gnome-palette-dark-4: #{{base01-hex}};
+  --gnome-palette-dark-5: #{{base01-hex}};
+
+  /* Colors */
+  --gnome-warning-bg: #{{base0E-hex}};
+
+  /* Window */
+  --gnome-window-background: #{{base00-hex}};
+  --gnome-window-color: #{{base05-hex}};
+  --gnome-view-background: #{{base00-hex}};
+  --gnome-sidebar-background: #{{base01-hex}};
+  --gnome-secondary-sidebar-background: #{{base01-hex}};
+
+  /* Card */
+  --gnome-card-background: #{{base01-hex}};
+  --gnome-card-shade-color: rgba(0, 0, 0, 0.07);
+
+  /* Menu */
+  --gnome-menu-background: #{{base01-hex}};
+
+  /* Headerbar */
+  --gnome-headerbar-background: #{{base01-hex}};
+  --gnome-headerbar-shade-color: rgba(0, 0, 0, 0.07);
+
+  /* Toolbar */
+  --gnome-toolbar-icon-fill: #{{base05-hex}};
+
+  /* Tabs */
+  --gnome-tabbar-tab-hover-background: color-mix(in srgb, #{{base01-hex}}, #{{base02-hex}} 75%);
+  --gnome-tabbar-tab-active-background: #{{base02-hex}};
+  --gnome-tabbar-tab-active-background-contrast: #{{base02-hex}};
+  --gnome-tabbar-tab-active-hover-background: color-mix(in srgb, #{{base02-hex}}, #{{base03-hex}} 25%);
+
+  /* Private Tabs */
+  --gnome-private-wordmark: #{{base04-hex}};
+  --gnome-private-in-content-page-background: #{{base00-hex}};
+  --gnome-private-text-primary-color: #{{base04-hex}};
+
+  &:-moz-window-inactive {
+    --gnome-tabbar-tab-hover-background: var(--gnome-tabbar-tab-hover-background);
+    --gnome-tabbar-tab-active-background: var(--gnome-tabbar-tab-active-background);
+  }
+}
diff --git a/stylix/templates.nix b/stylix/templates.nix
@@ -9,6 +9,7 @@ inputs: {
       tinted-kitty
       tinted-tmux
       tinted-zed
+      firefox-gnome-theme
       ;
   };
 }