Metadata-Version: 2.4
Name: fava-theming
Version: 0.1.0
Summary: A Fava extension for customizing the Fava web UI theme with a visual editor
License-Expression: MIT
Project-URL: Homepage, https://github.com/TechSpaceAsia/fava-theming
Requires-Python: >=3.10
Description-Content-Type: text/markdown
License-File: LICENSE
Requires-Dist: fava
Requires-Dist: flask
Dynamic: license-file

# fava-theming

A [Fava](https://beancount.github.io/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.

![fava-theming demo](FavaTheming.gif)

## 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

```bash
uv add fava-theming
```

Or with pip:

```bash
pip install fava-theming
```

## Setup

**1. Enable the extension** in your beancount file:

```beancount
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:

```beancount
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](https://tweakpane.github.io/docs/)-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](LICENSE)
