da157.id / potatofox
this repo has no description
fork atom
CSS 86.2%
Nix 11.4%
JavaScript 2.4%
402 1 25

Clone this repository

https://tangled.org/da157.id/potatofox
git@tangled.org:da157.id/potatofox

For self-hosted knots, clone URLs may differ based on your setup.

Download tar.gz
README.md

potatofox#

please don't upload to github

a firefox and sidebery css theme.

Note

only linux is supported, macos and windows should work but may have issues.

features#

  • collapsing vertical tabs using sidebery
  • pop-up arc-like urlbar
  • option to hide the navbar
  • ability to remove borders around webpage for an ultra minimal experience
  • general visual enhancements
  • custom svg icons for some extensions
  • support for vertical tabs on the left or right
  • tons for blur and translucency
firefox with custom css applied

screenshots#

potatofox theme with sidebar collapsed potatofox theme with navbar hidden and sidebar collapsed potatofox theme with navbar and sidebar hidden while the urlbar is floating potatofox theme with navbar and sidebar hidden borderless potatofox theme with navbar and sidebar hidden

install instructions#

extension:

open the releases tab and download the correct release for your version of firefox (urlbar > about:support > application basics > version). then copy the chrome directory and user.js file into your firefox profiles directory (about:support > application basics > profile directory), then restart firefox.

advanced (cli) install (macos/linux)

using git#

git clone https://codeberg.org/da157/potatofox.git
cd potatofox
ln -sr user.js chrome ~/.mozilla/firefox/<profile> # linux
cp -r user.js chrome ~/library/application support/firefox/profiles/<profile> # macos

using nyoom#

nyoom profile <profile-dir>
nyoom add codeberg:da157/potatofox
nyoom switch potatofox
Note

make sure to install the required extensions.

post install#

  • import sidebery config (sidebery settings > help > import addon data)
  • import firefox color theme (optional)
  • about:addons (url) > userchrome toggle extended preferences > general settings > allow multiple styles to be active together, apply changes
Warning

some websites with a white background will have an incorrect background, this can be fixed by using dark reader or by removing browser.tabs.allow_transparent_browser from user.js

Tip

on linux there may be extra padding before/after the window controls, this can be fixed by changing line 36-38 in chrome/vars.css

Tip

if fingerprinting is a concern for you, i recommend enabling uc.tweak.no-custom-icons and removing svg.context-properties.content.enabled from user.js

userchrome toggle settings

about:config tweaks#

setting description
uc.tweak.borderless removes margins around the webpage
uc.tweak.borderless.no-round don't round corners of browser contents when in borderless mode
uc.tweak.no-custom-icons don't apply custom monochrome icons for some extensions
uc.tweak.no-window-controls removes window controls
uc.tweak.no-panel-hint hide the small bars showing location of hidden panels
uc.tweak.no-animations disable animations added by this theme
uc.tweak.urlbar.not-floating urlbar no longer floats in center of window when focused
uc.tweak.findbar.bottom moves findbar to bottom of webpage (causes it to not be visible when devtools are active on bottom)
sidebar.position_start controls if the sidebar is on the left or right
uc.tweak.sidebar.short makes sidebar shorter when hovering (140px)
uc.tweak.sidebar.wide makes sidebar wider when hovering (200px)
uc.tweak.sidebar.header show sidebar header
uc.tweak.sidebery.big-pinned pinned tabs look like buttons, like arc's pinned tabs (make sure to set sidebery settings > tabs > pinned tabs > show titles is off)
uc.tweak.sidebery.top-navbar move sidebery's navbar to the top of the sidebar
uc.tweak.no-blur remove blur and translucency from background of sidebery, navbar, urlbar, etc
uc.tweak.translucency experimental translucent window background

advanced configuration#

the variables used by the theme are in vars.css and userchrome.css (colors). if you would like to ensure there aren't git conflicts you can add a overrides.css file in the chrome directory and override the variables from vars.css in there (using !important; is necessary). keep in mind the theme defaults to using uidensity="compact", so you will want to change the variables inside there.

inspo#

kikaraage - arcwtf

shina-sg - shina-fox

artsyfriedchicken - edgyarc-fr

naezer - shyfox

mirrors#

currently potatofox is available on codeberg (main) and tangled and git.gay (mirrors)

license#

the source code of this project is subject to the terms of the mplv2.0 license. all documentation and images included as part of this readme are licensed under cc by-sa.