Add userContent and userChrome to firefox/zen/librewolf

base/common_hardware.nix

@@ -87,7 +87,8 @@ in {
       trusted-users = [username];
       auto-optimise-store = true;
 
-      experimental-features = "nix-command flakes";
+      experimental-features = "nix-command flakes pipe-operators";
+    
     };
   };
 

docs/src/README.md

@@ -268,6 +268,7 @@ For package lists, please check the individual modules, as the lists can be long
 # Credits
 
 - [Fufexan](https://github.com/fufexan) for the xdg-mime config:
-- [Catppuccin](https://github.com/catppuccin) for base16 colors
+- [Catppuccin](https://github.com/catppuccin) for base16 colors and zen-browser css
 - [Danth](https://github.com/danth) for providing a base for the nix docs
+- [chermnyx](https://github.com/chermnyx) for providing a base for zen configuration
 - [Nix-Artwork](https://github.com/NixOS/nixos-artwork/tree/master/logo) for the Nix/NixOS logo (Tim Cuthbertson (@timbertson))

home/themes/default.nix

@@ -3,5 +3,6 @@
     ./qt.nix
     ./kdeglobals.nix
     ./oxiced.nix
+    ./firefoxTheme.nix
   ];
 }

home/themes/firefoxTheme.nix

@@ -0,0 +1,325 @@
+# css from https://github.com/catppuccin/zen-browser/tree/main/themes
+{
+  config,
+  inputs,
+  pkgs,
+  lib,
+  ...
+}: let
+  # at time of using this here, stylix might not be evaluated yet
+  # hence ensure it is by using base16 mkSchemeAttrs
+  base16 = pkgs.callPackage inputs.base16.lib {};
+  scheme = base16.mkSchemeAttrs config.stylix.base16Scheme;
+  userChrome =
+    /*
+    css
+    */
+    ''
+      /* Catppuccin Mocha Blue userContent.css*/
+
+      @media (prefers-color-scheme: dark) {
+
+        /* Common variables affecting all pages */
+        @-moz-document url-prefix("about:") {
+          :root {
+            --in-content-page-color: #${scheme.base05} !important;
+            --color-accent-primary: #${scheme.base0D} !important;
+            --color-accent-primary-hover: rgb(163, 197, 251) !important; // TODO
+            --color-accent-primary-active: rgb(138, 153, 250) !important; // TODO
+            background-color: #${scheme.base00} !important;
+            --in-content-page-background: #${scheme.base00} !important;
+          }
+
+        }
+
+        /* Variables and styles specific to about:newtab and about:home */
+        @-moz-document url("about:newtab"), url("about:home") {
+
+          :root {
+            --newtab-background-color: #${scheme.base00} !important;
+            --newtab-background-color-secondary: #${scheme.base02} !important;
+            --newtab-element-hover-color: #${scheme.base02} !important;
+            --newtab-text-primary-color: #${scheme.base05} !important;
+            --newtab-wordmark-color: #${scheme.base05} !important;
+            --newtab-primary-action-background: #${scheme.base0D} !important;
+          }
+
+          .icon {
+            color: #${scheme.base0D} !important;
+          }
+
+          .search-wrapper .logo-and-wordmark .logo {
+            //background: url("zen-logo-mocha.svg"), url("https://raw.githubusercontent.com/IAmJafeth/zen-browser/main/themes/Mocha/Blue/zen-logo-mocha.svg") no-repeat center !important; // TODO
+            display: inline-block !important;
+            height: 82px !important;
+            width: 82px !important;
+            background-size: 82px !important;
+          }
+
+          @media (max-width: 609px) {
+            .search-wrapper .logo-and-wordmark .logo {
+              background-size: 64px !important;
+              height: 64px !important;
+              width: 64px !important;
+            }
+          }
+
+          .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title {
+            color: #${scheme.base0D} !important;
+          }
+
+          .top-site-outer .search-topsite {
+            background-color: #${scheme.base0D} !important;
+          }
+
+          .compact-cards .card-outer .card-context .card-context-icon.icon-download {
+            fill: #${scheme.base0B} !important;
+          }
+        }
+
+        /* Variables and styles specific to about:preferences */
+        @-moz-document url-prefix("about:preferences") {
+          :root {
+            --zen-colors-tertiary: #${scheme.base01} !important;
+            --in-content-text-color: #${scheme.base05} !important;
+            --link-color: #${scheme.base0D} !important;
+            --link-color-hover: rgb(163, 197, 251) !important; // TODO
+            --zen-colors-primary: #${scheme.base02} !important;
+            --in-content-box-background: #${scheme.base02} !important;
+            --zen-primary-color: #${scheme.base0D} !important;
+          }
+
+          groupbox , moz-card{
+            background: #${scheme.base00} !important;
+          }
+
+          button,
+          groupbox menulist {
+            background: #${scheme.base02} !important;
+            color: #${scheme.base05} !important;
+          }
+
+          .main-content {
+            background-color: #${scheme.base01} !important;
+          }
+
+          .identity-color-blue {
+            --identity-tab-color: #8aadf4 !important; // TODO
+            --identity-icon-color: #8aadf4 !important; // TODO
+          }
+
+          .identity-color-turquoise {
+            --identity-tab-color: #8bd5ca !important; // TODO
+            --identity-icon-color: #8bd5ca !important; // TODO
+          }
+
+          .identity-color-green {
+            --identity-tab-color: #${scheme.base0B} !important;
+            --identity-icon-color: #${scheme.base0B} !important;
+          }
+
+          .identity-color-yellow {
+            --identity-tab-color: #eed49f !important; // TODO
+            --identity-icon-color: #eed49f !important; // TODO
+          }
+
+          .identity-color-orange {
+            --identity-tab-color: #f5a97f !important; // TODO
+            --identity-icon-color: #f5a97f !important; // TODO
+          }
+
+          .identity-color-red {
+            --identity-tab-color: #ed8796 !important; // TODO
+            --identity-icon-color: #ed8796 !important; // TODO
+          }
+
+          .identity-color-pink {
+            --identity-tab-color: #f5bde6 !important; // TODO
+            --identity-icon-color: #f5bde6 !important; // TODO
+          }
+
+          .identity-color-purple {
+            --identity-tab-color: #c6a0f6 !important; // TODO
+            --identity-icon-color: #c6a0f6 !important; // TODO
+          }
+        }
+
+        /* Variables and styles specific to about:addons */
+        @-moz-document url-prefix("about:addons") {
+          :root {
+            --zen-dark-color-mix-base: #${scheme.base01} !important;
+            --background-color-box: #${scheme.base00} !important;
+          }
+        }
+
+        /* Variables and styles specific to about:protections */
+        @-moz-document url-prefix("about:protections") {
+          :root {
+            --zen-primary-color: #${scheme.base00} !important;
+            --social-color: #${scheme.base0E} !important;
+            --coockie-color: #${scheme.base08} !important;
+            --fingerprinter-color: #${scheme.base0A} !important;
+            --cryptominer-color: #${scheme.base07} !important;
+            --tracker-color: #${scheme.base0B} !important;
+            --in-content-primary-button-background-hover: rgb(81, 83, 05) !important;
+            --in-content-primary-button-text-color-hover: #${scheme.base05} !important;
+            --in-content-primary-button-background: #${scheme.base03} !important;
+            --in-content-primary-button-text-color: #${scheme.base05} !important;
+          }
+
+
+          .card {
+            background-color: #${scheme.base02} !important;
+          }
+        }
+      }
+    '';
+  userContent =
+    /*
+    css
+    */
+    ''
+      /* Catppuccin Mocha Blue userChrome.css*/
+      @media (prefers-color-scheme: dark) {
+
+        :root {
+          --zen-colors-primary: #${scheme.base02} !important;
+          --zen-primary-color: #${scheme.base0D} !important;
+          --zen-colors-secondary: #${scheme.base02} !important;
+          --zen-colors-tertiary: #${scheme.base01} !important;
+          --zen-colors-border: #${scheme.base0D} !important;
+          --toolbarbutton-icon-fill: #${scheme.base0D} !important;
+          --lwt-text-color: #${scheme.base05} !important;
+          --toolbar-field-color: #${scheme.base05} !important;
+          --tab-selected-textcolor: rgb(171, 197, 247) !important; // TODO
+          --toolbar-field-focus-color: #${scheme.base05} !important;
+          --toolbar-color: #${scheme.base05} !important;
+          --newtab-text-primary-color: #${scheme.base05} !important;
+          --arrowpanel-color: #${scheme.base05} !important;
+          --arrowpanel-background: #${scheme.base00} !important;
+          --sidebar-text-color: #${scheme.base05} !important;
+          --lwt-sidebar-text-color: #${scheme.base05} !important;
+          --lwt-sidebar-background-color: #${scheme.base01} !important; //TODO 11111b !important;
+          --toolbar-bgcolor: #${scheme.base02} !important;
+          --newtab-background-color: #${scheme.base00} !important;
+          --zen-themed-toolbar-bg: #${scheme.base01} !important;
+          --zen-main-browser-background: #${scheme.base01} !important;
+        }
+
+        #permissions-granted-icon{
+          color: #${scheme.base01} !important;
+        }
+
+        .sidebar-placesTree {
+          background-color: #${scheme.base00} !important;
+        }
+
+        #zen-workspaces-button {
+          background-color: #${scheme.base00} !important;
+        }
+
+        #TabsToolbar {
+          background-color: #${scheme.base01} !important;
+        }
+
+        #urlbar-background {
+          background-color: #${scheme.base00} !important;
+        }
+
+        .content-shortcuts {
+          background-color: #${scheme.base00} !important;
+          border-color: #${scheme.base0D} !important;
+        }
+
+        .urlbarView-url {
+          color: #${scheme.base0D} !important;
+        }
+
+        #zenEditBookmarkPanelFaviconContainer {
+          background: #${scheme.base01} !important;
+        }
+
+        toolbar .toolbarbutton-1 {
+          &:not([disabled]) {
+            &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+              fill: #${scheme.base01};
+            }
+          }
+        }
+
+        .identity-color-blue {
+          --identity-tab-color: #${scheme.base0D} !important;
+          --identity-icon-color: #${scheme.base0D} !important;
+        }
+
+        .identity-color-turquoise {
+          --identity-tab-color: #${scheme.base0C} !important;
+          --identity-icon-color: #${scheme.base0C} !important;
+        }
+
+        .identity-color-green {
+          --identity-tab-color: #${scheme.base0B} !important;
+          --identity-icon-color: #${scheme.base0B} !important;
+        }
+
+        .identity-color-yellow {
+          --identity-tab-color: #${scheme.base0A} !important;
+          --identity-icon-color: #${scheme.base0A} !important;
+        }
+
+        .identity-color-orange {
+          --identity-tab-color: #${scheme.base09} !important;
+          --identity-icon-color: #${scheme.base09} !important;
+        }
+
+        .identity-color-red {
+          --identity-tab-color: #${scheme.base08} !important;
+          --identity-icon-color: #${scheme.base08} !important;
+        }
+
+        .identity-color-pink {
+          --identity-tab-color: #${scheme.base0F} !important;
+          --identity-icon-color: #${scheme.base0F} !important; // TODO f5c2e7
+        }
+
+        .identity-color-purple {
+          --identity-tab-color: #${scheme.base0E} !important;
+          --identity-icon-color: #${scheme.base0E} !important;
+        }
+      }
+    '';
+  browsername = config.mods.homePackages.browser;
+  profiles = 
+  if config.mods.homePackages.browser == "firefox" then 
+    config.mods.browser.firefox.profiles
+    else if config.mods.homePackages.browser == "zen" then 
+      config.mods.browser.zen.profiles
+    else if config.mods.homePackages.browser == "librewolf" then 
+      [{name = "default"; value = {};}]
+    else 
+    [];
+  profileNamesFn =
+    builtins.catAttrs "name";
+  chromesFn = builtins.map (
+    name:
+    if (builtins.isString browsername)
+    then {
+      ".${browsername}/${name}/chrome/userContent.css" = {
+        text = userChrome;
+      };
+
+      ".${browsername}/${name}/chrome/userChrome.css" = {
+        text = userContent;
+      };
+    }
+    else {}
+  );
+  moduleFn = lib.lists.foldr (attr1: attr2: attr1 // attr2) {};
+  mkFirefoxTheme = (profiles:
+    profiles
+    |> profileNamesFn
+    |> chromesFn
+    |> moduleFn
+    );
+in
+  {home.file = mkFirefoxTheme profiles;}

iso/configuration.nix

@@ -31,6 +31,7 @@ in {
   nix.settings.experimental-features = [
     "nix-command"
     "flakes"
+    "pipe-operators"
   ];
 
   # gnome is a good default that works with every gpu and doesn't require knowledge about custom keybinds.

modules/programs/browser/foxwrappers.nix

@@ -1,3 +1,4 @@
+# https://github.com/0xc000022070/zen-browser-flake/issues/9#issuecomment-2711057434
 {inputs, ...}: let
   mkFirefoxModule = import "${inputs.home-manager.outPath}/modules/programs/firefox/mkFirefoxModule.nix";
 in {