gpui_component/theme/theme_color.rs
1use std::{ops::Deref, sync::Arc};
2
3use crate::{ThemeMode, theme::DEFAULT_THEME_COLORS};
4
5use gpui::{Background, Fill, Hsla};
6use schemars::JsonSchema;
7use serde::{Deserialize, Serialize};
8
9/// A theme token that keeps a solid representative color and its renderable background.
10#[derive(Debug, Default, Clone, Copy, PartialEq, Serialize, Deserialize, JsonSchema)]
11pub struct ThemeToken {
12 pub color: Hsla,
13 pub background: Background,
14}
15
16impl ThemeToken {
17 pub fn new(color: Hsla, background: Background) -> Self {
18 Self { color, background }
19 }
20}
21
22impl Deref for ThemeToken {
23 type Target = Hsla;
24
25 fn deref(&self) -> &Self::Target {
26 &self.color
27 }
28}
29
30impl From<Hsla> for ThemeToken {
31 fn from(color: Hsla) -> Self {
32 Self {
33 color,
34 background: color.into(),
35 }
36 }
37}
38
39impl From<ThemeToken> for Hsla {
40 fn from(token: ThemeToken) -> Self {
41 token.color
42 }
43}
44
45impl From<ThemeToken> for Background {
46 fn from(token: ThemeToken) -> Self {
47 token.background
48 }
49}
50
51impl From<ThemeToken> for Fill {
52 fn from(token: ThemeToken) -> Self {
53 Fill::Color(token.background)
54 }
55}
56
57/// Theme colors used throughout the UI components.
58#[derive(Debug, Default, Clone, Copy, Serialize, Deserialize, JsonSchema)]
59pub struct ThemeColor {
60 /// Used for accents such as hover background on MenuItem, ListItem, etc.
61 pub accent: Hsla,
62 /// Used for accent text color.
63 pub accent_foreground: Hsla,
64 /// Accordion background color.
65 pub accordion: Hsla,
66 /// Default background color.
67 pub background: Hsla,
68 /// Default border color
69 pub border: Hsla,
70 /// Default Button background color.
71 pub button: Hsla,
72 /// Default Button active background color.
73 pub button_active: Hsla,
74 /// Default Button text color.
75 pub button_foreground: Hsla,
76 /// Default Button hover background color.
77 pub button_hover: Hsla,
78 /// Button danger background color, fallback to `danger`.
79 pub button_danger: Hsla,
80 /// Button danger active background color, fallback to `danger_active`.
81 pub button_danger_active: Hsla,
82 /// Button danger text color, fallback to `danger_foreground`.
83 pub button_danger_foreground: Hsla,
84 /// Button danger hover background color, fallback to `danger_hover`.
85 pub button_danger_hover: Hsla,
86 /// Button info background color, fallback to `info`.
87 pub button_info: Hsla,
88 /// Button info active background color, fallback to `info_active`.
89 pub button_info_active: Hsla,
90 /// Button info text color, fallback to `info_foreground`.
91 pub button_info_foreground: Hsla,
92 /// Button info hover background color, fallback to `info_hover`.
93 pub button_info_hover: Hsla,
94 /// Button primary background color, fallback to `primary`.
95 pub button_primary: Hsla,
96 /// Button primary active background color, fallback to `primary_active`.
97 pub button_primary_active: Hsla,
98 /// Button primary text color, fallback to `primary_foreground`.
99 pub button_primary_foreground: Hsla,
100 /// Button primary hover background color, fallback to `primary_hover`.
101 pub button_primary_hover: Hsla,
102 /// Button secondary background color, fallback to `secondary`.
103 pub button_secondary: Hsla,
104 /// Button secondary active background color, fallback to `secondary_active`.
105 pub button_secondary_active: Hsla,
106 /// Button secondary text color, fallback to `secondary_foreground`.
107 pub button_secondary_foreground: Hsla,
108 /// Button secondary hover background color, fallback to `secondary_hover`.
109 pub button_secondary_hover: Hsla,
110 /// Button success background color, fallback to `success`.
111 pub button_success: Hsla,
112 /// Button success active background color, fallback to `success_active`.
113 pub button_success_active: Hsla,
114 /// Button success text color, fallback to `success_foreground`.
115 pub button_success_foreground: Hsla,
116 /// Button success hover background color, fallback to `success_hover`.
117 pub button_success_hover: Hsla,
118 /// Button warning background color, fallback to `warning`.
119 pub button_warning: Hsla,
120 /// Button warning active background color, fallback to `warning_active`.
121 pub button_warning_active: Hsla,
122 /// Button warning text color, fallback to `warning_foreground`.
123 pub button_warning_foreground: Hsla,
124 /// Button warning hover background color, fallback to `warning_hover`.
125 pub button_warning_hover: Hsla,
126 /// Background color for GroupBox.
127 pub group_box: Hsla,
128 /// Text color for GroupBox.
129 pub group_box_foreground: Hsla,
130 /// Input caret color (Blinking cursor).
131 pub caret: Hsla,
132 /// Chart 1 color.
133 pub chart_1: Hsla,
134 /// Chart 2 color.
135 pub chart_2: Hsla,
136 /// Chart 3 color.
137 pub chart_3: Hsla,
138 /// Chart 4 color.
139 pub chart_4: Hsla,
140 /// Chart 5 color.
141 pub chart_5: Hsla,
142 /// Bullish color for candlestick charts (upward price movement).
143 pub chart_bullish: Hsla,
144 /// Bearish color for candlestick charts (downward price movement).
145 pub chart_bearish: Hsla,
146 /// Danger background color.
147 pub danger: Hsla,
148 /// Danger active background color.
149 pub danger_active: Hsla,
150 /// Danger text color.
151 pub danger_foreground: Hsla,
152 /// Danger hover background color.
153 pub danger_hover: Hsla,
154 /// Description List label background color.
155 pub description_list_label: Hsla,
156 /// Description List label foreground color.
157 pub description_list_label_foreground: Hsla,
158 /// Drag border color.
159 pub drag_border: Hsla,
160 /// Drop target background color.
161 pub drop_target: Hsla,
162 /// Default text color.
163 pub foreground: Hsla,
164 /// Info background color.
165 pub info: Hsla,
166 /// Info active background color.
167 pub info_active: Hsla,
168 /// Info text color.
169 pub info_foreground: Hsla,
170 /// Info hover background color.
171 pub info_hover: Hsla,
172 /// Border color for inputs such as Input, Select, etc.
173 pub input: Hsla,
174 /// Link text color.
175 pub link: Hsla,
176 /// Active link text color.
177 pub link_active: Hsla,
178 /// Hover link text color.
179 pub link_hover: Hsla,
180 /// Background color for List and ListItem.
181 pub list: Hsla,
182 /// Background color for active ListItem.
183 pub list_active: Hsla,
184 /// Border color for active ListItem.
185 pub list_active_border: Hsla,
186 /// Stripe background color for even ListItem.
187 pub list_even: Hsla,
188 /// Background color for List header.
189 pub list_head: Hsla,
190 /// Hover background color for ListItem.
191 pub list_hover: Hsla,
192 /// Muted backgrounds such as Skeleton and Switch.
193 pub muted: Hsla,
194 /// Muted text color, as used in disabled text.
195 pub muted_foreground: Hsla,
196 /// Background color for Popover.
197 pub popover: Hsla,
198 /// Text color for Popover.
199 pub popover_foreground: Hsla,
200 /// Primary background color.
201 pub primary: Hsla,
202 /// Active primary background color.
203 pub primary_active: Hsla,
204 /// Primary text color.
205 pub primary_foreground: Hsla,
206 /// Hover primary background color.
207 pub primary_hover: Hsla,
208 /// Progress bar background color.
209 pub progress_bar: Hsla,
210 /// Used for focus ring.
211 pub ring: Hsla,
212 /// Scrollbar background color.
213 pub scrollbar: Hsla,
214 /// Scrollbar thumb background color.
215 pub scrollbar_thumb: Hsla,
216 /// Scrollbar thumb hover background color.
217 pub scrollbar_thumb_hover: Hsla,
218 /// Secondary background color.
219 pub secondary: Hsla,
220 /// Active secondary background color.
221 pub secondary_active: Hsla,
222 /// Secondary text color, used for secondary Button text color or secondary text.
223 pub secondary_foreground: Hsla,
224 /// Hover secondary background color.
225 pub secondary_hover: Hsla,
226 /// Input selection background color.
227 pub selection: Hsla,
228 /// Sidebar background color.
229 pub sidebar: Hsla,
230 /// Sidebar accent background color.
231 pub sidebar_accent: Hsla,
232 /// Sidebar accent text color.
233 pub sidebar_accent_foreground: Hsla,
234 /// Sidebar border color.
235 pub sidebar_border: Hsla,
236 /// Sidebar text color.
237 pub sidebar_foreground: Hsla,
238 /// Sidebar primary background color.
239 pub sidebar_primary: Hsla,
240 /// Sidebar primary text color.
241 pub sidebar_primary_foreground: Hsla,
242 /// Skeleton background color.
243 pub skeleton: Hsla,
244 /// Slider bar background color.
245 pub slider_bar: Hsla,
246 /// Slider thumb background color.
247 pub slider_thumb: Hsla,
248 /// Success background color.
249 pub success: Hsla,
250 /// Success text color.
251 pub success_foreground: Hsla,
252 /// Success hover background color.
253 pub success_hover: Hsla,
254 /// Success active background color.
255 pub success_active: Hsla,
256 /// Switch background color.
257 pub switch: Hsla,
258 /// Switch thumb background color.
259 pub switch_thumb: Hsla,
260 /// Tab background color.
261 pub tab: Hsla,
262 /// Tab active background color.
263 pub tab_active: Hsla,
264 /// Tab active text color.
265 pub tab_active_foreground: Hsla,
266 /// TabBar background color.
267 pub tab_bar: Hsla,
268 /// TabBar segmented background color.
269 pub tab_bar_segmented: Hsla,
270 /// Tab text color.
271 pub tab_foreground: Hsla,
272 /// Table background color.
273 pub table: Hsla,
274 /// Table active item background color.
275 pub table_active: Hsla,
276 /// Table active item border color.
277 pub table_active_border: Hsla,
278 /// Stripe background color for even TableRow.
279 pub table_even: Hsla,
280 /// Table head background color.
281 pub table_head: Hsla,
282 /// Table head text color.
283 pub table_head_foreground: Hsla,
284 /// Table footer background color.
285 pub table_foot: Hsla,
286 /// Table footer text color.
287 pub table_foot_foreground: Hsla,
288 /// Table item hover background color.
289 pub table_hover: Hsla,
290 /// Table row border color.
291 pub table_row_border: Hsla,
292 /// TitleBar background color, use for Window title bar.
293 pub title_bar: Hsla,
294 /// TitleBar border color.
295 pub title_bar_border: Hsla,
296 /// StatusBar background color, use for the bottom status bar.
297 pub status_bar: Hsla,
298 /// StatusBar border color.
299 pub status_bar_border: Hsla,
300 /// Background color for Tiles.
301 pub tiles: Hsla,
302 /// Warning background color.
303 pub warning: Hsla,
304 /// Warning active background color.
305 pub warning_active: Hsla,
306 /// Warning hover background color.
307 pub warning_hover: Hsla,
308 /// Warning foreground color.
309 pub warning_foreground: Hsla,
310 /// Overlay background color.
311 pub overlay: Hsla,
312 /// Window border color.
313 ///
314 /// # Platform specific:
315 ///
316 /// This is only works on Linux, other platforms we can't change the window border color.
317 pub window_border: Hsla,
318
319 /// The base red color.
320 pub red: Hsla,
321 /// The base red light color.
322 pub red_light: Hsla,
323 /// The base green color.
324 pub green: Hsla,
325 /// The base green light color.
326 pub green_light: Hsla,
327 /// The base blue color.
328 pub blue: Hsla,
329 /// The base blue light color.
330 pub blue_light: Hsla,
331 /// The base yellow color.
332 pub yellow: Hsla,
333 /// The base yellow light color.
334 pub yellow_light: Hsla,
335 /// The base magenta color.
336 pub magenta: Hsla,
337 /// The base magenta light color.
338 pub magenta_light: Hsla,
339 /// The base cyan color.
340 pub cyan: Hsla,
341 /// The base cyan light color.
342 pub cyan_light: Hsla,
343}
344
345macro_rules! define_theme_tokens {
346 ($($field:ident),+ $(,)?) => {
347 /// Legacy resolved tokens retained for compatibility with existing
348 /// `gpui-component` themes and components.
349 ///
350 /// This type intentionally includes component-specific fields such as
351 /// `button_primary`, `tab_active`, and `table_hover`. New application-owned
352 /// components should use [`gpui_base::SemanticThemeTokens`] instead. The
353 /// legacy fields remain public so existing theme files and direct field
354 /// access continue to work unchanged.
355 #[derive(Debug, Default, Clone, Copy, Serialize, Deserialize, JsonSchema)]
356 pub struct ThemeTokens {
357 $(pub $field: ThemeToken,)+
358 }
359
360 impl From<ThemeColor> for ThemeTokens {
361 fn from(colors: ThemeColor) -> Self {
362 Self {
363 $($field: colors.$field.into(),)+
364 }
365 }
366 }
367
368 impl From<&ThemeColor> for ThemeTokens {
369 fn from(colors: &ThemeColor) -> Self {
370 Self::from(*colors)
371 }
372 }
373 };
374}
375
376define_theme_tokens! {
377 accent,
378 accent_foreground,
379 accordion,
380 background,
381 border,
382 button,
383 button_active,
384 button_foreground,
385 button_hover,
386 button_danger,
387 button_danger_active,
388 button_danger_foreground,
389 button_danger_hover,
390 button_info,
391 button_info_active,
392 button_info_foreground,
393 button_info_hover,
394 button_primary,
395 button_primary_active,
396 button_primary_foreground,
397 button_primary_hover,
398 button_secondary,
399 button_secondary_active,
400 button_secondary_foreground,
401 button_secondary_hover,
402 button_success,
403 button_success_active,
404 button_success_foreground,
405 button_success_hover,
406 button_warning,
407 button_warning_active,
408 button_warning_foreground,
409 button_warning_hover,
410 group_box,
411 group_box_foreground,
412 caret,
413 chart_1,
414 chart_2,
415 chart_3,
416 chart_4,
417 chart_5,
418 chart_bullish,
419 chart_bearish,
420 danger,
421 danger_active,
422 danger_foreground,
423 danger_hover,
424 description_list_label,
425 description_list_label_foreground,
426 drag_border,
427 drop_target,
428 foreground,
429 info,
430 info_active,
431 info_foreground,
432 info_hover,
433 input,
434 link,
435 link_active,
436 link_hover,
437 list,
438 list_active,
439 list_active_border,
440 list_even,
441 list_head,
442 list_hover,
443 muted,
444 muted_foreground,
445 popover,
446 popover_foreground,
447 primary,
448 primary_active,
449 primary_foreground,
450 primary_hover,
451 progress_bar,
452 ring,
453 scrollbar,
454 scrollbar_thumb,
455 scrollbar_thumb_hover,
456 secondary,
457 secondary_active,
458 secondary_foreground,
459 secondary_hover,
460 selection,
461 sidebar,
462 sidebar_accent,
463 sidebar_accent_foreground,
464 sidebar_border,
465 sidebar_foreground,
466 sidebar_primary,
467 sidebar_primary_foreground,
468 skeleton,
469 slider_bar,
470 slider_thumb,
471 success,
472 success_foreground,
473 success_hover,
474 success_active,
475 switch,
476 switch_thumb,
477 tab,
478 tab_active,
479 tab_active_foreground,
480 tab_bar,
481 tab_bar_segmented,
482 tab_foreground,
483 table,
484 table_active,
485 table_active_border,
486 table_even,
487 table_head,
488 table_head_foreground,
489 table_foot,
490 table_foot_foreground,
491 table_hover,
492 table_row_border,
493 title_bar,
494 title_bar_border,
495 status_bar,
496 status_bar_border,
497 tiles,
498 warning,
499 warning_active,
500 warning_hover,
501 warning_foreground,
502 overlay,
503 window_border,
504 red,
505 red_light,
506 green,
507 green_light,
508 blue,
509 blue_light,
510 yellow,
511 yellow_light,
512 magenta,
513 magenta_light,
514 cyan,
515 cyan_light,
516}
517
518impl ThemeColor {
519 /// Get the default light theme colors.
520 pub fn light() -> Arc<Self> {
521 DEFAULT_THEME_COLORS[&ThemeMode::Light].0.clone()
522 }
523
524 /// Get the default dark theme colors.
525 pub fn dark() -> Arc<Self> {
526 DEFAULT_THEME_COLORS[&ThemeMode::Dark].0.clone()
527 }
528}