Add user-friendly theme option labels (#1796)

[miqh]

Hello there,

#1796 looks like a simple enough request, so I thought I'd try my hand with an initial contribution.

I looked around at other areas which required key-value options (i.e. for <Select />) but couldn't find any consistency with their structure.

Happy to amend as necessary.

EDIT: Noticed the release notes action failed. If these minor changes warrant an entry in upcoming-release-notes then I'll add it. However, I'm thinking they're not, given that themes is behind an experimental flag.

---

Closes #1796

[netlify]

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	66b012c
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/652d244336e7a700097f5797
😎 Deploy Preview	https://deploy-preview-1797.demo.actualbudget.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
16	2.82 MB → 2.82 MB (-544 B)	-0.02%

Changeset

File	Δ	Size
src/style/theme.tsx	📈 +228 B (+22.05%)	1.01 kB → 1.23 kB
src/components/accounts/Account.js	📉 -93 B (-0.18%)	49.29 kB → 49.2 kB
src/components/modals/ImportTransactions.js	📉 -1.83 kB (-4.26%)	43.03 kB → 41.2 kB
src/components/settings/Themes.tsx	📉 -92 B (-7.09%)	1.27 kB → 1.18 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

Asset	File Size	% Changed
static/js/main.js	1.12 MB → 1.12 MB (-490 B)	-0.04%
static/js/wide-components.chunk.js	126.84 kB → 126.79 kB (-54 B)	-0.04%

Unchanged

Asset	File Size	% Changed
static/js/848.chunk.js	760.98 kB	0%
static/media/Inter-italic.var.woff2	239.29 kB	0%
static/media/Inter-roman.var.woff2	221.86 kB	0%
static/js/713.chunk.js	156.56 kB	0%
static/js/231.chunk.js	117.37 kB	0%
static/js/narrow-components.chunk.js	43.06 kB	0%
static/js/reports.chunk.js	29.92 kB	0%
static/js/473.chunk.js	13 kB	0%
static/js/389.chunk.js	12.77 kB	0%
static/js/resize-observer-polyfill.chunk.js	8.88 kB	0%
static/css/main.css	7.41 kB	0%
asset-manifest.json	2.07 kB	0%
index.html	1.66 kB	0%
static/media/browser-server.js	903 B	0%

[github-actions]

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
2	2.22 MB	0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
kcab.worker.js	1.23 MB	0%
xfo.xfo.kcab.worker.js	1014.46 kB	0%

[miqh]

Two observations I noted, but haven't addressed:

1. Record<keyof typeof lightTheme, string> for the exported theme variable technically isn't accurate. Not at all themes share a common set of thematic variables. For example, light.ts is the only one with altPageTextPositive.
2. Theme from loot-core/src/types/prefs neglects development.

[carkom]

As to #1, I've put in a PR to fix it. Still working through these inconsistencies. Cheers!

[carkom]

Thanks for the contribution. FYI, release notes are required for all PRs. It can't be merged until you add the release notes file. Cheers!

[carkom]

LGTM!

[joel-jeremy]

Looks good! Thank you for your contribution!