actual icon indicating copy to clipboard operation
actual copied to clipboard

Published 20 hours ago β€’ verified publisher icon actualbudget

[WIP] Dark theme

Open biohzrddd opened this issue 1 year ago β€’ 3 comments

Work in progress. Placeholder for adding a dark theme.

  • [x] Simplify colors down to a handful
  • [x] Sidebar
  • [x] Settings
  • [x] Payees
  • [x] Rules
  • [x] Budget
  • [x] Schedules
  • [x] Reports
  • [x] Other modals
  • [x] Add dark mode theme
  • [ ] Automatically select based on browser setting
  • [ ] Create selectable themes

biohzrddd avatar Apr 18 '23 23:04 biohzrddd

Deploy Preview for actualbudget failed.

Name Link
Latest commit 38eceb278743501880a771438e32cb43bc41e69b
Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/64bed987427152000878d4b3

netlify[bot] avatar Apr 18 '23 23:04 netlify[bot]

Linking to #618

biohzrddd avatar May 09 '23 20:05 biohzrddd

:wave: just checking in: are you planing to pick this up again? Any blockers or issues we could help with?

MatissJanis avatar May 24 '23 17:05 MatissJanis

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
13 -> 12 2.35 MB -> 2.37 MB (+18.03 KB) +0.75%
Changeset (largest 100 files by percent change)
File Ξ” Size
src/icons/v2/MoonStars.js πŸ†• +1.48 KB 0 B -> 1.48 KB
src/components/ThemeSelector.js πŸ†• +1.17 KB 0 B -> 1.17 KB
src/icons/v2/Sun.js πŸ†• +1020 B 0 B -> 1020 B
src/components/settings/Themes.js πŸ†• +677 B 0 B -> 677 B
src/components/Background.js πŸ“ˆ +118.79 KB (+32786.25%) 371 B -> 119.15 KB
src/style.tsx πŸ“ˆ +14.46 KB (+371.16%) 3.89 KB -> 18.35 KB
src/components/common/Search.tsx πŸ“ˆ +367 B (+71.82%) 511 B -> 878 B
src/components/common/Button.tsx πŸ“ˆ +946 B (+43.53%) 2.12 KB -> 3.05 KB
src/components/schedules/StatusBadge.js πŸ“ˆ +569 B (+29.84%) 1.86 KB -> 2.42 KB
src/components/common/Select.tsx πŸ“ˆ +628 B (+28.20%) 2.17 KB -> 2.79 KB
src/components/common/Input.tsx πŸ“ˆ +266 B (+22.24%) 1.17 KB -> 1.43 KB
src/components/App.js πŸ“ˆ +532 B (+15.00%) 3.46 KB -> 3.98 KB
src/components/reports/chart-theme.js πŸ“ˆ +230 B (+14.33%) 1.57 KB -> 1.79 KB
src/components/autocomplete/AccountAutocomplete.js πŸ“ˆ +229 B (+11.73%) 1.91 KB -> 2.13 KB
src/components/autocomplete/SavedFilterAutocomplete.js πŸ“ˆ +133 B (+10.67%) 1.22 KB -> 1.35 KB
src/components/manager/DeleteFile.js πŸ“ˆ +238 B (+8.78%) 2.65 KB -> 2.88 KB
src/components/common/InputWithContent.tsx πŸ“ˆ +94 B (+8.61%) 1.07 KB -> 1.16 KB
src/components/util/AmountInput.js πŸ“ˆ +134 B (+7.71%) 1.7 KB -> 1.83 KB
src/components/DevelopmentTopBar.tsx πŸ“ˆ +52 B (+6.91%) 753 B -> 805 B
src/components/common/Card.tsx πŸ“ˆ +33 B (+6.29%) 525 B -> 558 B
src/components/manager/subscribe/ChangePassword.tsx πŸ“ˆ +100 B (+5.53%) 1.77 KB -> 1.86 KB
src/components/sidebar.js πŸ“ˆ +578 B (+5.14%) 10.97 KB -> 11.54 KB
src/components/common/Menu.tsx πŸ“ˆ +127 B (+4.45%) 2.79 KB -> 2.91 KB
src/components/Notifications.tsx πŸ“ˆ +160 B (+4.00%) 3.91 KB -> 4.07 KB
src/components/autocomplete/PayeeAutocomplete.js πŸ“ˆ +262 B (+3.78%) 6.76 KB -> 7.02 KB
src/components/Titlebar.js πŸ“ˆ +309 B (+3.73%) 8.09 KB -> 8.39 KB
src/components/reports/Change.js πŸ“ˆ +15 B (+3.69%) 407 B -> 422 B
src/components/manager/BudgetList.js πŸ“ˆ +229 B (+3.68%) 6.07 KB -> 6.29 KB
src/components/NotesButton.tsx πŸ“ˆ +87 B (+3.55%) 2.39 KB -> 2.48 KB
src/components/budget/util.js πŸ“ˆ +48 B (+3.37%) 1.39 KB -> 1.44 KB
src/components/budget/MonthPicker.js πŸ“ˆ +94 B (+3.13%) 2.93 KB -> 3.02 KB
src/components/manager/ConfigServer.js πŸ“ˆ +122 B (+2.99%) 3.99 KB -> 4.11 KB
src/components/select/DateSelect.js πŸ“ˆ +230 B (+2.95%) 7.63 KB -> 7.85 KB
src/components/Page.js πŸ“ˆ +54 B (+2.89%) 1.82 KB -> 1.88 KB
src/components/reports/Tooltip.js πŸ“ˆ +44 B (+2.82%) 1.53 KB -> 1.57 KB
src/components/modals/EditRule.js πŸ“ˆ +500 B (+2.79%) 17.49 KB -> 17.98 KB
src/components/settings/Experimental.js πŸ“ˆ +53 B (+2.45%) 2.11 KB -> 2.16 KB
src/components/transactions/TransactionsTable.js πŸ“ˆ +907 B (+2.29%) 38.74 KB -> 39.63 KB
src/components/LoggedInUser.js πŸ“ˆ +48 B (+2.29%) 2.05 KB -> 2.1 KB
src/components/BankSyncStatus.js πŸ“ˆ +27 B (+2.01%) 1.31 KB -> 1.33 KB
src/components/modals/PlaidExternalMsg.js πŸ“ˆ +60 B (+2.00%) 2.92 KB -> 2.98 KB
src/components/common/Label.tsx πŸ“ˆ +6 B (+1.99%) 302 B -> 308 B
src/components/table.tsx πŸ“ˆ +456 B (+1.98%) 22.48 KB -> 22.93 KB
src/components/settings/UI.tsx πŸ“ˆ +28 B (+1.95%) 1.4 KB -> 1.43 KB
src/components/budget/MobileBudgetTable.js πŸ“ˆ +428 B (+1.88%) 22.18 KB -> 22.59 KB
src/components/budget/MonthCountSelector.js πŸ“ˆ +19 B (+1.84%) 1.01 KB -> 1.03 KB
src/components/modals/CreateAccount.js πŸ“ˆ +54 B (+1.83%) 2.88 KB -> 2.93 KB
src/components/modals/ConfirmCategoryDelete.js πŸ“ˆ +46 B (+1.82%) 2.47 KB -> 2.51 KB
src/components/budget/report/BudgetSummary.tsx πŸ“ˆ +146 B (+1.82%) 7.83 KB -> 7.97 KB
src/components/reports/DateRange.js πŸ“ˆ +13 B (+1.79%) 728 B -> 741 B
src/components/common/Modal.tsx πŸ“ˆ +86 B (+1.65%) 5.1 KB -> 5.19 KB
src/components/modals/BudgetSummary.js πŸ“ˆ +36 B (+1.52%) 2.32 KB -> 2.35 KB
src/components/manager/subscribe/common.tsx πŸ“ˆ +34 B (+1.48%) 2.24 KB -> 2.28 KB
src/components/transactions/MobileTransaction.js πŸ“ˆ +133 B (+1.45%) 8.93 KB -> 9.06 KB
src/components/AppBackground.js πŸ“ˆ +12 B (+1.41%) 851 B -> 863 B
src/components/reports/graphs/NetWorthGraph.tsx πŸ“ˆ +44 B (+1.40%) 3.07 KB -> 3.11 KB
src/components/schedules/index.js πŸ“ˆ +28 B (+1.39%) 1.97 KB -> 2 KB
src/components/manager/ImportYNAB4.js πŸ“ˆ +29 B (+1.34%) 2.12 KB -> 2.15 KB
src/components/modals/EditField.js πŸ“ˆ +42 B (+1.31%) 3.13 KB -> 3.17 KB
src/components/manager/ImportYNAB5.js πŸ“ˆ +29 B (+1.31%) 2.17 KB -> 2.19 KB
src/components/settings/index.js πŸ“ˆ +61 B (+1.30%) 4.59 KB -> 4.65 KB
src/components/accounts/Balance.js πŸ“ˆ +47 B (+1.29%) 3.57 KB -> 3.61 KB
src/components/reports/NetWorth.js πŸ“ˆ +44 B (+1.22%) 3.53 KB -> 3.57 KB
src/components/reports/Overview.js πŸ“ˆ +64 B (+1.20%) 5.19 KB -> 5.25 KB
src/components/manager/ImportActual.js πŸ“ˆ +29 B (+1.19%) 2.38 KB -> 2.41 KB
src/components/budget/MobileTable.js πŸ“ˆ +5 B (+1.14%) 439 B -> 444 B
src/components/FinancesApp.js πŸ“ˆ +93 B (+1.14%) 7.99 KB -> 8.08 KB
src/components/common.tsx πŸ“ˆ +37 B (+1.13%) 3.21 KB -> 3.25 KB
src/components/reports/CashFlow.js πŸ“ˆ +43 B (+1.05%) 4.01 KB -> 4.05 KB
src/components/accounts/Reconcile.js πŸ“ˆ +31 B (+1.03%) 2.93 KB -> 2.96 KB
src/components/MobileWebMessage.js πŸ“ˆ +22 B (+0.97%) 2.21 KB -> 2.23 KB
src/components/manager/subscribe/Bootstrap.tsx πŸ“ˆ +20 B (+0.92%) 2.11 KB -> 2.13 KB
src/components/transactions/TransactionList.js πŸ“ˆ +47 B (+0.91%) 5.03 KB -> 5.08 KB
src/components/transactions/SimpleTransactionsTable.js πŸ“ˆ +38 B (+0.86%) 4.3 KB -> 4.34 KB
src/components/manager/ManagementApp.js πŸ“ˆ +41 B (+0.81%) 4.91 KB -> 4.95 KB
src/components/accounts/AccountSyncCheck.js πŸ“ˆ +26 B (+0.81%) 3.15 KB -> 3.17 KB
src/components/util/DisplayId.js πŸ“ˆ +6 B (+0.80%) 753 B -> 759 B
src/components/budget/misc.js πŸ“ˆ +189 B (+0.77%) 24.13 KB -> 24.31 KB
src/components/alerts.tsx πŸ“ˆ +11 B (+0.74%) 1.45 KB -> 1.46 KB
src/components/modals/SelectLinkedAccounts.js πŸ“ˆ +32 B (+0.71%) 4.38 KB -> 4.42 KB
src/components/manager/subscribe/Error.tsx πŸ“ˆ +6 B (+0.67%) 901 B -> 907 B
src/components/reports/index.tsx πŸ“ˆ +6 B (+0.65%) 922 B -> 928 B
src/components/schedules/PostsOfflineNotification.js πŸ“ˆ +14 B (+0.65%) 2.12 KB -> 2.13 KB
src/components/schedules/DiscoverSchedules.js πŸ“ˆ +32 B (+0.64%) 4.91 KB -> 4.94 KB
src/components/accounts/MobileAccounts.js πŸ“ˆ +32 B (+0.57%) 5.48 KB -> 5.51 KB
src/components/common/View.tsx πŸ“ˆ +3 B (+0.57%) 526 B -> 529 B
src/components/budget/rollover/BudgetSummary.tsx πŸ“ˆ +47 B (+0.56%) 8.19 KB -> 8.24 KB
src/components/modals/GoCardlessExternalMsg.js πŸ“ˆ +33 B (+0.50%) 6.48 KB -> 6.51 KB
src/components/filters/SavedFilters.js πŸ“ˆ +29 B (+0.48%) 5.84 KB -> 5.87 KB
src/components/settings/Encryption.js πŸ“ˆ +14 B (+0.48%) 2.88 KB -> 2.89 KB
src/components/FatalError.js πŸ“ˆ +22 B (+0.46%) 4.63 KB -> 4.65 KB
src/components/schedules/SchedulesTable.js πŸ“ˆ +30 B (+0.45%) 6.49 KB -> 6.52 KB
src/components/budget/MobileBudget.js πŸ“ˆ +29 B (+0.45%) 6.31 KB -> 6.34 KB
src/components/accounts/Account.js πŸ“ˆ +124 B (+0.42%) 29.07 KB -> 29.19 KB
src/components/modals/ImportTransactions.js πŸ“ˆ +76 B (+0.38%) 19.6 KB -> 19.68 KB
src/components/SidebarWithData.js πŸ“ˆ +13 B (+0.35%) 3.63 KB -> 3.64 KB
src/components/settings/FixSplits.js πŸ“ˆ +8 B (+0.31%) 2.5 KB -> 2.51 KB
src/components/accounts/MobileAccount.js πŸ“ˆ +11 B (+0.18%) 6.07 KB -> 6.08 KB
src/components/modals/CloseAccount.js πŸ“ˆ +7 B (+0.17%) 4.06 KB -> 4.06 KB
src/components/modals/CreateEncryptionKey.js πŸ“ˆ +7 B (+0.16%) 4.19 KB -> 4.2 KB
View detailed bundle breakdown

