fava-theming 0.1.0

A Fava extension for customizing the Fava web UI theme with a visual editor

fava-theming

A Fava extension that adds a visual theme editor to Fava's web UI. Customize colors, fonts, and layout variables for both light and dark modes with live preview.

Features

• Visual color picker for all of Fava's CSS variables
• Separate light and dark mode controls
• Live preview with system / light / dark toggle
• Font family selection with local font detection
• Organized variable groups: backgrounds, text, borders, header, sidebar, buttons, tables, semantic colors, journal, typography
• Reset to defaults
• Saves as a clean CSS :root {} block

Installation

uv add fava-theming

Or with pip:

pip install fava-theming

Setup

1. Enable the extension in your beancount file:

2020-01-01 custom "fava-extension" "fava_theming"

2. Open Fava, click Theme in the sidebar, tweak to your liking, and hit Save Theme.

Options

You can optionally configure the nav title and the CSS output file:

2020-01-01 custom "fava-extension" "fava_theming" "{'title': 'Theme', 'file': 'my_custom_theme.css'}"

Option	Default	Description
title	"Theme"	Label shown in Fava's navigation sidebar
file	"fava_theme.css"	Path to the CSS file where theme variables are saved (relative to your beancount file)

How it works

The extension provides a Tweakpane-based UI that maps every Fava CSS custom property to a color picker or text input. Changes are previewed instantly by injecting a <style> override. When you save, the extension writes a :root {} block to a CSS file next to your beancount ledger.

Light/dark mode support uses the CSS light-dark() function, so a single file handles both schemes.

Contributing

Issues and pull requests are welcome.

License

MIT