[Enhancement] Theme: Midnight #2312
Conversation
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Bundle Stats — desktop-clientHey 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
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger
Smaller No assets were smaller Unchanged
|
Bundle Stats — loot-coreHey 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
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger
Smaller No assets were smaller Unchanged No assets were unchanged |
|
Nice. I feel like the background color should be darker but everything else looks good |
|
Currently the modal border property is commented out. If we could enable that property again, it may help with the visuals of the pop up modals against the rest of the app, even if the modals have similar shades to the base app. |
|
The color of the upcoming schedule pill seems too light. I think the other pill colors are the same as dark mode except for that one. Is that on purpose? |
|
I've been moving most of the purples to purple200. The darker purple, I thought, was harder to see. I lightened the greens on the cleared checkboxes too for the same reason. |
|
Looking back, that's one of the few were I can change just that property. I think you're right, in that it would match the Due and Missed pills better as a darker shade. |
|
There's a bug where the theme reverts to light if you set theme to Midnight then navigate to the settings page. |
|
The same bug exists with the development theme. I haven't been able to solve it yet. |
I think I found it! |
Good find! Is it possible to use the list from theme.tsx for these instead of hard coding them? Would be nice to make this easier for any future theme additions. |
I've tried several things, but I'm not sure how to go about it. Everything I've tried has caused the backend to become unresponsive. I could use a pointer. I've tried exporting 'const themes', which didn't go well. |
|
No worries. Probably better as a new PR anyway. I can forsee that the theme list could get crazy long. We'll need a clever way to manage a multitude of themes to avoid that in the future. |
I had imagined a way for users to add their own themes via the ui, then the theme logic could see the built in themes and the imported themes. That way we can let people make their own themes and not have to worry about maintaining a bunch of kinda done themes. It would also be cool if we could choose which dark/light themes get used by the system theme option. |
|
Notes:
|
That could possibly be done by adding one more combo box in the settings menu and choosing a "light" theme in one box and a "dark" theme in the other. Then the icon on the budget screen could go back to a simple toggle without a menu. Additionally, while we're talking of future ideas with themes, having the ability to drop a custom file in a folder (maybe server-files) and having the UI pick up on new theme options without having to rebuild would be nice. Though, it's all kind of separate from pulling a list of available themes from one location. |
|
Honestly, I don't see a need for the icon to be on the title bar. Most users don't have a need to change the theme on a regular basis. Most people choose a theme and then never touch that setting again. I'd be in favor of only having the theme choice in the settings page. |
I've addressed the toggles. This is what is included in the latest commit.... the background is lighter than the highlight and background. I considered this, where the color is between the highlight and background, but didn't really feel like the effect was distinctive enough. I also addressed the disabled text and icon colors: I haven't found the cashflow line colors yet.... still looking. 4th item: I've lightened the text, which uses the same variable as the icons on the right. I think it helps. |
|
Cash flow lines are still hard coded. They don't use the theme colors. |
The only reason I would be concerned about doing this is that its nice to switch back and forth quickly to compare colors between themes. Like when making/considering a change being able to not leave the page and compare colors is really handy. |
I agree, it definitely makes dev easier. However, we could easily create a dev state that allows this while developing. I don't think we should have features in the app full time just because it makes dev easier, we should solve those dev concerns separately. |
trafico-bot
bot
added
✨ Merged
* midnight updates * updates * updates * background one shade darker * change highlights to match other accents * release note * link color * variable spelling * Upcoming pill color * theme switch bug * remove development, type error * toggle background, disabled background+text * account pillboxes and icons * typecheck error
There are a few places I wanted a slightly different shade, but two different components are using the same variable.
Feel free to push PR's to this branch, especially if you know exactly what you want changed.
There's also a bug I wasn't able to sort out. The theme choice doesn't seem to be saved as a global pref. I'm not sure what's overriding it. At one point I wrote out to the console every time the useTheme() function was called. Most pages (reports, payees, schedules, etc) called the function once, but the settings page calls it 5 times. The first two calls it gets the correct theme, but by the time the 3rd call is made the theme has been changed to 'light' and that's the end result.
I left a few comments in place to remind me of what changes what. Unfortunately, I started commenting late in the process so there is a lot missing. They can be removed when everyone's happy with it.
Preview images
