Dark Mode, Color Changes and Sidebar Options - Oh My!
Hello YNABers!
Colors are a hot commodity in a budget (I’m sure no one needs a reminder on the pill colors change ;) ). This time, I think we knocked it out of the park by adding two new options - Dark and Default Themes! You’ll be able to switch between themes under the Display Theme option in the menu (by clicking on the name of your budget in the upper left hand corner).
Without further adieu, I give you…
The new YNAB Default color theme:
And, the long awaited (and much requested), Dark theme:
You may notice something missing along the left hand side of those images and no, your mind isn't playing tricks on you. With the new themes also comes a collapsible side bar! Say hello to more screen real estate along with the option to adjust the width of the inspector on the right hand side of the screen.
Everyone will still have access to the YNAB Classic color theme. So, if these new options aren’t to your tastes, that’s okay! :)
We’ll slowly be rolling out the new color palettes, and sidebar option, so if you don’t have them now expect them in the next couple of weeks.
If you have any questions, please don’t hesitate to ask here or reach out to our support team if your questions are more personal than you’d like to share. If you already have access to these new features, feel free to leave your feedback below!
-
Hey all! The new themes, and collapsible sidebar are 100% released. 🎉
You can find more details on how to Change the Appearance of Your Budget with the brand new HelpDoc. We appreciate your feedback on the new themes, and our team is looking closely at those! If you haven't yet, please let our Product Team know your thoughts. -
Apparently not available on mine yet, but AS SOON AS IT IS, I'll mess with it!
That looks nice! I'm definitely checking out the dark mode when I get a chance, and thanks for making the width of the side menus adjustable!
-
Bruce Looking forward to hearing your feedback once you have it! :)
-
-
Ooh! I like it.
-
I want!!!
-
I hate these announcements when the feature isn't available to me!
-
Superbone same here, I kept trying to find it LOL.
-
Superbone Sorry! We try to announce them before too many YNABers have access, that way you hear it here first, but it also feels a little like ruining Christmas surprises. 😅
-
Faness It's exactly like that! 😄And then every time I get a prompt to refresh my budget screen, I do it with great anticipation only to be crushed once again. 😥
-
-
Question: If the new color themes have been approved for rollout, why do it gradually and not just give it to everyone?
-
Mario P. So we can make sure things are going smoothly. You'll see them soon! 🙂
-
Thanks for the reply Nicole . I understand that, I just assumed it went through a beta phase first.
-
Mario P. These options were sent through Beta first, but since we have a small pool of Beta Testers we prefer to roll things out slowly in order to catch anything we might have missed.
-
Faness let me know if you're looking for fastidious, slightly OCD beta testers in the future. I play around in YNAB entirely too much and would love to test out features a bit earlier.
-
-
Nice update - looking good :)🤗
-
Love love love it!!! Thanks!
-
I got to see this yesterday finally! The dark mode I like except for uncategorized transactions. The yellowish uncategorized tag didn't stand out as much for me. I like parts of the new default theme as well but still can't decide which to stick with.
-
amp97 I'm digging it. Going with the new default for now. Only issue I have so far is seeing the black text on the teal background for the current budget month. It needs to be white like both of the other schemes. Just for the current month. It's black on white for the months before and after which is fine.
-
Superbone Can you let me know where you're seeing that black on teal? In the current budget month, I'm seeing white on teal (in the sidebar) and black/dark blue on light blue (in the budget).
-
Faness In current month budget. The new default is the same as classic except for the black text here versus white. How about I just show you:
vs classic and dark which are the same: 
-
Faness OK, figured it out. It's a toolkit issue. Turned it off and now it's black on light gray.
Here's the toolkit culprit:
Current Month Indicator
Changes the header bar's background color to a lighter blue when viewing the current month to better differentiate between months.
If I turn off this option then all months are the same and it's perfectly readable. Sorry for the confusion. This is something the Toolkit will have to fix.
-
Superbone Thank you for clarifying! That contrast is a bit rough there. 😥 I know this release caused quite a few issues with the toolkit, but hopefully they'll be ironed out soon!
-
-
Will it be available in the app?
-
Hi Mx Emmin !
Dark Mode is already available on the mobile app for iOS13 and Android 10 or later.
From there, Dark Mode can be enabled in your phone settings. It will come on automatically in YNAB when you switch between dark and light in your phone settings.
When not in Dark Mode, the mobile app follows the Default Theme (the Classic color scheme is not available on mobile).
-
Faness looks like I'm only on Android 9 :(
Didnt think my phone was old enough for backwards compatibility issues yet, but there we go
-
Mx Emmin i believe this is because android added additional dark mode functionality with android 10 that ynab is taking advantage of.
-
Herman yeah sounds about right
My phone is almost out of contract anyway, when I'm not paying for the device part of the plan I'll wait a year and save up for another phone
In the past I've found I can wait a year or so past contract without backwards compatibility getting unbearable
-
-
Nice to have but I’m still waiting for printing ability
-
Not got it either :(
-
I finally got it and the dark theme will definitely help me with my eyes, although I wish you could still use the bright classic bubbles instead of the blurred out ones.
-
Mario P. Well. you still technically can. Just use this Chrome extension called Dark Reader, which is totally fabulous, if I may add. It basically adds dark mode to all your web pages and is customizable in terms of how much tint you want. Blessing to the eyes if you ask me. Then turn off dark mode in YNAB and use the classic scheme that you have always used.
I would have posted a screenshot for you, but seems like Toolkit's Privacy mode is also broken at the moment, so I cannot take screenshots without exposing all my budget data. :(
-
-
Does this have the ability to widen the left sidebar or just collapse it?
-
Cobalt Praetorian Yes, you'll be able to customize the width.
-
Cobalt Praetorian Both. 🙂
-
-
Just got the new theme options. I LOVE the new look!
-
Still nothing for me. :(
-
Sadly, my old eyes can't read white on black - it becomes a 3D effect with my glasses, and without my glasses - well, I can't see anything. So thank you for keeping the default!
-
Natalie Oates So sorry to hear that is difficult to read! I'll pass that on.
-
-
I really like the new themes! Especially the "Default" one... except for one thing that I really miss from the Classic theme, and that's a higher contrast between category groups and categories. It might sound small, but I scan up and down in my budget all the time, and having that clear visual separation between categories really helps me to see and understand my budget and where things are going. In the new theme, categories and category groups are very close in shade, so they all blend together visually and make things harder to understand, and add a level of cognitive load to distinguish between them.
I played with the stylesheet a bit, and even a very small change would really improve the accessibility, while still fitting in with the light theme. I've included screenshots below to show what I mean, and I hope you'll consider making a similar change to the theme to improve readability.
The element I'm talking about is .budget-table-row.is-master-category background-color:
1. now: #f9f8fb
2. tweaked to match the colour of header_background (the header element at the top with the month) #f2f2f7
Thank you!
-
Faness Emmavescence I'm also finding the lack of contrast difficult.
I love the dark blue but find the grey of the header, inspectory, category groups and £0.00 bubbles too close to the white elsewhere. It just needs a little more differentiation and ideally for them not all to be the same palest of pale grey. It's all too much of a muchness.
It doesn't help that on the accounts tabs I have the Toolkit function of greying alternate lines switched on. I'm used to this from accounting and it really helps my eyes. Unfortunately this is the same grey as used everywhere else and my eyes get lost. I appreciate that's not an issue for YNAB.
One thing from the Toolkit that I would dearly love to be included in the native app is for the header for the current month to be differentiated in some way from the other months.
None of these are dealbreakers, I can cope with things as they are in either new or classic but they would enhance the experience. -
Emmavescence I agree. It's not enough contrast.
monkeyhanger Yes, I like that current month header difference from the toolkit as well. Had to turn it off for the time being because it's now hard to read (unless they've since fixed it).
-
Emmavescence monkeyhanger Superbone Thank you for sharing your thoughts here! I had similar feedback for the category group headers (believe it or not, they're darker now than they were in the pre-beta). I think a bit more contrast wouldn't hurt in those areas. If you haven't already, please let our Product Team know your thoughts.
-
-
Perfect shade of blue - VERY classy. I was never a fan of the teal - this really rocks!
-
Steel Blue Deer Glad to hear you like it! The new default is my favorite, too!
-
-
While we're waiting for further improvements, here is my workaround for the category group contrast problem. On Windows 10, you can insert emojis by clicking on them in the Touch Keyboard option in the system tray.
-
Granny Bogle Oooh, why hadn't I thought of using emojis here?! They're a vital part of my various productivity systems in Todoist and OneNote, so I should definitely bring them to my YNAB as well - thanks for the tip! 😀
-
Emmavescence I wonder if there’s a way to do this on a mac...? This is brilliant
-
Khaki Griffin
This should be possible to do from all devices even if they don't have en emoji keyboard. Just use Emojipedia and copy/paste. But specifically for Mac, Apple has a support article about this.
And for those using Windows 10, an alternative to using the touch keyboard is to use the keyboard shortcut Windows button + . to bring up the emoji board.
-
This problem has been fixed by YNAB. The master category rows are now a different color. But the emojis are fun!
-
Khaki Griffin This article can help you add emojis to your budget!
-
-
How do I get the numbers beside the categories back? Not sure why you would remove the 'at-a-glance' function to see all the account balances at once.
Also, still waiting for running balances on Mobile.-
Drew S. what do you mean numbers beside the categories? Everything that was there before the update is still present, just in different colors and resizable.
-
Tobias
Before
After
-
Drew S. Try turning the toolkit off. That is not the way mine looks without it.
-
Drew S. yeah I still have that. Do you have the toolkit? One of the features might not be compatible with the new design yet.
-
Tobias , Herman , that fixed it. Thank you.
-
Herman It's also not the way it looks for me with the toolkit. I wonder what the offending toolkit option is?
-
-
I'm a huge proponent of dark "moding" everything so it's great to see that it's finally available for YNAB as well. I do however have some feedback regarding the choice of text color in the "Available" column in the budget.
I'd prefer white text in those green, orange and red bubbles as the increased contrast makes it easier to read. It's also how it is in the iOS app so it would make it consistent between the platforms.
The nuance of the green, red and orange would probably need to be tweaked a bit for optimal readability. If I use the Dark Reader browser addon it looks like below, and there it's only the orange color that would need to be darkened a bit to a make it work.
I've sent this feedback via the link below as well but was not able to provide any images there so I'll just post them here instead.
https://youneedabudget.typeform.com/to/Pt6cek -
Very nice! It'll take a bit to get used to, but it looks great. :-) I would love to have a quick switch button to transition between light and dark mode (e.g., to stay on light mode normally but to switch to dark mode briefly if checking the budget at oh-dark-thirty in the morning) but I'll mention that to the feature request team.
Well done!
-
dhooper I love that idea! It reminds me of the auto-brightness adjustment on phones. Not that I'm sure linking to that setting is possible through the app (my development knowledge is challenged at best), but having it auto-adjust would be lovely!
-
dhooper Faness
I think this should be possible to automate by reading the OS setting by using the CSS feature prefers-color-scheme - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme.
I know that 1Password uses that setting for their blog and they have some more info in the blog post below:
https://blog.1password.com/from-dark-to-light-and-back-again/
The way to automate it (at least on Mac - https://support.apple.com/en-us/HT208976) is to use the OS setting to autoswitch based on time of day (just as on iOS). To my knowledge Windows doesn't have an option for autoswitch...yet, but the browsers can at least read the setting.
EDIT: How do you create links like the one below in this forum? When I click on the add link button it just asks me to enter the link but doesn't give me a choice to enter what the text should say. I tried using the Markdown method above but that didn't work, maybe I should try HTML?
-
Peter Ooo, thanks for sharing those links! It sounds like there may be a hurdle with parity between operating systems, but still possible!
To create links, type out what you want the text to say, then highlight it with your mouse, then select the add link button - like this. :)
-
-
Greetings; newbie and need help! The top bar was dark blue, but now its grey (I think something I selected in the toolkit but I can't find it). Anyone know how to change it back? I can change the current month to a "lighter blue" but text is black so its difficult to read, and the rest of the bar remains grey (see attached image). Anyone know how to fix this? Thank you ynab community! :)
-
Hi Khaki Griffin !
You're right - this is an issue with the toolkit. If you disable the add-on, the colors will go back to what you were seeing before. If you enable the toolkit features one at a time it should pinpoint which feature is causing the issue.
-
Khaki Griffin Under the "Budget" section of the toolkit, it's the "Current Month Indicator" I believe that's causing your issue.
-
Bruce Thank you for sharing! Committing that one to memory. :)
-
Bruce Yep, it is. I had the same issue. Turn it off and it's no longer highlighted but at least it's readable.
-
