Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

User should be able to enable/disable dark mode in settings #2583

Open
holmesworcester opened this issue Jul 29, 2024 · 7 comments
Open

User should be able to enable/disable dark mode in settings #2583

holmesworcester opened this issue Jul 29, 2024 · 7 comments

Comments

@holmesworcester
Copy link
Contributor

holmesworcester commented Jul 29, 2024

Right now we have a working dark mode, but it depends on detecting the OS dark/light mode setting and on some platforms (some Linux distros specifically) this does not work.

We'd like users to be able to set it in the app. See designs: https://www.figma.com/design/VT7uPXCIfmI9tbyhiAMhhu/Change-theme-(dark%2C-light%2C-system-modes)?node-id=637-470&t=WzGBAFFoIhIF72sm-0

This should override the detected OS settings if "dark" or "light" is selected. The default should be for it to depend on the OS setting.

ACCEPTANCE CRITERIA:

  • a "theme" item in settings has three settings
  • if set to "light" then Quiet will use the light theme
  • if set to "dark" Quiet will use the dark theme
  • if set to "system" Quiet will use the system theme, if detected.
@holmesworcester
Copy link
Contributor Author

holmesworcester commented Jul 31, 2024

It's kind of janky for the user to set it per community but I think that's fine?

Autodetect can be an option. It might be greyed out on Windows.

@jgaylor
Copy link
Collaborator

jgaylor commented Jul 31, 2024

@holmesworcester here's the Figma for draft 1.

  1. Includes mobile: You mentioned we only need this for desktop, but I added mobile for good measure, and because the other apps I looked at deem it worthy.
  2. Theme: calling this section "Theme" seems right to me if we don't provide any other customization at this time. I can see this being grouped under other categories like "Appearance" or "Advanced" when we have other things. For now it's less clicks to get here. "Appearance" also works as that's what I usually look for when trying to find this setting. WDYT?
  3. Icons: A tangent, but I think we should probably add icons to the Community settings. It's growing, and harder to skim now. I think this would provide a nice visual cue for scanning, but needs to be applied to all.

@holmesworcester
Copy link
Contributor Author

Looks great!

@jgaylor
Copy link
Collaborator

jgaylor commented Jul 31, 2024

No thoughts on item 3?

@holmesworcester
Copy link
Contributor Author

On item 3 I think we can wait until we've implemented enough of these options for it to require more scan-ability.

@holmesworcester holmesworcester moved this from Backlog - Desktop & Backend to Design - Awaiting Internal Feedback in Quiet Dec 4, 2024
@holmesworcester holmesworcester added the good first issue Good for newcomers label Dec 16, 2024
@holmesworcester holmesworcester moved this from Design - Awaiting Internal Feedback to Backlog - Desktop & Backend in Quiet Dec 16, 2024
@holmesworcester holmesworcester moved this from Backlog - Desktop & Backend to Design Finishing in Quiet Dec 16, 2024
@jgaylor
Copy link
Collaborator

jgaylor commented Dec 16, 2024

@holmesworcester This passed Design Finishing. Here's the latest Figma: Change theme (dark, light, auto)

@jgaylor jgaylor moved this from Design Finishing to Backlog - Desktop & Backend in Quiet Dec 16, 2024
@holmesworcester
Copy link
Contributor Author

In case it's helpful, this is the original PR that added dark mode: #2521

(One of those commits should include the detection code, which this setting would interact with.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Backlog - Desktop & Backend
Development

No branches or pull requests

3 participants