home: firefox: theme treestyletabs

3 files changed, 50 insertions, 16 deletions

diff --git a/modules/home-manager/personal/programs/firefox/default.nix b/modules/home-manager/personal/programs/firefox/default.nix
index 6b7cfee..240b70c 100644
--- a/modules/home-manager/personal/programs/firefox/default.nix
+++ b/modules/home-manager/personal/programs/firefox/default.nix
@@ -8,20 +8,16 @@ let
     inherit (pkgs.lib.personal) toUserJS;
   };
   engines = import ./engines.nix { inherit lib pkgs; };
-  userchrome-treestyletabs = ''
-    /* Hide main tabs toolbar */
-    #TabsToolbar {
-      visibility: collapse;
-    }
-    /* Sidebar min and max width removal */
-    #sidebar {
-      max-width: none !important;
-      min-width: 0px !important;
-    }
-    /* Hide sidebar header, when using Tree Style Tab. */
-    #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
-      visibility: collapse;
-    }
+  userchrome = let
+    userchromeTST = ./userchrome/treestyletabs.css;
+    userchromeTSTColors = config.lib.stylix.colors {
+      template = builtins.readFile ./userchrome/treestyletabs-colors.css;
+      extension = ".css";
+    };
+  in ''
+    @import "${userchromeTST}";
+  '' + lib.optionalString (config.lib ? stylix) ''
+    @import "${userchromeTSTColors}";
   '';
   webappsWithIds = (builtins.foldl' ({ counter, value }:
     { name, ... }@next: {
@@ -109,7 +105,7 @@ in {
               order = [ "Searx" "Wikipedia" ];
             };
             extraConfig = userjs.default;
-            userChrome = userchrome-treestyletabs;
+            userChrome = userchrome;
           };
 
           videoconferencing = {
@@ -132,7 +128,7 @@ in {
               default = "Searx";
             };
             extraConfig = userjs.videoconferencing;
-            userChrome = userchrome-treestyletabs;
+            userChrome = userchrome;
           };
         } webappsWithIds;
     }
diff --git a/modules/home-manager/personal/programs/firefox/userchrome/treestyletabs-colors.css b/modules/home-manager/personal/programs/firefox/userchrome/treestyletabs-colors.css
new file mode 100644
index 0000000..9a41f9d
--- /dev/null
+++ b/modules/home-manager/personal/programs/firefox/userchrome/treestyletabs-colors.css
@@ -0,0 +1,21 @@
+/* Not working. Paste this inside TST's extra CSS rules. */
+@-moz-document regexp("moz-extension://.+/sidebar/sidebar.html.*") {
+    /* Apply system-wide theme */
+    :root {
+        --toolbar-non-lwt-bgcolor: rgba( {{base00-rgb-r}}, {{base00-rgb-g}}, {{base00-rgb-b}}, 0% );
+        --toolbar-non-lwt-textcolor: rgba( {{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, 100% );
+    }
+    :root[color-scheme="system-color"][data-user-agent*="Linux"]
+         tab-item:not(.active):not(.bundled-active):not(.highlighted),
+    :root[color-scheme="system-color"][data-user-agent*="Linux"]
+         .after-tabs button,
+    :root[color-scheme="system-color"][data-user-agent*="Linux"]
+         .after-tabs [role="button"],
+    :root[color-scheme="system-color"][data-user-agent*="Linux"]
+         #subpanel-selector-anchor,
+    :root[color-scheme="system-color"][data-user-agent*="Linux"]
+         #background {
+        --toolbar-non-lwt-bgcolor: rgba( {{base00-rgb-r}}, {{base00-rgb-g}}, {{base00-rgb-b}}, 100% );
+        --toolbar-non-lwt-textcolor: rgba( {{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, 100% );
+    }
+}
diff --git a/modules/home-manager/personal/programs/firefox/userchrome/treestyletabs.css b/modules/home-manager/personal/programs/firefox/userchrome/treestyletabs.css
new file mode 100644
index 0000000..bee1acf
--- /dev/null
+++ b/modules/home-manager/personal/programs/firefox/userchrome/treestyletabs.css
@@ -0,0 +1,17 @@
+@-moz-document url(chrome://browser/content/browser.xul), url(chrome://browser/content/browser.xhtml) {
+    /* Hide main tabs toolbar */
+    #TabsToolbar {
+        visibility: collapse;
+    }
+
+    /* Sidebar min and max width removal */
+    #sidebar {
+        max-width: none !important;
+        min-width: 0px !important;
+    }
+
+    /* Hide sidebar header, when using Tree Style Tab. */
+    #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
+        visibility: collapse;
+    }
+}