Added

No assets were added

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 1.04 MB -> 1.18 MB (+134.48 KB) +12.57%
static/js/reports.chunk.js 20.8 KB -> 21.09 KB (+300 B) +1.41%
index.html 1.68 KB -> 1.75 KB (+71 B) +4.14%

Smaller

Asset File Size % Changed
asset-manifest.json 1.47 KB -> 1.39 KB (-84 B) -5.58%

Unchanged

Asset File Size % Changed
static/js/457.chunk.js 387.21 KB 0%
static/media/Inter.var.woff2 317.25 KB 0%
static/media/Inter-italic.var.woff2 239.29 KB 0%
static/media/Inter-roman.var.woff2 221.86 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 6.08 KB 0%
static/media/browser-server.js 963 B 0%

github-actions[bot] avatar Jun 28 '23 23:06 github-actions[bot]

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.96 MB -> 1.96 MB (+72 B) +0.00%
Changeset
File Ξ” Size
packages/loot-core/src/server/main.ts πŸ“ˆ +138 B (+0.22%) 60.26 KB -> 60.4 KB
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset File Size % Changed
kcab.worker.js 1007.82 KB -> 1007.89 KB (+72 B) +0.01%

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
xfo.xfo.kcab.worker.js 1004.04 KB 0%

github-actions[bot] avatar Jun 28 '23 23:06 github-actions[bot]

After significant work, this is ready for review. Sorry about the size. Every UI change from this point merged into master (especially refactoring UI components to a new file) will require a manual merge/de-confliction and re-review of colors, so prioritization of review is key to reducing total development effort.

A 1-to-1 comparison with the existing 'light' theme will show a few differences:

  • consistent coloring of accents, which means there will be color differences such as the random blue highlights now being purple
  • consistent coloring of menus and tooltips, which means some previous menus that were blue are now white
  • simplification of some checkboxes (there are two, one simple and one extremely complex, I went with the simpler one closer to core html/css)
  • row highlight on hover now works, which adds clarity, especially in wide tables or budget multi-month view

Known issues:

  • blue flashes for the "advanced" drop-down menus (CustomSelect that uses @reach/listbox).
  • white flash when dark theme is selected and the page is refreshed (the result of render being called in parallel with init where global preferences are loaded)

biohzrddd avatar Jul 04 '23 21:07 biohzrddd

Bit of feedback on the text, the green #1F6F08 is really hard to read on the dark background #141520 when the font size is decreased.

image

If you have a look at the web accessibility standards it actually fails with them colours.

image

Same issue occurs for the purple text when the font size is decreased

image

rich-howell avatar Jul 05 '23 06:07 rich-howell

Bit of feedback on the text, the green #1F6F08 is really hard to read on the dark background #141520 when the font size is decreased.

image

If you have a look at the web accessibility standards it actually fails with them colours.

image

Same issue occurs for the purple text when the font size is decreased

image

Thanks for the review. We built our color pallet starting from huetone's "Stripe" color set and modified it to better match Actual's scheme. Would going from green500 to green400 work for you? It takes the contrast from -20 to -41 (which I think is better!). image

Realistically though, the current pairing meets WCAG for the current text size, right? To what small font size should we support?

biohzrddd avatar Jul 05 '23 19:07 biohzrddd

πŸ‘‹ (I have not yet done the dark-mode theme review or code review; starting off with a product review of the existing light theme)

Exciting to see this open up for review! Can't wait to officially merge and release it. But before then: we definitely need to do a lot of polish.

Can you give examples? We've been through many reviews on discord and it got to the point where there was no feedback, though maybe everyone was burned out on it!

The light theme has a lot of changes. I would have expected the existing light theme to basically have zero changes (except for maybe some smaller tweaks).

I wish we could do it with zero changes. Besides what I've listed, can you give examples of changes? I went through 1-to-1 testing but I possibly missed some items.

But now it looks like a completely different product.

Sorry, but I'm not seeing that (besides what I noted). Is what I noted the "lot of changes"?

What I would recommend doing here is: roll back all the light-mode changes in this PR. And then if you wish yo pursue them further - open a subsequent PR/s where you re-introduce them and clearly outline 1) what is changing and 2) why are you proposing to change this. Could we discuss those now? Otherwise, "rolling back" means writing explicit exceptions to the various menus and undoing the changes made to increase app consistency.

Thanks!

Thanks again for your thoughts.

biohzrddd avatar Jul 05 '23 19:07 biohzrddd

If we're doing a pure apples to apples comparison

Old: image

New: image

  • The amount 'to budget' is a different colour,
  • The little month icons are a darker colour
  • The category headings in the budget table are a darker colour
  • The sidebar is a darker colour
  • The double chevron to hide the sidebar is only visible when hovered over?
  • 'No server' is faded out?
  • The purple month background is darker (i think)?
  • Is the font a bit bigger?

Not to say any of those are a bad thing, I dont really mind any of them, expect maybe the darker colour of the sidebar.

I think though @MatissJanis one of the issues here is that that actual use(d) a LOT of colours and one of the goals of this PR towards having a functional dark theme and indeed in the future user-customisable themes was to try and simplify the pallette a bit. (This i believe was discussed on DC)

Shazib avatar Jul 05 '23 21:07 Shazib

When @jlongster released Actual to the community, the goal was to allow the community to help take the "product" forward. (not that I like the word product in this context)

I would have expected the existing light theme to basically have zero changes (except for maybe some smaller tweaks). But now it looks like a completely different product.

I think this reply raises a number of issues with the Actual project overall

  • Where is the expectation from the core contributors actually outlined?
  • We have this but it isn't much to go on.
  • Where does it say what the core contributors are expecting from people who give up their time to add to the code base?
  • There is nothing here that actually outlines the problem other than it looks different, I had a look at the deploy preview and some of the colours have changed but I wouldn't say "it looks like a totally different product"

There are a number of PR's that have been opened of late where large amounts of code have been requested to be removed and or changed because the PR doesn't fit (it is too big, or the change is scope creep) where is this outlined and where is the expectation on people put forward?

There are also some PR's that are opened that basically don't have to convince anyone to merge them they have one line "this will improve this" and it gets merged but others get major push back.

Individuals are putting in lots of time to contribute to Actual as a whole and there is nothing that I can see that demonstrates the ask.

Now, I am sure for this we will say a pitch issue should have been opened, maybe that is true, but someone on the core contributors team is on board with this as there is a dark mode channel in Discord now, not something just anyone can create.

What I would recommend doing here is: roll back all the light-mode changes in this PR. And then if you wish yo pursue them further - open a subsequent PR/s where you re-introduce them and clearly outline 1) what is changing and 2) why are you proposing to change this.

This is a massive ask, the dark theme has been discussed in detail in Discord, maybe some reasoning from @biohzrddd around why the colours have changed or someone from the core team can catch themselves up with the discussion?

I personally think the core team need to stop with the changes get their heads together and come up with a set of clear documents that can help contributors create pull requests that fit into whatever vision you all have going forward, until then this is going to continue happening and it isn't fair on contributors who want to help make Actual better.

rich-howell avatar Jul 06 '23 06:07 rich-howell

I am indebted to @Shazib for his detailed listing of the light mode changes.

Confession - I am simply a keen user, with no understanding of the technical issues. However, it is very clear, even to me, the immense amount of work that @biohzrddd has put into this and I am grateful for that.

