@@ -26,7 +26,7 @@ ThemeData zulipThemeData(BuildContext context) {
26
26
27
27
switch (brightness) {
28
28
case Brightness .light: {
29
- designVariables = DesignVariables .light () ;
29
+ designVariables = DesignVariables .light;
30
30
themeExtensions = [
31
31
ContentTheme .light (context),
32
32
designVariables,
@@ -35,7 +35,7 @@ ThemeData zulipThemeData(BuildContext context) {
35
35
];
36
36
}
37
37
case Brightness .dark: {
38
- designVariables = DesignVariables .dark () ;
38
+ designVariables = DesignVariables .dark;
39
39
themeExtensions = [
40
40
ContentTheme .dark (context),
41
41
designVariables,
@@ -117,113 +117,111 @@ const kZulipBrandColor = Color.fromRGBO(0x64, 0x92, 0xfe, 1);
117
117
/// or
118
118
/// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2945-49492&t=MEb4vtp7S26nntxm-0
119
119
class DesignVariables extends ThemeExtension <DesignVariables > {
120
- DesignVariables .light () :
121
- this ._(
122
- background: const Color (0xffffffff ),
123
- bannerBgIntDanger: const Color (0xfff2e4e4 ),
124
- bgBotBar: const Color (0xfff6f6f6 ),
125
- bgContextMenu: const Color (0xfff2f2f2 ),
126
- bgCounterUnread: const Color (0xff666699 ).withValues (alpha: 0.15 ),
127
- bgMenuButtonActive: Colors .black.withValues (alpha: 0.05 ),
128
- bgMenuButtonSelected: Colors .white,
129
- bgTopBar: const Color (0xfff5f5f5 ),
130
- borderBar: Colors .black.withValues (alpha: 0.2 ),
131
- borderMenuButtonSelected: Colors .black.withValues (alpha: 0.2 ),
132
- btnLabelAttLowIntDanger: const Color (0xffc0070a ),
133
- btnLabelAttMediumIntDanger: const Color (0xffac0508 ),
134
- composeBoxBg: const Color (0xffffffff ),
135
- contextMenuCancelText: const Color (0xff222222 ),
136
- contextMenuItemBg: const Color (0xff6159e1 ),
137
- contextMenuItemText: const Color (0xff381da7 ),
138
- editorButtonPressedBg: Colors .black.withValues (alpha: 0.06 ),
139
- foreground: const Color (0xff000000 ),
140
- icon: const Color (0xff6159e1 ),
141
- iconSelected: const Color (0xff222222 ),
142
- labelCounterUnread: const Color (0xff222222 ),
143
- labelEdited: const HSLColor .fromAHSL (0.35 , 0 , 0 , 0 ).toColor (),
144
- labelMenuButton: const Color (0xff222222 ),
145
- mainBackground: const Color (0xfff0f0f0 ),
146
- textInput: const Color (0xff000000 ),
147
- title: const Color (0xff1a1a1a ),
148
- bgSearchInput: const Color (0xffe3e3e3 ),
149
- textMessage: const Color (0xff262626 ),
150
- channelColorSwatches: ChannelColorSwatches .light,
151
- colorMessageHeaderIconInteractive: Colors .black.withValues (alpha: 0.2 ),
152
- contextMenuCancelBg: const Color (0xff797986 ).withValues (alpha: 0.15 ),
153
- contextMenuCancelPressedBg: const Color (0xff797986 ).withValues (alpha: 0.20 ),
154
- dmHeaderBg: const HSLColor .fromAHSL (1 , 46 , 0.35 , 0.93 ).toColor (),
155
- groupDmConversationIcon: Colors .black.withValues (alpha: 0.5 ),
156
- groupDmConversationIconBg: const Color (0x33808080 ),
157
- inboxItemIconMarker: const HSLColor .fromAHSL (0.5 , 0 , 0 , 0.2 ).toColor (),
158
- loginOrDivider: const Color (0xffdedede ),
159
- loginOrDividerText: const Color (0xff575757 ),
160
- modalBarrierColor: const Color (0xff000000 ).withValues (alpha: 0.3 ),
161
- mutedUnreadBadge: const HSLColor .fromAHSL (0.5 , 0 , 0 , 0.8 ).toColor (),
162
- navigationButtonBg: Colors .black.withValues (alpha: 0.05 ),
163
- sectionCollapseIcon: const Color (0x7f1e2e48 ),
164
- star: const HSLColor .fromAHSL (0.5 , 47 , 1 , 0.41 ).toColor (),
165
- subscriptionListHeaderLine: const HSLColor .fromAHSL (0.2 , 240 , 0.1 , 0.5 ).toColor (),
166
- subscriptionListHeaderText: const HSLColor .fromAHSL (1.0 , 240 , 0.1 , 0.5 ).toColor (),
167
- unreadCountBadgeTextForChannel: Colors .black.withValues (alpha: 0.9 ),
168
- );
120
+ static final light = DesignVariables ._(
121
+ background: const Color (0xffffffff ),
122
+ bannerBgIntDanger: const Color (0xfff2e4e4 ),
123
+ bgBotBar: const Color (0xfff6f6f6 ),
124
+ bgContextMenu: const Color (0xfff2f2f2 ),
125
+ bgCounterUnread: const Color (0xff666699 ).withValues (alpha: 0.15 ),
126
+ bgMenuButtonActive: Colors .black.withValues (alpha: 0.05 ),
127
+ bgMenuButtonSelected: Colors .white,
128
+ bgTopBar: const Color (0xfff5f5f5 ),
129
+ borderBar: Colors .black.withValues (alpha: 0.2 ),
130
+ borderMenuButtonSelected: Colors .black.withValues (alpha: 0.2 ),
131
+ btnLabelAttLowIntDanger: const Color (0xffc0070a ),
132
+ btnLabelAttMediumIntDanger: const Color (0xffac0508 ),
133
+ composeBoxBg: const Color (0xffffffff ),
134
+ contextMenuCancelText: const Color (0xff222222 ),
135
+ contextMenuItemBg: const Color (0xff6159e1 ),
136
+ contextMenuItemText: const Color (0xff381da7 ),
137
+ editorButtonPressedBg: Colors .black.withValues (alpha: 0.06 ),
138
+ foreground: const Color (0xff000000 ),
139
+ icon: const Color (0xff6159e1 ),
140
+ iconSelected: const Color (0xff222222 ),
141
+ labelCounterUnread: const Color (0xff222222 ),
142
+ labelEdited: const HSLColor .fromAHSL (0.35 , 0 , 0 , 0 ).toColor (),
143
+ labelMenuButton: const Color (0xff222222 ),
144
+ mainBackground: const Color (0xfff0f0f0 ),
145
+ textInput: const Color (0xff000000 ),
146
+ title: const Color (0xff1a1a1a ),
147
+ bgSearchInput: const Color (0xffe3e3e3 ),
148
+ textMessage: const Color (0xff262626 ),
149
+ channelColorSwatches: ChannelColorSwatches .light,
150
+ colorMessageHeaderIconInteractive: Colors .black.withValues (alpha: 0.2 ),
151
+ contextMenuCancelBg: const Color (0xff797986 ).withValues (alpha: 0.15 ),
152
+ contextMenuCancelPressedBg: const Color (0xff797986 ).withValues (alpha: 0.20 ),
153
+ dmHeaderBg: const HSLColor .fromAHSL (1 , 46 , 0.35 , 0.93 ).toColor (),
154
+ groupDmConversationIcon: Colors .black.withValues (alpha: 0.5 ),
155
+ groupDmConversationIconBg: const Color (0x33808080 ),
156
+ inboxItemIconMarker: const HSLColor .fromAHSL (0.5 , 0 , 0 , 0.2 ).toColor (),
157
+ loginOrDivider: const Color (0xffdedede ),
158
+ loginOrDividerText: const Color (0xff575757 ),
159
+ modalBarrierColor: const Color (0xff000000 ).withValues (alpha: 0.3 ),
160
+ mutedUnreadBadge: const HSLColor .fromAHSL (0.5 , 0 , 0 , 0.8 ).toColor (),
161
+ navigationButtonBg: Colors .black.withValues (alpha: 0.05 ),
162
+ sectionCollapseIcon: const Color (0x7f1e2e48 ),
163
+ star: const HSLColor .fromAHSL (0.5 , 47 , 1 , 0.41 ).toColor (),
164
+ subscriptionListHeaderLine: const HSLColor .fromAHSL (0.2 , 240 , 0.1 , 0.5 ).toColor (),
165
+ subscriptionListHeaderText: const HSLColor .fromAHSL (1.0 , 240 , 0.1 , 0.5 ).toColor (),
166
+ unreadCountBadgeTextForChannel: Colors .black.withValues (alpha: 0.9 ),
167
+ );
169
168
170
- DesignVariables .dark () :
171
- this ._(
172
- background: const Color (0xff000000 ),
173
- bannerBgIntDanger: const Color (0xff461616 ),
174
- bgBotBar: const Color (0xff222222 ),
175
- bgContextMenu: const Color (0xff262626 ),
176
- bgCounterUnread: const Color (0xff666699 ).withValues (alpha: 0.37 ),
177
- bgMenuButtonActive: Colors .black.withValues (alpha: 0.2 ),
178
- bgMenuButtonSelected: Colors .black.withValues (alpha: 0.25 ),
179
- bgTopBar: const Color (0xff242424 ),
180
- borderBar: Colors .black.withValues (alpha: 0.5 ),
181
- borderMenuButtonSelected: Colors .white.withValues (alpha: 0.1 ),
182
- btnLabelAttLowIntDanger: const Color (0xffff8b7c ),
183
- btnLabelAttMediumIntDanger: const Color (0xffff8b7c ),
184
- composeBoxBg: const Color (0xff0f0f0f ),
185
- contextMenuCancelText: const Color (0xffffffff ).withValues (alpha: 0.75 ),
186
- contextMenuItemBg: const Color (0xff7977fe ),
187
- contextMenuItemText: const Color (0xff9398fd ),
188
- editorButtonPressedBg: Colors .white.withValues (alpha: 0.06 ),
189
- foreground: const Color (0xffffffff ),
190
- icon: const Color (0xff7977fe ),
191
- iconSelected: Colors .white.withValues (alpha: 0.8 ),
192
- labelCounterUnread: const Color (0xffffffff ).withValues (alpha: 0.7 ),
193
- labelEdited: const HSLColor .fromAHSL (0.35 , 0 , 0 , 1 ).toColor (),
194
- labelMenuButton: const Color (0xffffffff ).withValues (alpha: 0.85 ),
195
- mainBackground: const Color (0xff1d1d1d ),
196
- textInput: const Color (0xffffffff ).withValues (alpha: 0.9 ),
197
- title: const Color (0xffffffff ),
198
- bgSearchInput: const Color (0xff313131 ),
199
- textMessage: const Color (0xffffffff ).withValues (alpha: 0.8 ),
200
- channelColorSwatches: ChannelColorSwatches .dark,
201
- contextMenuCancelBg: const Color (0xff797986 ).withValues (alpha: 0.15 ), // the same as the light mode in Figma
202
- contextMenuCancelPressedBg: const Color (0xff797986 ).withValues (alpha: 0.20 ), // the same as the light mode in Figma
203
- // TODO(design-dark) need proper dark-theme color (this is ad hoc)
204
- colorMessageHeaderIconInteractive: Colors .white.withValues (alpha: 0.2 ),
205
- dmHeaderBg: const HSLColor .fromAHSL (1 , 46 , 0.15 , 0.2 ).toColor (),
206
- // TODO(design-dark) need proper dark-theme color (this is ad hoc)
207
- groupDmConversationIcon: Colors .white.withValues (alpha: 0.5 ),
208
- // TODO(design-dark) need proper dark-theme color (this is ad hoc)
209
- groupDmConversationIconBg: const Color (0x33cccccc ),
210
- inboxItemIconMarker: const HSLColor .fromAHSL (0.4 , 0 , 0 , 1 ).toColor (),
211
- loginOrDivider: const Color (0xff424242 ),
212
- loginOrDividerText: const Color (0xffa8a8a8 ),
213
- modalBarrierColor: const Color (0xff000000 ).withValues (alpha: 0.5 ),
214
- // TODO(design-dark) need proper dark-theme color (this is ad hoc)
215
- mutedUnreadBadge: const HSLColor .fromAHSL (0.5 , 0 , 0 , 0.6 ).toColor (),
216
- navigationButtonBg: Colors .white.withValues (alpha: 0.05 ),
217
- // TODO(design-dark) need proper dark-theme color (this is ad hoc)
218
- sectionCollapseIcon: const Color (0x7fb6c8e2 ),
219
- // TODO(design-dark) unchanged in dark theme?
220
- star: const HSLColor .fromAHSL (0.5 , 47 , 1 , 0.41 ).toColor (),
221
- // TODO(design-dark) need proper dark-theme color (this is ad hoc)
222
- subscriptionListHeaderLine: const HSLColor .fromAHSL (0.4 , 240 , 0.1 , 0.75 ).toColor (),
223
- // TODO(design-dark) need proper dark-theme color (this is ad hoc)
224
- subscriptionListHeaderText: const HSLColor .fromAHSL (1.0 , 240 , 0.1 , 0.75 ).toColor (),
225
- unreadCountBadgeTextForChannel: Colors .white.withValues (alpha: 0.9 ),
226
- );
169
+ static final dark = DesignVariables ._(
170
+ background: const Color (0xff000000 ),
171
+ bannerBgIntDanger: const Color (0xff461616 ),
172
+ bgBotBar: const Color (0xff222222 ),
173
+ bgContextMenu: const Color (0xff262626 ),
174
+ bgCounterUnread: const Color (0xff666699 ).withValues (alpha: 0.37 ),
175
+ bgMenuButtonActive: Colors .black.withValues (alpha: 0.2 ),
176
+ bgMenuButtonSelected: Colors .black.withValues (alpha: 0.25 ),
177
+ bgTopBar: const Color (0xff242424 ),
178
+ borderBar: Colors .black.withValues (alpha: 0.5 ),
179
+ borderMenuButtonSelected: Colors .white.withValues (alpha: 0.1 ),
180
+ btnLabelAttLowIntDanger: const Color (0xffff8b7c ),
181
+ btnLabelAttMediumIntDanger: const Color (0xffff8b7c ),
182
+ composeBoxBg: const Color (0xff0f0f0f ),
183
+ contextMenuCancelText: const Color (0xffffffff ).withValues (alpha: 0.75 ),
184
+ contextMenuItemBg: const Color (0xff7977fe ),
185
+ contextMenuItemText: const Color (0xff9398fd ),
186
+ editorButtonPressedBg: Colors .white.withValues (alpha: 0.06 ),
187
+ foreground: const Color (0xffffffff ),
188
+ icon: const Color (0xff7977fe ),
189
+ iconSelected: Colors .white.withValues (alpha: 0.8 ),
190
+ labelCounterUnread: const Color (0xffffffff ).withValues (alpha: 0.7 ),
191
+ labelEdited: const HSLColor .fromAHSL (0.35 , 0 , 0 , 1 ).toColor (),
192
+ labelMenuButton: const Color (0xffffffff ).withValues (alpha: 0.85 ),
193
+ mainBackground: const Color (0xff1d1d1d ),
194
+ textInput: const Color (0xffffffff ).withValues (alpha: 0.9 ),
195
+ title: const Color (0xffffffff ),
196
+ bgSearchInput: const Color (0xff313131 ),
197
+ textMessage: const Color (0xffffffff ).withValues (alpha: 0.8 ),
198
+ channelColorSwatches: ChannelColorSwatches .dark,
199
+ contextMenuCancelBg: const Color (0xff797986 ).withValues (alpha: 0.15 ), // the same as the light mode in Figma
200
+ contextMenuCancelPressedBg: const Color (0xff797986 ).withValues (alpha: 0.20 ), // the same as the light mode in Figma
201
+ // TODO(design-dark) need proper dark-theme color (this is ad hoc)
202
+ colorMessageHeaderIconInteractive: Colors .white.withValues (alpha: 0.2 ),
203
+ dmHeaderBg: const HSLColor .fromAHSL (1 , 46 , 0.15 , 0.2 ).toColor (),
204
+ // TODO(design-dark) need proper dark-theme color (this is ad hoc)
205
+ groupDmConversationIcon: Colors .white.withValues (alpha: 0.5 ),
206
+ // TODO(design-dark) need proper dark-theme color (this is ad hoc)
207
+ groupDmConversationIconBg: const Color (0x33cccccc ),
208
+ inboxItemIconMarker: const HSLColor .fromAHSL (0.4 , 0 , 0 , 1 ).toColor (),
209
+ loginOrDivider: const Color (0xff424242 ),
210
+ loginOrDividerText: const Color (0xffa8a8a8 ),
211
+ modalBarrierColor: const Color (0xff000000 ).withValues (alpha: 0.5 ),
212
+ // TODO(design-dark) need proper dark-theme color (this is ad hoc)
213
+ mutedUnreadBadge: const HSLColor .fromAHSL (0.5 , 0 , 0 , 0.6 ).toColor (),
214
+ navigationButtonBg: Colors .white.withValues (alpha: 0.05 ),
215
+ // TODO(design-dark) need proper dark-theme color (this is ad hoc)
216
+ sectionCollapseIcon: const Color (0x7fb6c8e2 ),
217
+ // TODO(design-dark) unchanged in dark theme?
218
+ star: const HSLColor .fromAHSL (0.5 , 47 , 1 , 0.41 ).toColor (),
219
+ // TODO(design-dark) need proper dark-theme color (this is ad hoc)
220
+ subscriptionListHeaderLine: const HSLColor .fromAHSL (0.4 , 240 , 0.1 , 0.75 ).toColor (),
221
+ // TODO(design-dark) need proper dark-theme color (this is ad hoc)
222
+ subscriptionListHeaderText: const HSLColor .fromAHSL (1.0 , 240 , 0.1 , 0.75 ).toColor (),
223
+ unreadCountBadgeTextForChannel: Colors .white.withValues (alpha: 0.9 ),
224
+ );
227
225
228
226
DesignVariables ._({
229
227
required this .background,
0 commit comments