pywalfox

repository·master·Indexed 21 days ago

https://github.com/frewacom/pywalfox

A tool and browser extension for dynamic theming of Firefox and Thunderbird using colors generated by Pywal. It utilizes the Mozilla Theme API and custom CSS to synchronize browser UI elements with Pywal colors, supporting Dark, Light, and Auto modes, as well as integration with DuckDuckGo and Dark Reader.

Tokens
8.2K
Snippets
18
Records
33
Agent score
75%

What's inside pywalfox

  1. Customize Pywalfox colors and templates

    master

    Pywalfox allows for three levels of color customization via its settings GUI:

    1. Palette (Temporary)

    The Palette section allows you to temporarily override colors from the Pywal palette using existing colors or a colorwheel.

    Warning: Changes made here are reset when you click "Fetch Pywal colors" or run pywalfox update.

    2. Palette Template (Persistent)

    To make color changes permanent, you must save them as a Palette template:

    1. Click "Fetch Pywal colors" or run pywalfox update.
    2. Customize colors in the Palette section (Note: colors from the colorwheel cannot be used in templates).
    3. Click "Load from current" in the Palette template section.
    4. Click "Save palette".

    3. Theme Template

    The Theme template assigns colors from your Palette template to specific browser elements. You can assign colors by their names as defined in your palette template.

  2. Configure Pywalfox theme modes

    master

    Pywalfox supports three theme modes:

    • Dark (🌙)
    • Light (☀)
    • Auto (👁): Automatically switches between Dark and Light modes based on a time interval configured in the "General" section of the add-on settings.

    Important: Dark and Light modes maintain separate theme and palette templates. You will always modify the template for the mode currently selected.

  3. Uninstall Pywalfox

    master

    To completely remove Pywalfox, follow these steps based on your installation method:

    1. Remove the native messaging manifest:
      pywalfox uninstall
    2. Remove the Python package:
      • If using pipx: pipx uninstall pywalfox
      • If using paru (Arch Linux): paru -R python-pywalfox
  4. Enable advanced CSS theming in Firefox

    master

    To theme elements not covered by the standard Theme API (such as context menus), Pywalfox provides userChrome.css and userContent.css files.

    To use them, you must enable legacy stylesheet support in Firefox:

    1. Navigate to about:config in your Firefox address bar.
    2. Search for toolkit.legacyUserProfileCustomizations.stylesheets.
    3. Set its value to true.
  5. Install Pywalfox for Flatpak browsers

    master

    Because Flatpaks are sandboxed, you must use a wrapper script and grant specific permissions.

    1. Create a wrapper script

    Create ~/.var/app/<YOUR_APP_ID>/pywalfox-wrapper.sh:

    #!/bin/sh
    flatpak-spawn --host ~/.local/bin/pywalfox "$@"

    Make it executable:

    chmod +x ~/.var/app/<YOUR_APP_ID>/pywalfox-wrapper.sh

    2. Install with custom paths

    pywalfox install \
    --manifest-path ~/.var/app/<YOUR_APP_ID>/.<BROWSER_DIR>/native-messaging-hosts \
    --profile-path  ~/.var/app/<YOUR_APP_ID>/.<BROWSER_DIR>/

    3. Update the manifest

    Edit the pywalfox.json file in your browser's native-messaging-hosts folder. Update the path to point to your wrapper script using an absolute path:

    {
      "name": "pywalfox",
      "description": "Automatically theme your browser using the colors generated by Pywal",
      "path": "/home/<USER>/.var/app/<YOUR_APP_ID>/pywalfox-wrapper.sh",
      "type": "stdio",
      "allowed_extensions": [ "pywalfox@frewacom.org" ]
    }

    4. Grant permissions

    Run the following to allow the Flatpak to talk to the host:

    flatpak override --user \
      --talk-name=org.freedesktop.Flatpak \
      --talk-name=org.freedesktop.portal.Flatpak \
      --system-talk-name=org.freedesktop.Flatpak \
      <YOUR_APP_ID>
  6. Install Pywalfox for Firefox or Thunderbird

    master

    To use Pywalfox, you must install both the browser add-on and the native messaging application.

    1. Install the Add-on: Get the Pywalfox add-on from the Firefox Add-ons store or Thunderbird Add-ons store.
    2. Install the Native Application: Install the pywalfox package via pipx (recommended) or pip:
      pipx install pywalfox
    3. Configure the Browser: Run the installation command to link the native app to your browser:
      pywalfox install
    4. Restart: Restart Firefox or Thunderbird.
    5. Apply Colors: Generate a theme with Pywal (e.g., wal --theme gruvbox), then click the Pywalfox icon in your browser and select "Fetch Pywal colors".

    Note: Firefox forks (like LibreWolf) and Flatpak installations require additional configuration steps.

    pipx install pywalfox
    pywalfox install
  7. Install Pywalfox for Firefox forks (LibreWolf, etc.)

    master

    Firefox forks often require explicit paths to the manifest and profile directories during installation. Use the --manifest-path and --profile-path flags:

    pywalfox install --manifest-path ~/.mozilla/native-messaging-hosts \
                     --profile-path  ~/.config/librewolf/librewolf

    Note: Paths vary depending on the specific fork you are using.

  8. Understand Pywal color mapping and palette templates

    master

    Pywal colors are mapped to functional roles using palette templates. These templates define which color index (from the Pywal palette) should be used for specific UI elements like background, accentPrimary, and text.

    There are two default mapping strategies:

    Dark Palette Template:

    • background: index 0
    • backgroundLight: index 16
    • backgroundExtra: index 18
    • accentPrimary: index 10
    • accentSecondary: index 13
    • text: index 15
    • textFocus: index 17

    Light Palette Template:

    • background: index 19
    • backgroundLight: index 17
    • backgroundExtra: index 7
    • accentPrimary: index 3
    • accentSecondary: index 5
    • text: index 16
    • textFocus: index 0
  9. Understand Pywal color and palette structures

    master

    Pywalfox uses specific interfaces to represent color data derived from Pywal.

    • IPywalColors: An array of color strings (hex codes).
    • IPywalData: Contains the colors (IPywalColors) and the wallpaper path.
    • IPalette: A mapping of PaletteColors keys to specific color strings.

    PaletteColors includes keys such as:

    • background
    • backgroundLight
    • backgroundExtra
    • accentPrimary
    • accentSecondary
    • text
    • textFocus
  10. Troubleshoot Pywalfox errors

    master

    If Pywalfox is not working, check the following:

    • Check Logs: View the Debugging section at the bottom of the Pywalfox settings page in your browser.
    • Verify Pywal: Ensure ~/.cache/wal/colors exists and contains valid colors.
    • Verify Manifest Path: Ensure the path in ~/<native-messaging-hosts-folder>/pywalfox.json is a valid path.

    Common Error: ExtensionError: No such native application pywalfox

    This means the manifest is not installed correctly.

    1. Locate the manifest at <path-to-python-site-packages>/pywalfox/assets/manifest.json.
    2. Copy it to the correct native-messaging-hosts directory.
    3. Update the path property in the copied manifest to point to <path-to-python-site-packages>/pywalfox/bin/main.sh (or win.bat on Windows).

    Common Error: pywalfox: command not found

    Pywalfox requires the pywalfox executable to be in your system PATH. Ensure you can run pywalfox from your terminal without an absolute path.

  11. Update the browser theme via terminal

    master

    You can trigger a theme update without using the browser GUI by running the following command in your terminal. This is functionally equivalent to clicking "Fetch Pywal colors" in the add-on settings and is useful for integration into system theming scripts:

    pywalfox update
  12. Generate the PywalFox extension CSS theme

    master

    The generateExtensionTheme function creates a CSS string used by the PywalFox browser extension to apply colors. It maps palette colors to specific CSS variables defined in PALETTE_TEMPLATE_DATA.

    The output is a CSS rule targeting the EXTENSION_THEME_SELCTOR (e.g., :root or a specific class) containing the mapped variables.

    Example Output Format: :root{--variable-name: #color-value;...}

    import { generateExtensionTheme } from './generators';
    
    const extensionCss = generateExtensionTheme(palette);