Another confession, I am unlikely to use a dark theme but that is just my personal preference. However, it does mean that I feel very attached to, and protective of, the current colour pallet and design of Actual. I have been using Actual since early 2019 and love it!

This may be personal to me, but whatever the rights and wrongs of a dark theme generally, the new proposed side bar colour comes as quite a shock to me and I find it anything but restful. Similarly with the green font in the "to budget" row. Whilst @MatissJanis comment of it being like a different product may be quite strong, I nonetheless really wish to preserve the current light theme design. I do hear the message that this presents technical difficulties but to that argument, I would respond that, as things are, it feels a bit like "the tail wagging the dog".

Kidglove57 avatar Jul 06 '23 19:07 Kidglove57

I'd certainly be very supportive of light theme going back closer to the way it was, the 'to budget font colour' and sidebar in particular, I can't really say the little month icons being a bit darker for example. is any kind of issue for me personally. I wouldn't think the subtle convergence of multiple slightly variant shades of grey need a standalone PR. 🀷

But I would certainly disagree that it is an entirely different product, or that a total rollback of large portions of the PR is needed before it warrants consideration.

In any event, one of the underlying goals of this PR is to make theming easier and more flexible in general, so I think the discussed changes to put light theme back the way it was can be made somewhat painlessly? (correct me if i'm wrong @biohzrddd).

In @biohzrddd's defence I would also say that this change was shared many times as a draft in the discord and there were several long running discussions prior to and during its implementation for feedback before it was submitted for review here, and at that time very little comments were given.

Shazib avatar Jul 06 '23 20:07 Shazib

If we're doing a pure apples to apples comparison

-snip-

* The amount 'to budget' is a different colour,

I've changed it back to purple since the new color was universally unpopular. How about we have three colors here: negative = red, zero = green, and positive = purple. Zero = green would be a new addition to highlight the benefit/goal of zero-based budgeting.

* The little month icons are a darker colour

This is a consistency thing. There were many different shades of text, now there are basically two (pageText and pageTextSubdued).

* The category headings in the budget table are a darker colour

I pulled these down to the lightest shade available. if that isn't enough, I'll have to adjust the entire color pallet as we need to keep a roughly constant lightness value to every color.

* The sidebar is a darker colour

The sidebar is now exactly the same color. I had to adjust the navy color pallet a bit to accommodate.

* The double chevron to hide the sidebar is only visible when hovered over?

I don't see anything I did that caused this? See sidebar.js https://github.com/actualbudget/actual/pull/922/files#diff-565f9aa3fd3ac3a210dcfd5960c0143bc62da9bfb0d2f8c56e68371cf49aae0d Either way, it is now consistent with the budget expand/collapse chevron and most other drop-downs on the budget screen. If someone still doesn't agree with it, I can figure it out and get it back in.

* 'No server' is faded out?

Changed to be regular pageText (dark font) on hover and subdued otherwise. My rationale is that this isn't something you're always looking at and it helps to cleanup the UI to focus on what's needed. Maybe with a server and syncing this is not the case? Again I can change if it isn't liked.

* The purple month background is darker (i think)?

The color pallet is simplified and all accent colors the same. I brought the global accent color down a shade of purple which is very close.

* Is the font a bit bigger?

It shouldn't be! A spot check on a few text items shows it is the same.

Not to say any of those are a bad thing, I dont really mind any of them, expect maybe the darker colour of the sidebar.

Sidebar fixed.

I think though @MatissJanis one of the issues here is that that actual use(d) a LOT of colours and one of the goals of this PR towards having a functional dark theme and indeed in the future user-customisable themes was to try and simplify the pallette a bit. (This i believe was discussed on DC) Thank you for recognizing this. Yes, the PR only says "Dark theme", but to get to that point a LOT of effort had to be put into creating a color pallet and applying that to everything consistently.

biohzrddd avatar Jul 07 '23 19:07 biohzrddd

I'd certainly be very supportive of light theme going back closer to the way it was, the 'to budget font colour' and sidebar in particular, Done.

I can't really say the little month icons being a bit darker for example. is any kind of issue for me personally. I wouldn't think the subtle convergence of multiple slightly variant shades of grey need a standalone PR. shrug

But I would certainly disagree that it is an entirely different product, or that a total rollback of large portions of the PR is needed before it warrants consideration.

In any event, one of the underlying goals of this PR is to make theming easier and more flexible in general, so I think the discussed changes to put light theme back the way it was can be made somewhat painlessly? (correct me if i'm wrong @biohzrddd).

That was absolutely one of the goals.

In @biohzrddd's defence I would also say that this change was shared many times as a draft in the discord and there were several long running discussions prior to and during its implementation for feedback before it was submitted for review here, and at that time very little comments were given.

If links to the discord reviews would help, I can post those. There were probably 3 large reviews and MANY mini reviews.

biohzrddd avatar Jul 07 '23 19:07 biohzrddd

I am indebted to @Shazib for his detailed listing of the light mode changes.

Confession - I am simply a keen user, with no understanding of the technical issues. However, it is very clear, even to me, the immense amount of work that @biohzrddd has put into this and I am grateful for that.

Another confession, I am unlikely to use a dark theme but that is just my personal preference. However, it does mean that I feel very attached to, and protective of, the current colour pallet and design of Actual. I have been using Actual since early 2019 and love it!

This may be personal to me, but whatever the rights and wrongs of a dark theme generally, the new proposed side bar colour comes as quite a shock to me and I find it anything but restful. Similarly with the green font in the "to budget" row.

Both issues fixed!

Whilst @MatissJanis comment of it being like a different product may be quite strong, I nonetheless really wish to preserve the current light theme design. I do hear the message that this presents technical difficulties but to that argument, I would respond that, as things are, it feels a bit like "the tail wagging the dog".

biohzrddd avatar Jul 07 '23 19:07 biohzrddd

Thank you very much for being so responsive in making those changes! The sidebar is certainly now a more restful colour. However, putting two Actual windows side by side (23.7.1 and Netlify, it still markedly different to my eyes from the current colour.

Kidglove57 avatar Jul 07 '23 19:07 Kidglove57

Thank you very much for being so responsive in making those changes! The sidebar is certainly now a more restful colour. However, putting two Actual windows side by side (23.7.1 and Netlify, it still markedly different to my eyes from the current colour.

Fixed. The sidebar uses: navy800: '#102a43', which is the exact same. I adjusted the other navy colors to blend with it.

biohzrddd avatar Jul 07 '23 20:07 biohzrddd

Thank you for being so receptive to feedback! It is already looking much better IMO :)

  • not 100% on this one, but I kinda like how the zero values in the budget table on master are very light gray so that they fade into the background better than the new color. Maybe this calls for a third text color?
  • the β€œ> Split” buttons in the transaction tables stand out way too much now
  • previously, the area to the left of the payee column of split transaction children matched the page background color, which helped reinforce the perception that the splits were nested under the parent transaction. (This also included not showing row separators in that area, and not showing the row hover highlight there). That’s missing from this PR.
  • Some things I like: you’ve made the balances on the accounts page, the old colors look kinda gross now :), the purple highlight colors on input fields look great, I think the white rather than blue boxes in the settings page make more sense
  • there appear to be two selection styles, one for input fields and one for other elements. How do you feel about unifying the two and having a style with a light (or dark) enough background color that the text color doesn’t need to change (like how the text selection on master works, but purple)
  • the focus indicator around the search field on the account pages is now missing, so there isn’t any indication aside from the blinking cursor that the field is focused.
  • on the payees page, all of the β€œcreate rule” buttons are purple (and the pre/default/post indicator in the editor is also purple). IMO we should treat the purple button as a β€œprimary action” and try to only have one per page/modal
  • I kinda liked how buttons and dropdowns generally didn’t have cursor:pointer on the current version, it made Actual feel more like a native app and less like a website.

j-f1 avatar Jul 07 '23 20:07 j-f1

πŸ‘‹ Wow! This looks so much closer to the Actual that I originally fell in love! Thank you so much for being receptive to the feedback!

Some more small issues (all light mode):

  • [ ] scrollbars: the old ones were more subtle whereas the new ones stand out too much
  • [ ] side nav: the collapse icon is no longer always visible (maybe that's fine? I'm like 50/50 on this)
  • [ ] budget entries: zero ("0") values - these are a bit too close to the primary color - can we make them either the original shade or just a bit more subtle than currently?
  • [ ] transaction table - green shade for positive amounts - could we make this lighter? On low-res screens it looks too similar to the primary text color we use elsewhere
  • [ ] transaction table - "cleared totals" / "uncleared totals" - the background color should be gray
  • [ ] transaction table - searchbar no longer has focus outline
  • [ ] transaction table - filter pills are significantly different
  • [ ] transaction table - autocompletes looked better in the dark shade than the new white one
  • [ ] transaction table - datepicker - months for some reason are highlighted in purple
  • [ ] transaction table - the filter popovers are pretty different
  • [ ] transaction table - table headers are in different shade - this I personally really like, but just mentioning it to have a complete list
  • [ ] schedules - primary button color shadeis different - no longer the usual brand purple
  • [ ] schedules - add new schedule modal - significantly different in many aspects
  • [ ] rules/payees - primary button color not using the brand purple color
  • [ ] rules/payees - add new rule modal also pretty different from the original
  • [ ] settings - various differences

Darkmode feedback:

  • [ ] scrollbars: can we make them solid color instead of an outline?
  • [ ] transaction table - filter popover looks.. weird, but I can't exaclt put my finger on WHAT I dislike about it; maybe it's the gray background color?
  • [ ] transaction table - autocomplete - also the background color IMO could be improved to something more darker
  • [ ] transaction table - search box missing focus outline
  • [ ] rules/payees - creation modal - the "payee"/"category"/etc options should not be bolded; also the "all"/"any" selection

Overall the darkmode looks super good! So it's mostly just some small nitpicks about it.

Could I ask one more thing? To put the light/dark toggle buttons under a feature flag. I think once we merge this - we will want to keep it as an experimental feature for 1 month to flush out any more details/bugs we spot once people start using it for their real budgets.

MatissJanis avatar Jul 07 '23 21:07 MatissJanis

Awesome work here! Dark mode is very exciting and it's looking really cool so far. Thanks for all your hard work.

As a power user who's manually entered every transaction I've ever made since I got my first credit card at the age of 18 into Actual, I just want to leave a comment about some of the color changes to the OG light theme.

description before after
reports Screenshot 2023-07-07 at 5 25 57 PM Screenshot 2023-07-07 at 5 26 05 PM
account Screenshot 2023-07-07 at 5 47 52 PM Screenshot 2023-07-07 at 5 47 55 PM

The reports page, the account page, and in general most pages feel significantly darker with the new color palette.

  • Report cards are no longer white and now seem to blend in more with the background, making them less visually obvious and making them feel "muted" and therefore uninteresting. Could we brighten report cards back up again?
  • Along with the muted theme, the new green color used for amount text in the report cards (and elsewhere in the app like cleared checkmarks in the transactions table) also feels like a negative change; the previous green color fit perfectly with the bright, cheery UI, and the new darker green color feels muted and a bit out-of-place.
    • I would add the transactions table to this list as well. Previously it was perfectly white; now it's more of a gray, and it just makes the UI feel more muted. I feel like the majority, if not all of the elements that were previously white in the light theme should remain that way.
  • I strongly dislike the change from blue to green in the report graphs; not only from an aesthetic standpoint, but also from an accessibility one.

    • The new red / green colors are significantly lower-contrast than the previous shades of red / blue, making it more difficult for anyone to visually make out shifts from negative to positive or vice-versa.

    • Red / green is an inaccessible color combination: Why Your Data Visualizations Should Be Colorblind-Friendly

      • See the graphic here:
      Screenshot 2023-07-07 at 5 37 51 PM

On the "I love this side", hiding the floating sidebar button unless hovering over the sidebar is a really great improvement, as well as the more muted appearance for the server indicator in the top right. Great changes there 😍

Cldfire avatar Jul 07 '23 21:07 Cldfire

Also one more small bug: the coloring of the selected item in the sidebar reverts back to the unselected color when you hover it

j-f1 avatar Jul 07 '23 21:07 j-f1

Thank you for being so receptive to feedback! It is already looking much better IMO :)

* not 100% on this one, but I kinda like how the zero values in the budget table on `master` are very light gray so that they fade into the background better than the new color. Maybe this calls for a third text color?

I'd rather see this as a code change where we don't even show the value when zero. The current "ghost" color fails every test possible. Happy to be overridden. image

* the β€œ> Split” buttons in the transaction tables stand out way too much now

I changed this from the positive to neutral button, which still has a border. Is that OK? I think without some kind of indication (that doesn't visually blend with the text like the right chevron), it is difficult to quickly find splits.

* previously, the area to the left of the payee column of split transaction children matched the page background color, which helped reinforce the perception that the splits were nested under the parent transaction. (This also included not showing row separators in that area, and not showing the row hover highlight there). That’s missing from this PR.

I agree on the colors -- I'll see what I can do.

The border under the date field on a split is broken in master (but fixed on mine): image

* Some things I like: you’ve made the balances on the accounts page, the old colors look kinda gross now :), the purple highlight colors on input fields look great,

I agree, the random blue felt out of place.

I think the white rather than blue boxes in the settings page make more sense

Agreed, it is clearer and brings the setting boxes forward rather than back.

* there appear to be two selection styles, one for input fields and one for other elements. How do you feel about unifying the two and having a style with a light (or dark) enough background color that the text color doesn’t need to change (like how the text selection on `master` works, but purple)

Done.

* the focus indicator around the search field on the account pages is now missing, so there isn’t any indication aside from the blinking cursor that the field is focused.

Fixed and I cleaned up the input styling a bit. We have two input types: one basic and one with content that uses the basic internally. I wish we could have the various "Filter..." inputs also have an icon, but that's a separate PR.

* on the payees page, all of the β€œcreate rule” buttons are purple (and the pre/default/post indicator in the editor is also purple). IMO we should treat the purple button as a β€œprimary action” and try to only have one per page/modal

Fixed, no more purple background. Let me know your thoughts.

* I kinda liked how buttons and dropdowns generally didn’t have cursor:pointer on the current version, it made Actual feel more like a native app and less like a website.

Removed from buttons (kept elsewhere)

biohzrddd avatar Jul 08 '23 00:07 biohzrddd

wave Wow! This looks so much closer to the Actual that I originally fell in love! Thank you so much for being receptive to the feedback!

Some more small issues (all light mode):

* [ ]  scrollbars: the old ones were more subtle whereas the new ones stand out too much

I've had trouble with these, getting both light and dark to work together. I tried out something new, let me know if it doesn't work.

* [ ]  side nav: the collapse icon is no longer always visible (maybe that's fine? I'm like 50/50 on this)

There has been mostly positive feedback on it, I think it should stay to be consistent with budget collapse/expand functionality.

* [ ]  budget entries: zero ("0") values - these are a bit too close to the primary color - can we make them either the original shade or just a bit more subtle than currently?

See my comment above on this and let me know your thoughts.

* [ ]  transaction table - green shade for positive amounts - could we make this lighter? On low-res screens it looks too similar to the primary text color we use elsewhere

Done based on previous feedback.

* [ ]  transaction table - "cleared totals" / "uncleared totals" - the background color should be gray

Done.

I'll work on the other half of your comments another time.

biohzrddd avatar Jul 08 '23 01:07 biohzrddd

Great progress and thank you for making so many requested changes so quickly!

Apologies if I have missed the below in all the other comments: Light Mode: Upcoming scheduled transactions in the transaction table have changed from the usual light grey to purple. But only partially, as the categories column is still grey. My vote would be for all the upcoming scheduled transaction columns to remain grey so that they do not stand out so much.

Dark Mode: with my existing disclaimer that I am not a great dark mode fan I did try it out. This will sound odd but I found it very "bright" and not particularly restful. Is that normal for dark mode?

Kidglove57 avatar Jul 08 '23 08:07 Kidglove57 

* [ ]  transaction table - searchbar no longer has focus outline

Fixed from J-f1 feedback.

* [ ]  transaction table - filter pills are significantly different

I reworked the pills to be consistent across the app. I found them in Rules > Edit/Create Rule > Stage, all conditional selections and MultiItem from a multi-select box such as Filter on the Accounts page, and the expanded budget balance on Accounts page.

* [ ]  transaction table - autocompletes looked better in the dark shade than the new white one

As far as I can remember, you're the first to dislike them. This may be a item to vote on as I much prefer the consistency of all drop-down menus being the same: Accounts > Filter, Budget > Category > dots > Menu, Budget > Category Name > Menu, Budget > Month > dots > Menu, and all drop-downs on Accounts > Transaction. The calendar currently has PNG for the left/right arrows, so styling on it is limited to dark backgrounds (hence the difference from other menus right now).

Another option is to switch ALL menus to the sidebar background color.

* [ ]  transaction table - datepicker - months for some reason are highlighted in purple

Fixed.

* [ ]  transaction table - the filter popovers are pretty different

Noted above discussing pills.

* [ ]  transaction table - table headers are in different shade - this I personally really like, but just mentioning it to have a complete list

* [ ]  schedules - primary button color shadeis different - no longer the usual brand purple

How do you think this should be changed?

* [ ]  schedules - add new schedule modal - significantly different in many aspects

How do you think this should be changed?

* [ ]  rules/payees - primary button color not using the brand purple color

All primary buttons should use the same purple color, this includes the month selection again for consistency across the app. Some people disliked the darker month picker color so I lightened it one shade, but that affects the buttons. I pushed it back up to match the old design, but that makes the month selection darker.

Another option that might be controversial is making the month picker a neutral button color (for light theme - light gray). We have the giant month header right under the picker anyways...

* [ ]  rules/payees - add new rule modal also pretty different from the original

How do you think this should be changed?

* [ ]  settings - various differences

How do you think this should be changed?

Darkmode feedback:

* [ ]  scrollbars: can we make them solid color instead of an outline?

Fixed in previous feedback.

* [ ]  transaction table - filter popover looks.. _weird_, but I can't exaclt put my finger on WHAT I dislike about it; maybe it's the gray background color?

master image dark-theme image Maybe this helps compare?

* [ ]  transaction table - autocomplete - also the background color IMO could be improved to something more darker

Give an example color you like and I'll try it. Related to above discussion on consistency across menus.

* [ ]  transaction table - search box missing focus outline

Fixed earlier.

* [ ]  rules/payees - creation modal - the "payee"/"category"/etc options should not be bolded; also the "all"/"any" selection

I bolded them to help with WCAG contrast. The purple on grey at lower lightness needs a bigger or bolder font.

Overall the darkmode looks super good! So it's mostly just some small nitpicks about it.

Could I ask one more thing? To put the light/dark toggle buttons under a feature flag. I think once we merge this - we will want to keep it as an experimental feature for 1 month to flush out any more details/bugs we spot once people start using it for their real budgets.

This seems overkill? If there is a mis-colored element somewhere, it won't cause dataloss. The experimental text: These features are not fully tested and may not work as expected. THEY MAY CAUSE IRRECOVERABLE DATA LOSS. They may do nothing at all. Only enable them if you know what you are doing.

biohzrddd avatar Jul 08 '23 11:07 biohzrddd

Also one more small bug: the coloring of the selected item in the sidebar reverts back to the unselected color when you hover it

Done in the last push.

biohzrddd avatar Jul 08 '23 11:07 biohzrddd

Kind of a late addition so feel free to push to a later PR.

Can I suggest that the applied filters backgounds match the Cleared/Uncleared backgrounds in both light and dark mode? This would make these elemets feel a lot more cohesive on the page.

image

carkom avatar Jul 08 '23 11:07 carkom

Great progress and thank you for making so many requested changes so quickly!

Apologies if I have missed the below in all the other comments: Light Mode: Upcoming scheduled transactions in the transaction table have changed from the usual light grey to purple. But only partially, as the categories column is still grey. My vote would be for all the upcoming scheduled transaction columns to remain grey so that they do not stand out so much.

Two issues with this:

  1. The category is a notification "pill" with its own background, not text, so it will be a different color.
  2. I can see having subdued text for "incoming" transactions, but currently there is only one code path for "incoming" transactions and there is the chance you have one that is currently "Due" or "Missed". Should those be subdued or brought front and center? I think the latter.

Dark Mode: with my existing disclaimer that I am not a great dark mode fan I did try it out. This will sound odd but I found it very "bright" and not particularly restful. Is that normal for dark mode?

I think having too dark of a theme can also cause eye strain and we have to consider having appropriate contrast for a variety of WCAG reasons. Is there any item in particular you found bright?

Comparing it with Discord's dark theme, we're perceptually darker. image

biohzrddd avatar Jul 08 '23 11:07 biohzrddd

Kind of a late addition so feel free to push to a later PR.

Can I suggest that the applied filters backgounds match the Cleared/Uncleared backgrounds in both light and dark mode? This would make these elemets feel a lot more cohesive on the page.

image

Done.

biohzrddd avatar Jul 08 '23 12:07 biohzrddd