Adapt the top level components to dark mode

[j-f1]

This updates the management and finance app to apply the theme colors. Things don‘t look very good yet but at least there is some sort of dark mode now.

[netlify]

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	1ee9a20
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/64bd920433f3a300073fb7b7
😎 Deploy Preview	https://deploy-preview-1391.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.08 MB -> 2.08 MB (+1.44 KB)	+0.07%

Changeset

File	Δ	Size
src/components/BackgroundImage.tsx	🆕 +117.97 KB	0 B -> 117.97 KB
src/components/Background.tsx	🆕 +1.06 KB	0 B -> 1.06 KB
src/style/palette.ts	📈 +340 B (+13.96%)	2.38 KB -> 2.71 KB
src/components/DevelopmentTopBar.tsx	📈 +48 B (+6.37%)	753 B -> 801 B
webpack/runtime/get javascript chunk filename	📈 +17 B (+3.71%)	458 B -> 475 B
src/components/FinancesApp.tsx	📈 +86 B (+1.11%)	7.6 KB -> 7.68 KB
src/components/AppBackground.js	📈 +9 B (+1.06%)	851 B -> 860 B
src/components/manager/ManagementApp.js	📈 +37 B (+0.74%)	4.91 KB -> 4.95 KB
src/components/FatalError.js	📈 +19 B (+0.40%)	4.63 KB -> 4.65 KB
src/style/themes/light.ts	📉 -10 B (-0.16%)	5.98 KB -> 5.97 KB
src/components/App.js	📉 -26 B (-0.72%)	3.51 KB -> 3.48 KB
src/components/manager/bg.svg	🔥 -121.42 KB (-100%)	121.42 KB -> 0 B
src/components/Background.js	🔥 -371 B (-100%)	371 B -> 0 B

View detailed bundle breakdown

Added

Asset	File Size	% Changed
static/js/383.chunk.js	0 B -> 117.35 KB (+117.35 KB)	-

Removed

Asset	File Size	% Changed
static/media/bg.svg	116.73 KB -> 0 B (-116.73 KB)	-100%

Bigger

Asset	File Size	% Changed
static/js/main.js	857.53 KB -> 858.3 KB (+792 B)	+0.09%
asset-manifest.json	2.01 KB -> 2.07 KB (+64 B)	+3.11%

Smaller

Asset	File Size	% Changed
index.html	1.68 KB -> 1.66 KB (-14 B)	-0.82%

Unchanged

Asset	File Size	% Changed
static/js/457.chunk.js	388.22 KB	0%
static/media/Inter-italic.var.woff2	239.29 KB	0%
static/media/Inter-roman.var.woff2	221.86 KB	0%
static/js/wide-components.chunk.js	156.7 KB	0%
static/js/reports.chunk.js	32.35 KB	0%
static/js/narrow-components.chunk.js	32.15 KB	0%
static/js/281.chunk.js	28.55 KB	0%
static/js/876.chunk.js	26.2 KB	0%
static/js/969.chunk.js	12.94 KB	0%
static/js/resize-observer-polyfill.chunk.js	8.12 KB	0%
static/css/main.css	5.82 KB	0%
static/media/browser-server.js	963 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	1.97 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	1009.32 KB	0%
xfo.xfo.kcab.worker.js	1004.04 KB	0%

[MatissJanis]

Some bigger differences I'm observing in light mode:

• "demo" banner has very different colors now; it's quite invisible
• text color is different - very visible in the settings page and budget page
• the landing page background is significantly different (more blue) - I actually like this change; makes the content stand out more clearly