librewolf: use firefox-gnome-theme

brckd · Dec 16, 2024 · a9f0b89 · a9f0b89
1 parent 518e7bd
commit a9f0b89
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 9 deletions.
diff --git a/flake.lock b/flake.lock
diff --git a/flake.nix b/flake.nix
@@ -249,5 +249,10 @@
       url = "github:spotlab-live/spicetify-waveform";
       flake = false;
     };
+
+    firefox-gnome-theme = {
+      url = "github:rafaelmardojai/firefox-gnome-theme";
+      flake = false;
+    };
   };
 }
diff --git a/modules/home/librewolf/default.nix b/modules/home/librewolf/default.nix
@@ -3,6 +3,7 @@
   lib,
   nur,
   pkgs,
+  firefox-gnome-theme,
   ...
 }:
 with lib; let
@@ -100,21 +101,37 @@ in {
             }
           ];
           settings = {
-            "webgl.disabled" = false;
             "extensions.autoDisableScopes" = 0; # Enable extensions
-            "toolkit.legacyUserProfileCustomizations.stylesheets" = true; # Enable userchrome
             "browser.aboutConfig.showWarning" = false;
+            "webgl.disabled" = false;
 
             # Blank homepage
             "browser.newtabpage.enable" = false;
             "browser.startup.homepage" = "about:newtab";
             "browser.toolbars.bookmarks.visibility" = "never";
 
-            # Toolbar customization
+            # UI customization
+            "extensions.activeThemeID" = "[email protected]";
             "browser.uiCustomization.state" = builtins.readFile ./toolbar.json;
+            "toolkit.legacyUserProfileCustomizations.stylesheets" = true; # Enable userchrome
+            "svg.context-properties.content.enabled" = true;
+            "browser.theme.dark-private-windows" = false;
+            "layers.acceleration.force-enabled" = true; # Rounded window corners on Wayland
+
+            # Gnome Theme
+            "gnomeTheme.bookmarksToolbarUnderTabs" = true;
+            "gnomeTheme.dragWindowHeaderbarButtons" = true;
+            "gnomeTheme.symbolicTabIcons" = true;
           };
 
-          userChrome = builtins.readFile ./userChrome.css;
+          userChrome = builtins.readFile (config.lib.stylix.colors {
+            template = ./userChrome.mustache;
+            extension = "css";
+          });
+
+          userContent = ''
+            @import "firefox-gnome-theme/userContent.css";
+          '';
         };
       };
       policies = {
@@ -151,5 +168,7 @@ in {
         ];
       };
     };
+
+    home.file.".librewolf/default/chrome/firefox-gnome-theme".source = firefox-gnome-theme;
   };
 }
diff --git a/modules/home/librewolf/toolbar.json b/modules/home/librewolf/toolbar.json
@@ -10,13 +10,17 @@
       "back-button",
       "forward-button",
       "stop-reload-button",
+      "new-tab-button",
+      "customizableui-special-spring8",
       "urlbar-container",
+      "customizableui-special-spring9",
       "downloads-button",
       "_446900e4-71c2-419f-a6a7-df9c091e268b_-browser-action",
       "unified-extensions-button"
     ],
     "toolbar-menubar": ["menubar-items"],
-    "TabsToolbar": ["tabbrowser-tabs", "new-tab-button", "alltabs-button"],
+    "TabsToolbar": ["tabbrowser-tabs", "alltabs-button"],
+    "vertical-tabs": [],
     "PersonalToolbar": ["import-button", "personal-bookmarks"]
   },
   "seen": [
@@ -25,15 +29,17 @@
     "addon_darkreader_org-browser-action",
     "ublock0_raymondhill_net-browser-action",
     "_446900e4-71c2-419f-a6a7-df9c091e268b_-browser-action",
-    "developer-button"
+    "developer-button",
+    "profiler-button"
   ],
   "dirtyAreaCache": [
     "unified-extensions-area",
     "nav-bar",
     "PersonalToolbar",
     "toolbar-menubar",
-    "TabsToolbar"
+    "TabsToolbar",
+    "vertical-tabs"
   ],
   "currentVersion": 20,
-  "newElementCount": 5
+  "newElementCount": 9
 }
diff --git a/modules/home/librewolf/userChrome.css b/modules/home/librewolf/userChrome.css
diff --git a/modules/home/librewolf/userChrome.mustache b/modules/home/librewolf/userChrome.mustache
@@ -0,0 +1,91 @@
+@import "firefox-gnome-theme/userChrome.css";
+
+/* See https://github.com/danth/stylix/blob/master/modules/gtk/gtk.mustache */
+:root {
+  /* Pallete */
+  --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);
+  }
+}