github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-05-07 12:28:57 -05:00
Code Issues 1.6k Packages Projects Releases 55 Wiki Activity

[PR #7265] [CLOSED] [WIP] Add custom theme generator with Mondrian theme #32973

New Issue
Closed
opened 2026-04-18 08:55:28 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-18 08:55:28 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/7265
Author: @ustunfatih
Created: 3/23/2026
Status: ❌ Closed

Base: master ← Head: claude/reverent-austin

📝 Commits (5)

  • 0b67faf Switch font from Inter Variable to Geist Variable
  • 760b69a Add Geist Mono as the font for all numeric displays
  • 69d9192 Add by-date, remainder, and goal automation types
  • 4063426 Add custom theme generator with Mondrian theme
  • e1bbf92 Add Claude Vision scanner, light/dark theme support, and Mondrian variants

📊 Changes

25 files changed (+1748 additions, -13 deletions)

View changed files

➕ custom-themes/.gitignore (+3 -0)
➕ custom-themes/package-lock.json (+235 -0)
➕ custom-themes/package.json (+18 -0)
➕ custom-themes/scripts/color-utils.ts (+45 -0)
➕ custom-themes/scripts/generate-theme.ts (+96 -0)
➕ custom-themes/scripts/scan-and-generate.ts (+211 -0)
➕ custom-themes/scripts/variable-map.ts (+325 -0)
➕ custom-themes/themes/mondrian/actual.css (+224 -0)
➕ custom-themes/themes/mondrian/config.json (+26 -0)
➕ custom-themes/tsconfig.json (+12 -0)
📝 packages/component-library/src/styles.ts (+1 -0)
📝 packages/desktop-client/index.html (+2 -2)
📝 packages/desktop-client/package.json (+2 -1)
📝 packages/desktop-client/src/components/budget/goals/BudgetAutomationEditor.tsx (+39 -0)
📝 packages/desktop-client/src/components/budget/goals/BudgetAutomationReadOnly.tsx (+18 -0)
📝 packages/desktop-client/src/components/budget/goals/constants.ts (+19 -0)
➕ packages/desktop-client/src/components/budget/goals/editor/ByDateAutomation.tsx (+166 -0)
➕ packages/desktop-client/src/components/budget/goals/editor/ByDateAutomationReadOnly.tsx (+53 -0)
➕ packages/desktop-client/src/components/budget/goals/editor/GoalAutomation.tsx (+47 -0)
➕ packages/desktop-client/src/components/budget/goals/editor/GoalAutomationReadOnly.tsx (+30 -0)

...and 5 more files

📄 Description

Summary

  • Adds custom-themes/ at the repo root — a standalone TypeScript toolchain for generating Actual Budget custom themes from color palette screenshots
  • Introduces a Claude Vision API scanner that reads palette screenshots, infers semantic color roles, and auto-generates dark + light CSS variants (222 variables each)
  • Ships the first theme, Mondrian, inspired by Piet Mondrian's neoplastic compositions (black, white, red #DD0100, yellow #FAC901, blue #225095)

How it works

  1. Drop a palette screenshot into custom-themes/themes/input/ named after the theme (e.g. cyberpunk.png)
  2. Run cd custom-themes && npm run scan
  3. Claude Vision extracts hex codes, assigns semantic roles, generates actual-dark.css and actual-light.css
  4. Paste either file into Actual Budget → Settings → Themes → Custom Theme

Architecture

custom-themes/
  scripts/
    scan-and-generate.ts  — Claude Vision API scanner
    generate-theme.ts     — CSS generator (dark|light mode)
    variable-map.ts       — 222 CSS variable derivation functions
    color-utils.ts        — pure hex color math (lighten/darken/mix)
  themes/
    input/                — drop palette screenshots here
    mondrian/
      config.json         — dark + light palette definitions
      actual-dark.css     — ready to paste
      actual-light.css    — ready to paste
  .env                    — ANTHROPIC_API_KEY (git-ignored)

Test plan

  • cd custom-themes && npm install
  • Add ANTHROPIC_API_KEY to custom-themes/.env
  • Drop a palette screenshot into themes/input/ and run npm run scan
  • Paste generated actual-dark.css into Actual Budget Settings → Themes → Custom Theme and verify appearance
  • Repeat with actual-light.css

🤖 Generated with Claude Code

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/7265 **Author:** [@ustunfatih](https://github.com/ustunfatih) **Created:** 3/23/2026 **Status:** ❌ Closed **Base:** `master` ← **Head:** `claude/reverent-austin` --- ### 📝 Commits (5) - [`0b67faf`](https://github.com/actualbudget/actual/commit/0b67fafa645aaa7499669ea742c4f0db04902e35) Switch font from Inter Variable to Geist Variable - [`760b69a`](https://github.com/actualbudget/actual/commit/760b69a50155fb5dbbae2ec25b4561bf53cd3e18) Add Geist Mono as the font for all numeric displays - [`69d9192`](https://github.com/actualbudget/actual/commit/69d9192562289092c7deec497aa181c5fb6b37c0) Add by-date, remainder, and goal automation types - [`4063426`](https://github.com/actualbudget/actual/commit/4063426c72e157baf71bfe95b109f51c606f9f60) Add custom theme generator with Mondrian theme - [`e1bbf92`](https://github.com/actualbudget/actual/commit/e1bbf925a6d557aaf5ccb28becd1c37b58a49396) Add Claude Vision scanner, light/dark theme support, and Mondrian variants ### 📊 Changes **25 files changed** (+1748 additions, -13 deletions) <details> <summary>View changed files</summary> ➕ `custom-themes/.gitignore` (+3 -0) ➕ `custom-themes/package-lock.json` (+235 -0) ➕ `custom-themes/package.json` (+18 -0) ➕ `custom-themes/scripts/color-utils.ts` (+45 -0) ➕ `custom-themes/scripts/generate-theme.ts` (+96 -0) ➕ `custom-themes/scripts/scan-and-generate.ts` (+211 -0) ➕ `custom-themes/scripts/variable-map.ts` (+325 -0) ➕ `custom-themes/themes/mondrian/actual.css` (+224 -0) ➕ `custom-themes/themes/mondrian/config.json` (+26 -0) ➕ `custom-themes/tsconfig.json` (+12 -0) 📝 `packages/component-library/src/styles.ts` (+1 -0) 📝 `packages/desktop-client/index.html` (+2 -2) 📝 `packages/desktop-client/package.json` (+2 -1) 📝 `packages/desktop-client/src/components/budget/goals/BudgetAutomationEditor.tsx` (+39 -0) 📝 `packages/desktop-client/src/components/budget/goals/BudgetAutomationReadOnly.tsx` (+18 -0) 📝 `packages/desktop-client/src/components/budget/goals/constants.ts` (+19 -0) ➕ `packages/desktop-client/src/components/budget/goals/editor/ByDateAutomation.tsx` (+166 -0) ➕ `packages/desktop-client/src/components/budget/goals/editor/ByDateAutomationReadOnly.tsx` (+53 -0) ➕ `packages/desktop-client/src/components/budget/goals/editor/GoalAutomation.tsx` (+47 -0) ➕ `packages/desktop-client/src/components/budget/goals/editor/GoalAutomationReadOnly.tsx` (+30 -0) _...and 5 more files_ </details> ### 📄 Description ## Summary - Adds `custom-themes/` at the repo root — a standalone TypeScript toolchain for generating Actual Budget custom themes from color palette screenshots - Introduces a Claude Vision API scanner that reads palette screenshots, infers semantic color roles, and auto-generates dark + light CSS variants (222 variables each) - Ships the first theme, **Mondrian**, inspired by Piet Mondrian's neoplastic compositions (black, white, red #DD0100, yellow #FAC901, blue #225095) ## How it works 1. Drop a palette screenshot into `custom-themes/themes/input/` named after the theme (e.g. `cyberpunk.png`) 2. Run `cd custom-themes && npm run scan` 3. Claude Vision extracts hex codes, assigns semantic roles, generates `actual-dark.css` and `actual-light.css` 4. Paste either file into Actual Budget → Settings → Themes → Custom Theme ## Architecture ``` custom-themes/ scripts/ scan-and-generate.ts — Claude Vision API scanner generate-theme.ts — CSS generator (dark|light mode) variable-map.ts — 222 CSS variable derivation functions color-utils.ts — pure hex color math (lighten/darken/mix) themes/ input/ — drop palette screenshots here mondrian/ config.json — dark + light palette definitions actual-dark.css — ready to paste actual-light.css — ready to paste .env — ANTHROPIC_API_KEY (git-ignored) ``` ## Test plan - [ ] `cd custom-themes && npm install` - [ ] Add `ANTHROPIC_API_KEY` to `custom-themes/.env` - [ ] Drop a palette screenshot into `themes/input/` and run `npm run scan` - [ ] Paste generated `actual-dark.css` into Actual Budget Settings → Themes → Custom Theme and verify appearance - [ ] Repeat with `actual-light.css` 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-18 08:55:28 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#32973
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?