Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Frewacom/pywalfox

Dynamic theming of Firefox (and Thunderbird) using your Pywal colors
https://github.com/Frewacom/pywalfox

browser-theme css duckduckgo firefox firefox-addon linux pywal pywal-firefox thunderbird unixporn

Last synced: 4 days ago
JSON representation

Dynamic theming of Firefox (and Thunderbird) using your Pywal colors

Lists

README 

        


  Pywalfox icon

  


  Pywalfox



🎨 Dynamic theming of Firefox 🦊 (and Thunderbird 🐦) using your Pywal colors




     

     

     

     

     

     








- Tired of Firefox and Thunderbird not respecting your gorgeous Pywal colors like the rest of your system?

- Looking to rack up some karma :arrow_up: on [/r/unixporn](https://reddit.com/r/unixporn)?



Introducing **Pywalfox**, an add-on that themes [Firefox](https://addons.mozilla.org/firefox/addon/pywalfox/) and [Thunderbird](https://addons.thunderbird.net/thunderbird/addon/pywalfox/) with your [Pywal](https://github.com/dylanaraps/pywal) colors using the official [Theme API](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme) from Mozilla!



With Pywalfox you can:

- [x] Customize the colors of almost every UI element

- [x] Easily update the theme using the add-on GUI and/or the command line

- [x] Automatically theme DuckDuckGo :duck: searches in Firefox *(optional)*

- [x] Have bold text, styled dropdowns and much more *(optional)*

- [x] Automatically switch between a dark and a light theme based on the time of day



![](images/demo_v207_ffproton.gif)



## ✅ Requirements

- Firefox and/or Thunderbird

- Python (version `2.7.X` or `3.X`)

- [Pywal](https://github.com/dylanaraps/pywal)



> **Note** 


> Pywalfox is supported on GNU/Linux, MacOS and Windows.



## 👨‍💻 Installation



1. Install the [Pywalfox native messaging application](https://github.com/Frewacom/pywalfox-native) using one of two methods below (depending on your operating system).



 Arch Linux only (AUR) - click me!



Install from the Arch User Repository (AUR), e.g.



Paru: 


`paru -S python-pywalfox`



Yay: 


`yay -S python-pywalfox`






GNU/Linux, MacOS, Windows - click me!



Install from [PyPi](https://pypi.org/project/pywalfox/) with [`pip`](https://github.com/pypa/pip), i.e.



`pip install pywalfox`



2. Run `pywalfox install` in your terminal.

3. Get the Pywalfox add-on for

   - [Firefox](https://addons.mozilla.org/firefox/addon/pywalfox/)

   - [Thunderbird](https://addons.thunderbird.net/thunderbird/addon/pywalfox/)

4. Restart Firefox and/or Thunderbird.

5. Generate Pywal colors with your preferred method, use e.g. [this guide](https://github.com/dylanaraps/pywal/wiki/Getting-Started).

6. Click the Pywalfox icon in the Firefox/Thunderbird UI and click "Fetch Pywal colors". This should apply a theme that uses your Pywal colors to the Firefox/Thunderbird GUI!



> **Note** 


> If you have problems: please review the Troubleshooting section below before opening a Github issue.



## 🤔 Usage



### 🗔 Update the theme through your terminal

Run `pywalfox update` in your terminal to trigger an update of the browser theme.

This command allows you to integrate Pywalfox into e.g. system theming scripts.

It is functionally equivalent to clicking "Fetch Pywal colors" in the add-on settings GUI (accessible from your toolbar).



### 🎨 Customization

The add-on settings GUI comes with extensive customization options divided into the following sections:





💧 Palette (click for details)








The palette in the "Palette" section is used to temporarily customize one or more colors from the Pywal palette.

You can use one of the generated colors, or choose any color from a colorwheel.



> **Warning** 


> Changes to the palette will be reset when you click "Fetch Pywal colors" and when you run `pywalfox update`.





📝 Palette template (click for details)








If you want your palette customizations to be persistent (unlike the regular palette) you must save your current palette as a *palette template*:



1. Click "Fetch Pywal colors" in the add-on settings GUI or run `pywalfox update`

2. Customize the colors to your liking in the "Palette" section

   - ❗ *Colors from outside the Pywal palette (i.e. from the colorwheel) cannot be used in a template*.

3. Click "Load from current" in the "Palette template" section below.

   - ❗ *The colors can also be set directly in the "Palette template" section using Pywal color indices.*

4. Click "Save palette"



Your custom palette will now be applied whenever you update the browser theme.





🗂 ️Theme template (click for details)








The theme template assigns colors (from your palette template) to different browser elements.



To create a palette template, go through the items in the "Theme template" section and assign a color to each item.

The colors are identified by their names as seen in the "Palette template" section.



> **Note** 


> Every browser element currently supported by the [Theme API](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme) can be customized.



### 🌗 Theme modes

There are three different theme modes: "Dark" (🌙), "Light" (☀) and "Auto" (👁)️. Selecting "Auto" will automatically switch between the other two modes based on a time interval found in the "General" section of the add-on settings GUI.



> **Note** 


> The dark and light modes have *separate* theme and palette templates. You will always modifiy the template for the currently selected mode.



### 🖺 Further theming with the included userChrome.css and userContent.css in Firefox

Some browser elements (e.g. the context menus) are not available through the [Theme API](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme). Pywalfox includes two custom CSS stylesheets (for Firefox) which apply your theme to some of these browser elements.



Before you enable the custom CSS sheets in the add-on settings GUI you must navigate to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true.



## ❎ Uninstall

To uninstall Pywalfox from your system, run

```bash

pywalfox uninstall # Removes the manifest from native-messaging-hosts

```

and then

```bash

pip uninstall pywalfox # if you installed with pip

```

or

```bash

paru -R python-pywalfox # if you installed with paru (only Arch Linux)

```

depending on your chosen installation method.



## 🔧 Troubleshooting

This section lists some common problems and how to (hopefully) fix them.

This [troubleshooting guide from Mozilla](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Native_messaging#Troubleshooting) may be of use if you encounter an error that is not listed here.



- Librewolf users must use an experimental version of `pywalfox-native` for now, see [#68](https://github.com/Frewacom/pywalfox/issues/68#issuecomment-873381669).



You should also

- check the log in the Debugging section at the bottom of the Pywalfox settings page for any errors;

- verify that `~/.cache/wal/colors` exists and contains the colors generated by Pywal;

- verify that `path` in `~//pywalfox.json` is a valid path.



### 🚫 Common errors in the browser console

It is a good idea to check the Firefox browser console (`Tools > Web developer > Browser console`) for errors.

Common errors include:



ExtensionError: No such native application pywalfox







   The manifest is not installed properly. Try installing the manifest manually by following the instructions [here](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Native_manifests.).



   The manifest is located at `/pywalfox/assets/manifest.json`.



   After you have copied over the manifest to the correct path, make sure to also update the `path` property in the copied manifest. The `path` should point to `/pywalfox/bin/main.sh` (or `win.bat` if you are on Windows).



   If it still does not work, you can try to reinstall Firefox, see [#14](https://github.com/Frewacom/pywalfox/issues/14).



stderr output from native app pywalfox: /main.sh: line 3: pywalfox: command not found







  Pywalfox assumes that the `pywalfox` executable is in your `PATH`.



  If you can not run `pywalfox` from the command line (without specifying an absolute path), you must either add the path to the execuatable to your `PATH` variable, or move the executable to a path that already is in your `PATH`.



> **Note** 


> The errors in the `Browser Console` are not limited to just Pywalfox!



## 🚧 Development setup

Do you want to hack on Pywalfox? Start here:

```bash

git clone [email protected]/frewacom/pywalfox.git # or use your own fork

cd pywalfox

yarn install # or npm if you do not have yarn installed

yarn run debug

```



To build the extension into a zip:

```bash

yarn run build

```