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 (`chart.1` in the theme file).
133 pub chart_1: Hsla,
134 /// Chart 2 color (`chart.2` in the theme file).
135 pub chart_2: Hsla,
136 /// Chart 3 color (`chart.3` in the theme file).
137 pub chart_3: Hsla,
138 /// Chart 4 color (`chart.4` in the theme file).
139 pub chart_4: Hsla,
140 /// Chart 5 color (`chart.5` in the theme file).
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 /// Warning background color.
301 pub warning: Hsla,
302 /// Warning active background color.
303 pub warning_active: Hsla,
304 /// Warning hover background color.
305 pub warning_hover: Hsla,
306 /// Warning foreground color.
307 pub warning_foreground: Hsla,
308 /// Overlay background color.
309 pub overlay: Hsla,
310 /// Window border color.
311 ///
312 /// # Platform specific:
313 ///
314 /// This is only works on Linux, other platforms we can't change the window border color.
315 pub window_border: Hsla,
316
317 /// The base red color.
318 pub red: Hsla,
319 /// The base red light color.
320 pub red_light: Hsla,
321 /// The base green color.
322 pub green: Hsla,
323 /// The base green light color.
324 pub green_light: Hsla,
325 /// The base blue color.
326 pub blue: Hsla,
327 /// The base blue light color.
328 pub blue_light: Hsla,
329 /// The base yellow color.
330 pub yellow: Hsla,
331 /// The base yellow light color.
332 pub yellow_light: Hsla,
333 /// The base magenta color.
334 pub magenta: Hsla,
335 /// The base magenta light color.
336 pub magenta_light: Hsla,
337 /// The base cyan color.
338 pub cyan: Hsla,
339 /// The base cyan light color.
340 pub cyan_light: Hsla,
341}
342
343macro_rules! define_theme_tokens {
344 ($($field:ident),+ $(,)?) => {
345 /// Legacy resolved tokens retained for compatibility with existing
346 /// `gpui-component` themes and components.
347 ///
348 /// This type intentionally includes component-specific fields such as
349 /// `button_primary`, `tab_active`, and `table_hover`. New application-owned
350 /// components should use [`gpui_base::SemanticThemeTokens`] instead. The
351 /// legacy fields remain public so existing theme files and direct field
352 /// access continue to work unchanged.
353 #[derive(Debug, Default, Clone, Copy, Serialize, Deserialize, JsonSchema)]
354 pub struct ThemeTokens {
355 $(pub $field: ThemeToken,)+
356 }
357
358 impl From<ThemeColor> for ThemeTokens {
359 fn from(colors: ThemeColor) -> Self {
360 Self {
361 $($field: colors.$field.into(),)+
362 }
363 }
364 }
365
366 impl From<&ThemeColor> for ThemeTokens {
367 fn from(colors: &ThemeColor) -> Self {
368 Self::from(*colors)
369 }
370 }
371 };
372}
373
374define_theme_tokens! {
375 accent,
376 accent_foreground,
377 accordion,
378 background,
379 border,
380 button,
381 button_active,
382 button_foreground,
383 button_hover,
384 button_danger,
385 button_danger_active,
386 button_danger_foreground,
387 button_danger_hover,
388 button_info,
389 button_info_active,
390 button_info_foreground,
391 button_info_hover,
392 button_primary,
393 button_primary_active,
394 button_primary_foreground,
395 button_primary_hover,
396 button_secondary,
397 button_secondary_active,
398 button_secondary_foreground,
399 button_secondary_hover,
400 button_success,
401 button_success_active,
402 button_success_foreground,
403 button_success_hover,
404 button_warning,
405 button_warning_active,
406 button_warning_foreground,
407 button_warning_hover,
408 group_box,
409 group_box_foreground,
410 caret,
411 chart_1,
412 chart_2,
413 chart_3,
414 chart_4,
415 chart_5,
416 chart_bullish,
417 chart_bearish,
418 danger,
419 danger_active,
420 danger_foreground,
421 danger_hover,
422 description_list_label,
423 description_list_label_foreground,
424 drag_border,
425 drop_target,
426 foreground,
427 info,
428 info_active,
429 info_foreground,
430 info_hover,
431 input,
432 link,
433 link_active,
434 link_hover,
435 list,
436 list_active,
437 list_active_border,
438 list_even,
439 list_head,
440 list_hover,
441 muted,
442 muted_foreground,
443 popover,
444 popover_foreground,
445 primary,
446 primary_active,
447 primary_foreground,
448 primary_hover,
449 progress_bar,
450 ring,
451 scrollbar,
452 scrollbar_thumb,
453 scrollbar_thumb_hover,
454 secondary,
455 secondary_active,
456 secondary_foreground,
457 secondary_hover,
458 selection,
459 sidebar,
460 sidebar_accent,
461 sidebar_accent_foreground,
462 sidebar_border,
463 sidebar_foreground,
464 sidebar_primary,
465 sidebar_primary_foreground,
466 skeleton,
467 slider_bar,
468 slider_thumb,
469 success,
470 success_foreground,
471 success_hover,
472 success_active,
473 switch,
474 switch_thumb,
475 tab,
476 tab_active,
477 tab_active_foreground,
478 tab_bar,
479 tab_bar_segmented,
480 tab_foreground,
481 table,
482 table_active,
483 table_active_border,
484 table_even,
485 table_head,
486 table_head_foreground,
487 table_foot,
488 table_foot_foreground,
489 table_hover,
490 table_row_border,
491 title_bar,
492 title_bar_border,
493 status_bar,
494 status_bar_border,
495 warning,
496 warning_active,
497 warning_hover,
498 warning_foreground,
499 overlay,
500 window_border,
501 red,
502 red_light,
503 green,
504 green_light,
505 blue,
506 blue_light,
507 yellow,
508 yellow_light,
509 magenta,
510 magenta_light,
511 cyan,
512 cyan_light,
513}
514
515impl ThemeColor {
516 /// Get the default light theme colors.
517 pub fn light() -> Arc<Self> {
518 DEFAULT_THEME_COLORS[&ThemeMode::Light].0.clone()
519 }
520
521 /// Get the default dark theme colors.
522 pub fn dark() -> Arc<Self> {
523 DEFAULT_THEME_COLORS[&ThemeMode::Dark].0.clone()
524 }
525}