Add Dark Mode and use OS defaults

[MrLuxuri]

UPDATE: we've had a few more requests for this so I'll keep the initial user request below but clarify requirements:

1. Designs are here: https://www.figma.com/file/UNczd6Jq3zce0BwHF079cx/Dark-mode?type=design&node-id=372-5007&mode=design&t=Rsw39ZyrhxfL80fg-4 Latest: https://www.figma.com/design/8R3jXuoUxhNyczcClFTrDm/Community-settings%2Fswitcher-%2B-dark-mode-%2B-prototypes?node-id=1085-24683&t=4uahpQH217K70L19-0
2. Desktop is the immediate priority for one of our early adopters so we should focus on desktop first and release that before thinking about mobile.
3. It does not have to be perfect. If the left sidebar and the message area works well in dark mode and nothing else is broken, that counts as success.
4. Ideally this would detect the system settings and have a manual setting for light/dark/auto with auto being the default (See Electron docs: https://www.electronjs.org/docs/latest/tutorial/dark-mode) but I'm open to whatever approach is simplest, from a command line preference, to a setting, to only auto-detect with no settings screen (this might be best for now because it will "just work" and it doesn't require any settings screens.)
5. Our early adopter is on Ubuntu 22.04 LTS. If it works there and isn't broken anywhere else, that's great.

Initial user request follows:

---

Please add Dark Mode and make it default, while the light theme can be optional that users can then switch to. Here is why.

Dark mode is simply much more popular widely among users even though Light theme is also used these days, but statistically speaking, there are way more dark mode users than light mode users on not just many popular platforms such as reddit, discord, twitter and etc but on smartphones and other devices itself. (Here is another source)

Dark mode is also considered better for your eyes, posing less strain and helps reduce blue light exposure. Another interesting fact is that even though Discord first orginally came with light mode, and later added dark mode down the road, but nowadays the majority also use dark mode on discord.

Desclaimer: This is not a request to remove light mode, but add and make dark mode default because that's the trend but light mode can always be another option that users can instead opt for through settings!

[holmesworcester]

@MrLuxuri do you value dark mode on mobile too, or just on desktop? Do you plan on using Quiet actively on mobile?

I think it would make sense to do this desktop-only first.

Would you want it to obey the OS-defaults for dark/light, be user-configurable, or both?

[MrLuxuri]

@holmesworcester I basically use dark mode everywhere haha, on github, duckduckgo, browser, my iphone, all social media apps including discord, twitter and etc. And yes, I do plan on getting quiet on mobile at some point, especially once server discovery and being able to join multiple server becomes a reality.

Would you want it to obey the OS-defaults for dark/light, be user-configurable, or both?

Honestly I wouldn't even mind if it's only dark mode haha, I think statistically, there are way more people who use dark mode compared to light mode, especially in social media apps like twitter, instagram and discord, I think white mode gives this old school professional vibe which is what slack mainly targets, professional workplace teams, but quiet can target discord here, because discord has a much more broad aspect here (welcoming all kinds of communities and not just a platform for professional work/teams) and even if discord first came with light mode and added dark mode later, afaik only 1% of the userbase even use light mode on discord today.

To answer your question, my suggestion would be, use dark mode as default, and have a "light mode toggle" on settings, because the majority in the world do use dark mode, so imo it certainly earns the default theme position while light mode can always be toggled for the rest who still use light mode.

Maybe as we develop, OS-defaults can be an option as well, but If I am being honest, I know some friends who have their OS defaulted to light mode NOT because they want it that way, but that is how their phone came out by default and they don't even realize they can change that, though the have manually changed to dark mode on many individual apps, while others like discord or Guilded come with dark mode as default. (Guilded does not even have light mode).

[holmesworcester]

Great. So dark mode by default and ignore the OS. Which of these designs do you like the best? (We did these designs a while ago when the app was still based on Zcash and called "Zbay", so please ignore that)

https://www.figma.com/file/UNczd6Jq3zce0BwHF079cx/Dark-mode?type=design&node-id=9-306&t=99uqNUQTFbeE6U55-4

[MrLuxuri]

@holmesworcester Here is a design I've put together just to show you the colour scheme that I think would fit well for Quiet.

On top of every colour, I have included colour codes as well so that you will be able to replicate them on your side. I feel like the current purple Quiet uses is too much like Slack, while the gray theme looks exactly or atleast too much like discord, this dark theme scheme I have shared above uses Violet while the background in the messages uses pitch black and it should give quiet a more unique look and feel, this also makes it easier to read messages (in the message section) (text in white) off the pitch black rather than dark grey.

Maybe we can even have this as the new branding scheme too, I think that would make sure Quiet has it's own unique branding and identity, not just on the quiet client, but on our official homepage website as well for example. This will also mean while Quiet is discord/slack competitor, it won't come off as just being a competitor to one, currently while discord is mentioned on github, it comes off too much like slack. It also won't be good if it looks too much like discord, it should be it's own thing when it comes to that, while functionality can use inspiration from both competitors!

[holmesworcester]

@MrLuxuri (and others who have requested Dark Mode) -- What do you think of these designs?

https://www.figma.com/file/UNczd6Jq3zce0BwHF079cx/Dark-mode?type=design&node-id=330-14554&mode=design

[holmesworcester]

Just noting that I've received positive feedback on our designs from a few Dark Mode fans.

[holmesworcester]

One thing to resolve from user feedback (user wanted a colorful sidebar in dark mode): https://www.figma.com/file/UNczd6Jq3zce0BwHF079cx?node-id=372:4945&mode=design#602649945

[deobald]

Hi @holmesworcester ! Thanks for reaching out. I figured I'd post my thoughts here, rather than email.

For those of us who require dark mode for accessibility (rather than aesthetics / preference), a colourful sidebar is not helpful, and in fact may prevent usage. The mock-ups you have in the Figma you sent and the one in this issue (just above), are both wonderful. An slightly off-black, as you have, is often perfect for accessibility and the colour scheme you've chosen is neither too bright nor too dark. The problem with those, respectively, is that "too bright" can cause eye strain in those of us with light sensitivity and "too dark" can cause eye strain for people who struggle to distinguish colour.

Looking great! I can't wait to see it in action. Best of luck! ❤️

[holmesworcester]

Super helpful feedback! I'm sure the user who requested a colorful sidebar in dark mode will understand us putting accessibility first!

[josephlacey]

Hey @holmesworcester, progress toward this feature is moving along. I've gotten a Color Scheme settings tab implemented that includes three options: auto, light and dark. auto is the default. That setting is integrated with the State Manager, and all this is working fine.

Two questions about implementation have come up. The first is about the dark mode color palette listed on the Figma designs. As best as I can these are the colors used,

Channel
Background	#151515
Title	#efefef
Subtitle	#a0a0a0
Horizontal Rule	#2f2f2f
Text	#efefef
Timestamp	#909090
Create message border	#333333 (black)
Create message text	#a0a0a0
Three dots	#a0a0a0

Sidebar
Background	#ffffff (trueBlack)
Title	#cccccc
Text	#b2b2b2 (lightGray)
Channel highlight	#333333 (black)
Channel highlight text	#c1c1c1
Three dots	#575757

Can you confirm these? Only those with a parenthetical have an existing definition in the theme color palette object, so I would need to add the remaining ones. If y'all have a naming convention in mind, I can follow that, or I can come up with one. Or if these colors aren't quite right and they should follow the existing palette, let me know where they differ.

The second question is about invoking the color scheme setting. The code currently defines the markup style inline in various components, e.g. the background color for the main channel list as white. One implementation could be update all the components where the markup style is inline and swap it out for a conditional that checks the color scheme setting, and then render accordingly. Another could be to implement the conditional logic in the theme definition and change theme.palette.color.white used in the components to theme.palette.color.background where the value of the color is set based on the setting. Or maybe there's a third way? Not sure which would help more easily follow the Electron recommendation for using the prefers-color-scheme media query for the auto option. Looking for some guidance here.

Happy to jump on Quiet or a video call and discuss the best option if that's easier.

[holmesworcester]

@Kacper-RF @siepra @EmiM any thoughts on the best way to do this?

When I looked at this, it looked like the best thing to do would be to have 'color' names in the components that are semantic rather than names of colors, and then modify these names by switching the Material UI theme.

@josephlacey for extracting the colors, I'm sure there's some way to do this in Figma. It's possible to export CSS for Figma selected elements in the context menu, for example, and there should also be an inspector for individual elements. Maybe I'm misunderstanding something but what happens when you try those two things?

[deobald]

I'm not sure if it helps at all, but this is how we do it based on Flutter's naming conventions:

https://github.com/pariyatti/mobile-app/blob/fdf2539628071cbcb74ac57ec50519e9ae776053/lib/app/app_themes.dart#L44

Stuff like onTertiary isn't exactly semantic (with respect to the app), so you folks may find you have a better naming scheme. That said, we do frequently reuse colours, so narrow semantics (say, messageBorder) might leave you with names you abuse. ;) That may also be fine at this early stage, though.

Good luck!

[josephlacey]

@josephlacey for extracting the colors, I'm sure there's some way to do this in Figma. It's possible to export CSS for Figma selected elements in the context menu, for example, and there should also be an inspector for individual elements. Maybe I'm misunderstanding something but what happens when you try those two things?

I see, yeah there's a developer mode that provides all this including different export formats. Reference tables,

Channel
Background	#151515
Title	#EFEFEF
Subtitle	#7F7F7F (darkGray)
Three dots	#7F7F7F (darkGray)
Horizontal Rule	#F0F0F0 (veryLightGray)
Text	#FFFFFF (white)
Timestamp	#999999 (gray40)
Create message border	#3E3E3E
Create message text	#A0A0A0

Sidebar
Background	#000000 (trueBlack)
Title	#FFFFFF (white) 80% opacity
Three dots	#FFFFFF (white) 66% opacity
Text	#FFFFFF (white) 70% opacity
Channel highlight	#FFFFFF (white) 20%
Channel highlight text	#FFFFFF (white)

[holmesworcester]

@agiledev24 -- This is another important feature that we currently don't have time to work on internally. Lacey ran out of time to work on it but did some initial research above. Would you like to pick this up and run with it? You could start on desktop and then move to mobile.

[holmesworcester]

@agiledev24 are you still working on this? another volunteer was interested in working on it!

[kingalg]

@mike-kiss, great job with implementing the Dark Mode. I encountered some OS-specific issues that will either be handled in separate issues or left for now.

@ikoenigsknecht, I know you're working on at least one of the issues. Can you please link/mention it here so it can be connected to the main task for the Dark Mode if needed?

In 2.2.1-alpha.0 (ios - 378):

Dark mode is synched with night mode on a computer. After the mode on the computer change from day to night user needs to restart app in order to trigger dark mode on Quiet:

• on Linux
• on MacOS

Dark mode doesn't turn on regardless of the mode on a device:

• on Windows 11
• on ioS

To be confirmed (I don't have alpha version yet 07/12/2024):

• on Android

[kingalg]

Version: 2.2.1-alpha.1

MacOS, Windows - fully working. Whenever the computer's mode is changed, Quiet automatically switches between dark and light mode.
Linux - Quiet is in the mode set on the computer when the app is opened. Changing the mode requires restarting the app.