Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] [For Feedback] Update Dark theme with official Actual brand colors #4450

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

joel-jeremy
Copy link
Contributor

@joel-jeremy joel-jeremy commented Feb 25, 2025

We use multiple shades of purple throughout the app. This PR is an attempt to use the official brand color to in an attempt to make the look and feel more consistent/standardized. Some colors had to be updated to improve readability.

@actual-github-bot actual-github-bot bot changed the title [For Feedback] Update Dark theme with official Actual brand colors [WIP] [For Feedback] Update Dark theme with official Actual brand colors Feb 25, 2025
Copy link

netlify bot commented Feb 25, 2025

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit ee36227
🔍 Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/67c0c65bb0ac560008d6bab0
😎 Deploy Preview https://deploy-preview-4450.demo.actualbudget.org
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link
Contributor

github-actions bot commented Feb 25, 2025

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
18 7.07 MB → 7.07 MB (+780 B) +0.01%
Changeset
File Δ Size
src/style/palette.ts 📈 +27 B (+1.81%) 1.46 kB → 1.48 kB
home/runner/work/actual/actual/packages/component-library/src/theme.ts 📈 +204 B (+1.77%) 11.29 kB → 11.49 kB
src/components/util/GenericInput.jsx 📈 +108 B (+1.68%) 6.28 kB → 6.39 kB
src/style/themes/midnight.ts 📈 +110 B (+1.44%) 7.49 kB → 7.59 kB
src/style/themes/development.ts 📈 +110 B (+1.38%) 7.76 kB → 7.87 kB
src/style/themes/light.ts 📈 +110 B (+1.37%) 7.86 kB → 7.96 kB
src/style/themes/dark.ts 📈 +69 B (+0.86%) 7.79 kB → 7.86 kB
src/components/mobile/accounts/Accounts.tsx 📈 +49 B (+0.56%) 8.58 kB → 8.63 kB
src/components/schedules/ScheduleDetails.tsx 📈 +169 B (+0.54%) 30.84 kB → 31.01 kB
src/components/mobile/MobileForms.tsx 📈 +8 B (+0.32%) 2.48 kB → 2.49 kB
src/components/banksync/AccountRow.tsx 📈 +3 B (+0.12%) 2.42 kB → 2.42 kB
src/components/mobile/transactions/TransactionList.tsx 📈 +10 B (+0.06%) 16.15 kB → 16.16 kB
src/components/mobile/transactions/TransactionListItem.tsx 📈 +5 B (+0.06%) 8.24 kB → 8.25 kB
src/components/autocomplete/Autocomplete.tsx 📈 +4 B (+0.02%) 16.27 kB → 16.27 kB
src/components/mobile/transactions/TransactionEdit.jsx 📈 +1 B (+0.00%) 34.13 kB → 34.13 kB
src/components/modals/EnvelopeBudgetMonthMenuModal.tsx 📉 -32 B (-0.44%) 7.08 kB → 7.05 kB
src/components/modals/TrackingBudgetMonthMenuModal.tsx 📉 -32 B (-0.46%) 6.73 kB → 6.7 kB
src/components/modals/CategoryGroupMenuModal.tsx 📉 -32 B (-0.50%) 6.26 kB → 6.23 kB
src/components/modals/AccountMenuModal.tsx 📉 -32 B (-0.50%) 6.23 kB → 6.2 kB
src/components/modals/CategoryMenuModal.tsx 📉 -32 B (-0.57%) 5.44 kB → 5.41 kB
src/components/mobile/transactions/TransactionListWithBalances.tsx 📉 -47 B (-0.79%) 5.79 kB → 5.74 kB
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset File Size % Changed
static/js/index.js 4.35 MB → 4.35 MB (+731 B) +0.02%
static/js/narrow.js 86.23 kB → 86.28 kB (+49 B) +0.06%

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
static/js/pt-BR.js 112.83 kB 0%
static/js/AppliedFilters.js 10.8 kB 0%
static/js/uk.js 111.11 kB 0%
static/js/en.js 103.18 kB 0%
static/js/nl.js 97.78 kB 0%
static/js/BackgroundImage.js 122.29 kB 0%
static/js/en-GB.js 98.67 kB 0%
static/js/fr.js 88.87 kB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 13.5 kB 0%
static/js/resize-observer.js 18.37 kB 0%
static/js/workbox-window.prod.es5.js 5.69 kB 0%
static/js/es.js 60.58 kB 0%
static/js/useAccountPreviewTransactions.js 1.69 kB 0%
static/js/de.js 114.35 kB 0%
static/js/wide.js 102.9 kB 0%
static/js/ReportRouter.js 1.59 MB 0%

Copy link
Contributor

github-actions bot commented Feb 25, 2025

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
1 1.34 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.34 MB 0%

@joel-jeremy
Copy link
Contributor Author

/update-vrt

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The balance amount color here is messing with my eyes and is hard to read.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we would need to change the background colors to be able to use the brand color in the dark theme to improve contrast and readability

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the color changes become more extensive, it should be considered to clone the current scheme to preserve it. Labelled "Dark (legacy)" or something.

@glowtape
Copy link

Yikes.

The "brand" shade of purple doesn't combine well at all with the various background hues. And the contrast is affected negatively, too.

@joel-jeremy joel-jeremy force-pushed the dark-theme-with-brand-colors branch from c5188b1 to ff09e95 Compare February 27, 2025 16:57
@joel-jeremy
Copy link
Contributor Author

/update-vrt

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants