-
Notifications
You must be signed in to change notification settings - Fork 237
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
ui: Implement dark theme #95
Comments
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
An implementation note: For all the colors that we have that don't correspond to anything in particular in the Material Design That will let us neatly bundle together a number of colors for a light theme, and corresponding colors for a dark theme, and switch between themes centrally — and even transition smoothly between them when the theme changes, which e.g. the user might have chosen in system settings to have happen on a daily cycle. In short it means we'll use the same nice mechanics that Flutter's Material implementation uses, but for areas that needn't have any design elements in common with Material. |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
@Syrineladeb02 Please see our guide to picking an issue to work on: |
Instead of putting them in Subscription model objects. This helps toward zulip#95 by bundling this with our other ThemeExtensions that will switch together between light and dark variants when the theme changes. It's also just nicer to separate this very UI-focused code out of api/model/ (zulip#393). Not marking [nfc] just because of differences in caching logic, although I don't expect a user-visible perf effect. Related: zulip#95 Fixes: zulip#393
We'll want to get these colors from theme data, soon, for zulip#95 (supporting dark theme).
Instead of putting them in Subscription model objects. This helps toward zulip#95 by bundling this with our other ThemeExtensions that will switch together between light and dark variants when the theme changes. It's also just nicer to separate this very UI-focused code out of api/model/ (zulip#393). Not marking [nfc] just because of differences in caching logic, although I don't expect a user-visible perf effect. Related: zulip#95 Fixes: zulip#393
For dark theme, web currently uses a mix of Pygments Monokai and Pygments Default. Mixing in Pygments Default seems accidental, so here we just use pure Pygments Monokai. Discussion: https://chat.zulip.org/#narrow/stream/431-redesign-project/topic/code.20span.20colors/near/1832283 LICENSE and AUTHORS files downloaded from: https://github.com/pygments/pygments/blob/f64833d9d/LICENSE https://github.com/pygments/pygments/blob/f64833d9d/AUTHORS (I've included AUTHORS because LICENSE refers to it.) Fixes: zulip#749 Related: zulip#95
For dark theme, web currently uses a mix of Pygments Monokai and Pygments Default. Mixing in Pygments Default seems accidental, so here we just use pure Pygments Monokai. Discussion: https://chat.zulip.org/#narrow/stream/431-redesign-project/topic/code.20span.20colors/near/1832283 LICENSE and AUTHORS files downloaded from: https://github.com/pygments/pygments/blob/f64833d9d/LICENSE https://github.com/pygments/pygments/blob/f64833d9d/AUTHORS (I've included AUTHORS because LICENSE refers to it.) Fixes: zulip#749 Related: zulip#95
The dark and light values come from the web app. This completes the sweep through message-content colors for zulip#95 dark theme. They are all either in ContentTheme with light/dark variants, or still inline but with a comment explaining that they don't need light/dark variants.
The dark and light values come from the web app. This completes the sweep through message-content colors for zulip#95 dark theme. They are all either in ContentTheme with light/dark variants, or still inline but with a comment explaining that they don't need light/dark variants.
…creen NFC because the light colors are unchanged and we don't support dark theme yet.
We now have dark-theme variants in all the styles that differ between light and dark, in all of the app we've implemented so far. It's time to let users benefit from that work! We don't yet let the user choose between dark/light/system in the app -- that's zulip#97 "Store some client settings" -- but the "system" behavior should be the default anyway, and this commit provides that. The dark-theme colors are picked from various sources. For each color, I believe the source is clear either in the code or the Git history. Those sources are: - the web app (in its state when we wrote the zulip-flutter commit) - the "ready for dev" parts of the new Figma, like this: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2940-48987&m=dev - the table of variables in the new Figma, with a note that we're not sure if we chose the right variable (because the part of the UI doesn't have a "ready for dev" design yet) - my brain. If I couldn't find a better source for a color, I just made one up and checked that it looked OK. We'll want to update the colors as Vlad's work on the new Figma progresses, and also incorporate his feedback from trying out the app in dark theme. Fixes: zulip#95
We now have dark-theme variants in all the styles that differ between light and dark, in all of the app we've implemented so far. It's time to let users benefit from that work! We don't yet let the user choose between dark/light/system in the app -- that's zulip#97 "Store some client settings" -- but the "system" behavior should be the default anyway, and this commit provides that. The dark-theme colors come from various sources. For each color, I believe the source is clear either in the code or the Git history. Those sources are: - Flutter's library of Material Design widgets, for UI that's been using those (like the compose box) - the "ready for dev" parts of the new Figma, like this: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2940-48987&m=dev - the web app (in its state when we wrote the zulip-flutter commit) - the table of variables in the new Figma, with a note that we're not sure if we chose the right variable (because that part of the UI doesn't have a "ready for dev" design in the Figma yet) - my brain and a quick check that it looked OK, as a last resort We'll want to update the colors as Vlad's work on the new Figma progresses, and also incorporate his feedback from trying out the app in dark theme. Fixes: zulip#95
These are followups to #95, which is marked as resolved in the tracker.
The user should be able to choose from these three options for the app's appearance:
Flutter's Material Design implementation paves the way to a pretty good 1.0 version of a dark theme, for the boring, simple bits of UI we paint with
Theme.of(context).colorScheme
. For example, here's the result of just this simple change:For the message list, though, we don't draw from
Theme.of(context).colorScheme
, so it doesn't respond to settingBrightness.dark
there:Probably we should bundle all the message list's light-theme colors into a palette called
messageListColors
or something, then create a version of that palette for dark theme.The text was updated successfully, but these errors were encountered: