diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png
index 4af9f3b1f3b78e63a600882800ea11e41b2f444f..f0e1214bfa344f163578ea64d9b71fb3fec4461a 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png
index 0c137fba57cd9a4b1dff334904fae0a9296c8f4c..aa0e16130ebd40b292dca0175ae91a5004e35f9d 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png
index d6ff909b5f4ae63541fa3b1fc0ce69bdc44b3fa0..deeef06f1010d0e7ab323029cc0cbdc4d1745701 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-4-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-4-chromium-linux.png
index 038ee0a7e3d8d7f64ce03732f3b9311be4b1cbed..7ef97030109a016f2898ca1a89ea9915843ba914 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-4-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png
index 588a0436b3eaea7850beba68633734fc7e9b856d..0e8cbf78963d5d27d5db6561212a805499c5c14c 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png
index 659b70de927dc5778b4a5fa7fbb6cd2f94f1c036..e10419ee098a26e5ab4f9f7d771b21761872d924 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-1-chromium-linux.png b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-1-chromium-linux.png
index bcfcabe4f91abb03034661887d7632325c0e6e33..5c8eb9c0f05affe0f38eafa8d5c6dfbed2ea0d20 100644
Binary files a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-1-chromium-linux.png and b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png
index bf4a7ada07d978e22e4b8c9df175b68e87ce7351..a8679f1cb2f8bfa63f199d760ae414783a2725ee 100644
Binary files a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png and b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-1-chromium-linux.png b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-1-chromium-linux.png
index a3b5bae3a484acf4919771a50317e34341179a89..1bd69e7efb432177a79473b2d2ea3ce7c9a65016 100644
Binary files a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-1-chromium-linux.png and b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png
index f78d7062d7c59ce23237cc7026cc3927acb5d872..b209de1304733a6e264a93afd5893b8b12337d6a 100644
Binary files a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png and b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png
index 980c2a925867274ca4bfc482fc566aa2f36840d1..cad9d8764e919220c3f94c44109c892586a1b05d 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png
index 9b7f03110b2919a1d1101c51fd58b43ec6be16b3..d52d2ef3024a287a5c89378a5d56a7053110dc45 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png
index 47f6d48715ab9d28f9157dd231501bb3b478c647..139319f84e7379f105b64c7217667426fbffbca5 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png
index 0139a15e0b7b06dc2ff8f2a26cf4b4ffc1aed30d..cf8cc81acb3fc302af881eaa54adb7b7de78c53c 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png
index 31570e97febba257999a0bc52bfebfabf2c1c103..855c0492000c8e397450376a54876c2925d7e971 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png
index 3b532e61bfafcc6e48549d8db849ed586675e22a..6c96ff58fc524969b00ff296e70e1320b15c215f 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png
index 662770adf74efd8b7afa804836d474930002bccf..be560acdecc57f69b52aa450b0af526c9c15fae8 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-1-chromium-linux.png
index f455f019b352b2fd4b58e0f46b83c4384d006bb6..6f6d2b77651e1a073e7a5e34a5eb5c48851a0924 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png
index 999ecf4a0da732f3dcc58668c82d08bf80541ac5..22592a865c0847c9b00720fbbec9ef3cbd78d7fb 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png
index a04540d758caac7e66a1f76372e879d20abb320e..8fbbd955bbd56e7f2ffb38bf679f0b3756347b3f 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png
index 803866aea07934232f27d7086497d65afb99ca98..ac3403266d9aad7953d76ca1aff6d8c5250b6add 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png
index 06b488aaabf4f2c3e1feb8b0e982a3e073700173..d300fd49bcdedd99e32a9918d2fc22815692791a 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-4-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-4-chromium-linux.png
index 769086806c6fa8c57e12ca6299dcfbb0d11be407..2396e49f80a123dc167205659560c7ac7bc47778 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-4-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png
index 6617ff3be17cab9afea6669912a1dbc0bcfd257c..080129848cb967c00fb2d6a2da341922e9b3a7ea 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png
index 93dd7d27a18628ac462f551dca494b79419799f9..145ae6c4e2db2af9b3985bcfec7a2f9a85805603 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png
index 68c088a723ed0a87190e56046ff3d5f8ad9477a2..228966369f493d848d71b196a4d71b9524edbf96 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png
index 395c7da6bae43ba1f3b21d9e6054264e32755fb2..ae6e745c883925890aeb3967ab8ea0ad3ccfc5a4 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png
index d7058696b54500cab2f75ba396e360fd16dadb9b..485643e0bc115e9bc11b154abc0796af3e546757 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png
index a3be0d7a75531fdbc85b0cf9699a0fa04c095ece..cbbfff10ce145c7c16004ae8c6bf43646d8794be 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png
index a97b46cf676658d14b12b74b2f0fa340fb0cce79..f77ecdb876a64c47f06d6e8ec87dc407d0817c30 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png
index 6c6b9881c60b6ff969288b00ec0f67ff40e819a5..6f88e95e1ba61829aa3158279cca35c30a1bf441 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png
index 002faf486c4e6bc969a3b6243a9b6bd12ad74507..2a39ba97e8e8760bbcc641d3a5fe603e052424d6 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png
index 3f6f05d6a4e9c86334a95a1c5b9b98ff5e0ca1f2..196aaad9f25d9cab226985d6ffce2f84e51ad221 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png
index 08d86651f31bb3af0ff5ec2b2cee214cf7927d48..75efb49ff19de0dbfee0bc375c9bcea2be4f8174 100644
Binary files a/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png
index 139d99205653ef418d463127f60642a73f6ea190..d21b4d9bcf57b9d6b835947bf89b1a36e544aed0 100644
Binary files a/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-1-chromium-linux.png
index 67f89acb8aa68e862e24daba1b1b09e6f1ea4b44..b506c1fe5c5b06adb4eca7f5907c42a5a96a4cb7 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png
index d53516e010b0899522d59d7c29e57442b028910f..4c69230723ec9932d0245855bdcb7d74e5b2b676 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-1-chromium-linux.png
index bd42f3105de3872a1a4017828562949e5569bd4f..9aedf5940e204e2e8da4205cdea3627e8f2ba741 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png
index 15a4ef9d58b2ee1f49115816f3e9e7e2d54dc81e..f6afed08017aff80a289047924be1a81c8928840 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-1-chromium-linux.png
index f3cc8b6929a4024ecaa5cf43c7814b8d2c78abe8..79c8ba76e2feffcb29642daf50ea558031378e8a 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png
index 2508eea38df206727d3ee609e31559029ebef0b0..47b63205f21f352924f162eaf04a4060fbde3408 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-5-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-5-chromium-linux.png
index 2cf7d2efa0f8e7c9d987d7ab984257938761e663..a24e3fb93d765c1bc34b11dc629c5ff00e493d17 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-5-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-6-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-6-chromium-linux.png
index eef81cb56f86945585f1501a9e7bca1e5c90dc45..d26a9e70d4df4584bdee14cd11270651541ce7d5 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-6-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-5-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-5-chromium-linux.png
index 44f86808a6fbb50cbc7ccc6126b0a02520126f3c..c6d9c9d6a89e702578df24323e31f802c9234452 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-5-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-6-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-6-chromium-linux.png
index 3811cc4271e3bce1b64e87d01d0dcfbd4c592753..107b72e8386c52b0c11241f43b894092f3601378 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-6-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-6-chromium-linux.png differ
diff --git a/packages/desktop-client/src/components/ThemeSelector.tsx b/packages/desktop-client/src/components/ThemeSelector.tsx
index e909e4d0e6112751b17a088f8391b65f5577d3f6..be05f21d69f4854f308449f18b1f8084c39911df 100644
--- a/packages/desktop-client/src/components/ThemeSelector.tsx
+++ b/packages/desktop-client/src/components/ThemeSelector.tsx
@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import type { Theme } from 'loot-core/src/types/prefs';
import { useActions } from '../hooks/useActions';
import MoonStars from '../icons/v2/MoonStars';
import Sun from '../icons/v2/Sun';
+import System from '../icons/v2/System';
import { useResponsive } from '../ResponsiveProvider';
-import { type CSSProperties, useTheme } from '../style';
+import { type CSSProperties, themeOptions, useTheme } from '../style';
import Button from './common/Button';
+import Menu from './common/Menu';
+import { Tooltip } from './tooltips';
type ThemeSelectorProps = {
style?: CSSProperties;
@@ -15,24 +20,41 @@ type ThemeSelectorProps = {
export function ThemeSelector({ style }: ThemeSelectorProps) {
const theme = useTheme();
const { saveGlobalPrefs } = useActions();
+ const [menuOpen, setMenuOpen] = useState(false);
const { isNarrowWidth } = useResponsive();
+ const themeIcons = { light: Sun, dark: MoonStars, auto: System } as const;
+
+ async function onMenuSelect(newTheme: string) {
+ setMenuOpen(false);
+
+ saveGlobalPrefs({
+ theme: newTheme as Theme,
+ });
+ }
+
+ const Icon = themeIcons?.[theme] || Sun;
+
return isNarrowWidth ? null : (
<Button
type="bare"
aria-label="Switch theme"
- onClick={() => {
- saveGlobalPrefs({
- theme: theme === 'dark' ? 'light' : 'dark',
- });
- }}
+ onClick={() => setMenuOpen(true)}
style={style}
>
- {theme === 'light' ? (
- <MoonStars style={{ width: 15, height: 15, color: 'inherit' }} />
- ) : (
- <Sun style={{ width: 15, height: 15, color: 'inherit' }} />
+ <Icon style={{ width: 13, height: 13, color: 'inherit' }} />
+ {menuOpen && (
+ <Tooltip
+ position="bottom-right"
+ style={{ padding: 0 }}
+ onClose={() => setMenuOpen(false)}
+ >
+ <Menu
+ onMenuSelect={onMenuSelect}
+ items={themeOptions.map(([name, text]) => ({ name, text }))}
+ />
+ </Tooltip>
)}
</Button>
);
diff --git a/packages/desktop-client/src/icons/v2/System.svg b/packages/desktop-client/src/icons/v2/System.svg
new file mode 100644
index 0000000000000000000000000000000000000000..eff1fe2a0912adeeba67541e6faa3e8156d39c73
--- /dev/null
+++ b/packages/desktop-client/src/icons/v2/System.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H13Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/desktop-client/src/icons/v2/System.tsx b/packages/desktop-client/src/icons/v2/System.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..65c038837c823936f2d5313baa57545ab8b3e968
--- /dev/null
+++ b/packages/desktop-client/src/icons/v2/System.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgSystem = (props: SVGProps<SVGSVGElement>) => (
+ <svg
+ {...props}
+ xmlns="http://www.w3.org/2000/svg"
+ fill="currentColor"
+ className="bi bi-system"
+ viewBox="0 0 24 24"
+ style={{
+ color: 'inherit',
+ ...props.style,
+ }}
+ >
+ <path
+ d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H13Z"
+ fill="currentColor"
+ />
+ </svg>
+);
+export default SvgSystem;
diff --git a/packages/desktop-client/src/icons/v2/index.ts b/packages/desktop-client/src/icons/v2/index.ts
index a27e73a12f2bc362dfd606715753868dcd9e5f01..d4f3d59295193bf1d155b3359a04803e64922f6c 100644
--- a/packages/desktop-client/src/icons/v2/index.ts
+++ b/packages/desktop-client/src/icons/v2/index.ts
@@ -38,6 +38,7 @@ export { default as SearchAlternate } from './SearchAlternate';
export { default as SettingsSliderAlternate } from './SettingsSliderAlternate';
export { default as Subtract } from './Subtract';
export { default as Sun } from './Sun';
+export { default as System } from './System';
export { default as UncheckAll } from './UncheckAll';
export { default as UploadThickBottom } from './UploadThickBottom';
export { default as ValidationCheck } from './ValidationCheck';
diff --git a/packages/desktop-client/src/style/theme.tsx b/packages/desktop-client/src/style/theme.tsx
index 322de92bf3410947893b69b1d0da8345c8e34801..252187a4ed5b7f6b756ca9a0352478f6a4281796 100644
--- a/packages/desktop-client/src/style/theme.tsx
+++ b/packages/desktop-client/src/style/theme.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { isNonProductionEnvironment } from 'loot-core/src/shared/environment';
@@ -10,6 +11,7 @@ import * as lightTheme from './themes/light';
const themes = {
light: { name: 'Light', colors: lightTheme },
dark: { name: 'Dark', colors: darkTheme },
+ auto: { name: 'System default', colors: darkTheme },
...(isNonProductionEnvironment() && {
development: { name: 'Development', colors: developmentTheme },
}),
@@ -25,7 +27,47 @@ export function useTheme() {
export function ThemeStyle() {
const theme = useTheme();
- const themeColors = themes[theme].colors;
+ const [themeColors, setThemeColors] = useState<
+ typeof lightTheme | typeof darkTheme | undefined
+ >(undefined);
+
+ useEffect(() => {
+ if (theme === 'auto') {
+ function darkThemeMediaQueryListener(event: MediaQueryListEvent) {
+ if (event.matches) {
+ setThemeColors(themes['dark'].colors);
+ } else {
+ setThemeColors(themes['light'].colors);
+ }
+ }
+ const darkThemeMediaQuery = window.matchMedia(
+ '(prefers-color-scheme: dark)',
+ );
+
+ darkThemeMediaQuery.addEventListener(
+ 'change',
+ darkThemeMediaQueryListener,
+ );
+
+ if (darkThemeMediaQuery.matches) {
+ setThemeColors(themes['dark'].colors);
+ } else {
+ setThemeColors(themes['light'].colors);
+ }
+
+ return () => {
+ darkThemeMediaQuery.removeEventListener(
+ 'change',
+ darkThemeMediaQueryListener,
+ );
+ };
+ } else {
+ setThemeColors(themes[theme].colors);
+ }
+ }, [theme]);
+
+ if (!themeColors) return null;
+
const css = Object.keys(themeColors)
.map(key => ` --color-${key}: ${themeColors[key]};`)
.join('\n');
diff --git a/packages/loot-core/src/server/main.ts b/packages/loot-core/src/server/main.ts
index 851f2a601d72e71f6619db2e674bd81290eef940..384500214a2f988dbf3a6a7888d2e27651d162c6 100644
--- a/packages/loot-core/src/server/main.ts
+++ b/packages/loot-core/src/server/main.ts
@@ -1384,7 +1384,10 @@ handlers['load-global-prefs'] = async function () {
autoUpdate: autoUpdate == null || autoUpdate === 'true' ? true : false,
documentDir: documentDir || getDefaultDocumentDir(),
keyId: encryptKey && JSON.parse(encryptKey).id,
- theme: theme === 'light' || theme === 'dark' ? theme : 'light',
+ theme:
+ theme === 'light' || theme === 'dark' || theme === 'auto'
+ ? theme
+ : 'light',
};
};
diff --git a/packages/loot-core/src/types/prefs.d.ts b/packages/loot-core/src/types/prefs.d.ts
index 0cad4272ef1c5093c35ec392a85c949a6f20f739..5cb3ceee36451701300231e7260f668ec060072d 100644
--- a/packages/loot-core/src/types/prefs.d.ts
+++ b/packages/loot-core/src/types/prefs.d.ts
@@ -53,7 +53,7 @@ export type LocalPrefs = Partial<
} & Record<`flags.${FeatureFlag}`, boolean>
>;
-export type Theme = 'light' | 'dark';
+export type Theme = 'light' | 'dark' | 'auto';
export type GlobalPrefs = Partial<{
floatingSidebar: boolean;
maxMonths: number;
diff --git a/upcoming-release-notes/1906.md b/upcoming-release-notes/1906.md
new file mode 100644
index 0000000000000000000000000000000000000000..32868386f1543e01c759ff63769f6e7e9d340c14
--- /dev/null
+++ b/upcoming-release-notes/1906.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [spezzino]
+---
+
+Add support for automatic theme switching based on system theme
\ No newline at end of file