{"id":17457442,"url":"https://github.com/adriankarlen/textfox","last_synced_at":"2025-12-29T22:16:07.510Z","repository":{"id":258471816,"uuid":"871201996","full_name":"adriankarlen/textfox","owner":"adriankarlen","description":"firefox theme for the tui enthusiast","archived":false,"fork":false,"pushed_at":"2025-02-10T23:09:33.000Z","size":2581,"stargazers_count":1038,"open_issues_count":5,"forks_count":28,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-02-11T00:22:43.687Z","etag":null,"topics":["css","firefox","rice"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adriankarlen.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-11T13:23:58.000Z","updated_at":"2025-02-11T00:20:46.000Z","dependencies_parsed_at":"2024-11-11T23:21:56.941Z","dependency_job_id":"0851fa2e-a3c4-4ec4-9667-db3feabb11cd","html_url":"https://github.com/adriankarlen/textfox","commit_stats":null,"previous_names":["adriankarlen/textfox"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriankarlen%2Ftextfox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriankarlen%2Ftextfox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriankarlen%2Ftextfox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriankarlen%2Ftextfox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adriankarlen","download_url":"https://codeload.github.com/adriankarlen/textfox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241500958,"owners_count":19972782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","firefox","rice"],"created_at":"2024-10-18T03:01:07.707Z","updated_at":"2025-12-29T22:16:07.505Z","avatar_url":"https://github.com/adriankarlen.png","language":"CSS","funding_links":[],"categories":["Tool","Customizations"],"sub_categories":["Browser Extension","Other"],"readme":"\n```\n   __            __  ____          \n  / /____  _  __/ /_/ __/___  _  __\n / __/ _ \\| |/_/ __/ /_/ __ \\| |/_/\n/ /_/  __/\u003e  \u003c/ /_/ __/ /_/ /\u003e  \u003c  \n\\__/\\___/_/|_|\\__/_/  \\____/_/|_|  \n```\n\n_a port of spotify tui to firefox_\n\n## Preview\n\n![image](https://github.com/adriankarlen/textfox/blob/main/misc/vertical-tabs.png)\n\n![image](https://github.com/adriankarlen/textfox/blob/main/misc/horizontal-tabs.png)\n\n\u003e [!NOTE]\n\u003e The color scheme used in the pictures is [Rosé Pine Moon](https://github.com/rose-pine/firefox).\n\u003e `textfox` tries to not hard code any colors, [Firefox Color extension](https://addons.mozilla.org/en-US/firefox/addon/firefox-color/) is the\n\u003e recommended approach to coloring Firefox with `textfox`.\n\n## Prequisites\n\n- Sidebery (optional)\n\n## Installation\n\n### Installation script\n\n1. Download/clone the repo.\n2. Inside the download run `sh tf-install.sh` and follow the script\n   instructions.\n\n\u003e [!IMPORTANT]\n\u003e This script automates file writes, use with caution.\n\n\u003e [!NOTE]\n\u003e The installation script copies to contents of the repos `chrome` directory to\n\u003e the path specified, this way your `config.css` or any other `css`-files not\n\u003e part of the repo will be kept.\n\n### Manual\n\n1. Download the files\n2. Go to `about:profiles`\n3. Find your profile -- ( _„This is the profile in use and it cannot be deleted.”_ )\n4. Open the profile's root directory\n5. Move the files chrome directory and user.js there\n6. Restart Firefox\n\n\u003e [!IMPORTANT]\n\u003e textfox now supports horizontal tabs, to enable them change the\n\u003e `--tf-display-horizontal-tabs` variable in your `config.css` to `block`. See\n\u003e [CSS configurations](#css-configurations) for more info.\n\n\u003e [!NOTE]\n\u003e If you don't want to use the provided user.js, please read through it and\n\u003e apply the settings in `about:config` manually. These are needed for the css to\n\u003e work.\n\n### Nix\n\nThis repo includes a Nix flake that exposes a home-manager module that installs textfox and sidebery.\n\nTo enable the module, add the repo as a flake input, import the module, and enable textfox.\n\n\u003cdetails\u003e\u003csummary\u003eInstall using your home-manager module defined within your `nixosConfigurations`:\u003c/summary\u003e\n\n```nix\n\n  # flake.nix\n\n  {\n\n      inputs = {\n         # ---Snip---\n         home-manager = {\n           url = \"github:nix-community/home-manager\";\n           inputs.nixpkgs.follows = \"nixpkgs\";\n         };\n\n         textfox.url = \"github:adriankarlen/textfox\";\n         # ---Snip---\n      }\n\n      outputs = {nixpkgs, home-manager, ...} @ inputs: {\n          nixosConfigurations.HOSTNAME = nixpkgs.lib.nixosSystem {\n            specialArgs = { inherit inputs; };\n            modules = [\n            home-manager.nixosModules.home-manager\n              {\n               # Must pass in inputs so we can access the module\n                home-manager.extraSpecialArgs = {\n                  inherit inputs;\n                };\n              }\n           ];\n        };\n     }\n  }\n```\n```nix\n\n# home.nix\n\nimports = [ inputs.textfox.homeManagerModules.default ];\n\ntextfox = {\n    enable = true;\n    profile = \"firefox profile name here\";\n    config = {\n        # Optional config\n    };\n};\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstall using `home-manager.lib.homeManagerConfiguration`:\u003c/summary\u003e\n\n```nix\n\n  # flake.nix\n\n  {\n    inputs = {\n       # ---Snip---\n       home-manager = {\n         url = \"github:nix-community/home-manager\";\n         inputs.nixpkgs.follows = \"nixpkgs\";\n       };\n\n       textfox.url = \"github:adriankarlen/textfox\";\n       # ---Snip---\n    }\n\n    outputs = {nixpkgs, home-manager, textfox ...}: {\n        homeConfigurations.\"user@hostname\" = home-manager.lib.homeManagerConfiguration {\n            pkgs = nixpkgs.legacyPackages.x86_64-linux;\n\n            modules = [\n                textfox.homeManagerModules.default\n                # ...\n            ];\n        };\n    };\n  }\n```\n  ```nix\n\n  # home.nix\n\n  textfox = {\n      enable = true;\n      profile = \"firefox profile name here\";\n      config = {\n          # Optional config\n      };\n  };\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eConfiguration options:\u003c/summary\u003e\n\nAll configuration options are optional and can be set as this example shows (real default values [can be found below](#defaults)):\n\n```nix\n\n  textfox = {\n      enable = true;\n      profile = \"firefox profile name here\";\n      config = {\n        background = {\n          color = \"#123456\";\n        };\n        border = {\n          color = \"#654321\";\n          width = \"4px\";\n          transition = \"1.0s ease\";\n          radius = \"3px\";\n        };\n        displayWindowControls = true;\n        displayNavButtons = true;\n        displayUrlbarIcons = true;\n        displaySidebarTools = false;\n        displayTitles = false;\n        newtabLogo = \"   __            __  ____          \\A   / /____  _  __/ /_/ __/___  _  __\\A  / __/ _ \\\\| |/_/ __/ /_/ __ \\\\| |/_/\\A / /_/  __/\u003e  \u003c/ /_/ __/ /_/ /\u003e  \u003c  \\A \\\\__/\\\\___/_/|_|\\\\__/_/  \\\\____/_/|_|  \";\n        font = {\n          family = \"Fira Code\";\n          size = \"15px\";\n          accent = \"#654321\";\n        };\n        tabs = {\n          horizontal.enable = true;\n          vertical.enable = true;\n          vertical.margin = \"1.0rem\";\n        };\n        navbar = {\n          margin = \"8px 8px 2px\";\n          padding = \"4px\";\n        };\n        bookmarks = {\n          alignment = \"left\";\n        };\n        icons = {\n          toolbar.extensions.enable = true;\n          context.extensions.enable = true;\n          context.firefox.enable = true;\n        };\n        textTransform = \"uppercase\";\n        extraConfig = \"/* custom css here */\";\n      };\n  };\n```\n\u003c/details\u003e\n\n### Sidebery\n\nSidebery css is being set from within `content/sidebery` (applied as content to\nthe sidebery url). If you have any pre-existing css set from within the sidebery\nsettings, they might clash or make it so that the sidebery style does not match\nthe example.\n\n#### Settings\n\nThe theme was made using a reset sidebery config, so there should not be\nanything crazy needed here, notable settings being set is using the **plain**\ntheme and **firefox** color scheme. If you want to you can import the sidebery\nsettings provided.\n\n\u003e [!IMPORTANT]\n\u003e **Importing sidebery settings overwrites your current settings, do this at\n\u003e your own risk.**\n\n## Customization\n\nThe icon configuration utilizes code that is originally from ShyFox, therefore\nthe same settings are used (these can be set in about:config).\n| Setting | true | false (default) |\n| -------------------------------------- | --------------------------------------------------------------------- | ------------------------- |\n| `shyfox.enable.ext.mono.toolbar.icons` | Supported extensions get monochrome icons as toolbar buttons | Standard icons used |\n| `shyfox.enable.ext.mono.context.icons` | Supported extensions get monochrome icons as context menu items | Standard icons used |\n| `shyfox.enable.context.menu.icons` | Many context menu items get icons | No icons in context menus |\n\n### CSS configurations\nThe theme ships with a `defaults.css`, this file can be overridden by creating a\n`config.css` inside the chrome directory.\n\n#### Defaults\n```css\n:root {\n  --tf-font-family: \"SF Mono\", Consolas, monospace; /* Font family of config */\n  --tf-font-size: 14px; /* Font size of config */\n  --tf-accent: var(--toolbarbutton-icon-fill); /* Accent color used, eg: color when hovering a container  */\n  --tf-bg: var(--lwt-accent-color, -moz-dialog); /* Background color of all elements, tab colors derive from this */\n  --tf-border: var(--arrowpanel-border-color, --toolbar-field-background-color); /* Border color when not hovered */\n  --tf-border-transition: 0.2s ease; /* Smooth color transitions for borders */\n  --tf-border-width: 2px; /* Width of borders */\n  --tf-rounding: 0px; /* Border radius used through out the config */\n  --tf-margin: 0.8rem; /* Margin used between elements in sidebery */\n  --tf-text-transform: none; /* Text transform to use */\n  --tf-display-horizontal-tabs: none; /* If horizontal tabs should be shown, none = hidden, block = shown */\n  --tf-display-window-controls: none; /* If the window controls should be shown (won't work with sidebery and hidden horizontal tabs), none = hidden, flex = shown */ \n  --tf-display-nav-buttons: none; /* If the navigation buttons (back, forward) should be shown, none = hidden, flex = shown */\n  --tf-display-urlbar-icons: none; /* If the icons inside the url bar should be shown, none = hidden, flex = shown */\n  --tf-display-sidebar-tools: flex; /* If the \"Customize sidebar\" button on the sidebar should be shown, none = hidden, flex = shown */ \n  --tf-display-titles: flex; /* If titles (tabs, navbar, main etc.) should be shown, none = hidden, flex = shown */\n  --tf-newtab-logo: \"   __            __  ____          \\A   / /____  _  __/ /_/ __/___  _  __\\A  / __/ _ \\\\| |/_/ __/ /_/ __ \\\\| |/_/\\A / /_/  __/\u003e  \u003c/ /_/ __/ /_/ /\u003e  \u003c  \\A \\\\__/\\\\___/_/|_|\\\\__/_/  \\\\____/_/|_|  \";\n  --tf-navbar-margin: 8px 8px 2px; /* navbar margin */\n  --tf-navbar-padding: 4px; /* navbar padding */\n  --tf-bookmarks-alignment: center; /* alignment of bookmarks in the bookmarks toolbar (if you have many bookmarks, left is recommended) */\n}\n\n```\n\n### Changing the new tab logo\n\nThe new tab logo can be any string you want, to create a string with line breaks\nadd a `\\A` at every line break, also make sure to break any backslashes, eg. if\nyou want a `\\`, you need to write `\\\\`. I used [this tool](https://www.patorjk.com/software/taag/#p=display\u0026f=Slant\u0026t=textfox)\nto create the current logo.\n\nWanna hide the logo? Simply pass an empty string as the logo.\n\n### Recipes\n\nHere are some example changes that you can do to achieve different looks.\n\n#### Swap positions of tabs and window controls when using horizontal tabs\n```css\n/* path: chrome/config.css */\n:root {\n  --tf-display-horizontal-tabs: inline-flex;\n  --tf-display-window-controls: flex;\n}\n```\n\n#### Rounded borders\n```css\n/* path: chrome/config.css */\n:root {\n  --tf-rounding: 4px;\n}\n```\n\n#### Align bookmarks to the left\n```css\n/* path: chrome/config.css */\n:root {\n  --tf-bookmarks-alignment: left;\n}\n```\n\n#### Do you have a banger recipe?\nFeel free to open a PR and add it here!\n\n## Acknowledgements\n\n[Naezr](https://github.com/Naezr) - Icon logic and some sideberry logic.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadriankarlen%2Ftextfox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadriankarlen%2Ftextfox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadriankarlen%2Ftextfox/lists"}