1use gpui::Hsla;
2use refineable::Refineable;
3use std::sync::Arc;
4
5use crate::{PlayerColors, StatusColors, StatusColorsRefinement, SyntaxTheme, SystemColors};
6
7#[derive(Refineable, Clone, Debug)]
8#[refineable(Debug, serde::Deserialize)]
9pub struct ThemeColors {
10 /// Border color. Used for most borders, is usually a high contrast color.
11 pub border: Hsla,
12 /// Border color. Used for deemphasized borders, like a visual divider between two sections
13 pub border_variant: Hsla,
14 /// Border color. Used for focused elements, like keyboard focused list item.
15 pub border_focused: Hsla,
16 /// Border color. Used for selected elements, like an active search filter or selected checkbox.
17 pub border_selected: Hsla,
18 /// Border color. Used for transparent borders. Used for placeholder borders when an element gains a border on state change.
19 pub border_transparent: Hsla,
20 /// Border color. Used for disabled elements, like a disabled input or button.
21 pub border_disabled: Hsla,
22 /// Border color. Used for elevated surfaces, like a context menu, popup, or dialog.
23 pub elevated_surface_background: Hsla,
24 /// Background Color. Used for grounded surfaces like a panel or tab.
25 pub surface_background: Hsla,
26 /// Background Color. Used for the app background and blank panels or windows.
27 pub background: Hsla,
28 /// Background Color. Used for the background of an element that should have a different background than the surface it's on.
29 ///
30 /// Elements might include: Buttons, Inputs, Checkboxes, Radio Buttons...
31 ///
32 /// For an element that should have the same background as the surface it's on, use `ghost_element_background`.
33 pub element_background: Hsla,
34 /// Background Color. Used for the hover state of an element that should have a different background than the surface it's on.
35 ///
36 /// Hover states are triggered by the mouse entering an element, or a finger touching an element on a touch screen.
37 pub element_hover: Hsla,
38 /// Background Color. Used for the active state of an element that should have a different background than the surface it's on.
39 ///
40 /// Active states are triggered by the mouse button being pressed down on an element, or the Return button or other activator being pressd.
41 pub element_active: Hsla,
42 /// Background Color. Used for the selected state of an element that should have a different background than the surface it's on.
43 ///
44 /// Selected states are triggered by the element being selected (or "activated") by the user.
45 ///
46 /// This could include a selected checkbox, a toggleable button that is toggled on, etc.
47 pub element_selected: Hsla,
48 /// Background Color. Used for the disabled state of an element that should have a different background than the surface it's on.
49 ///
50 /// Disabled states are shown when a user cannot interact with an element, like a disabled button or input.
51 pub element_disabled: Hsla,
52 /// Background Color. Used for the area that shows where a dragged element will be dropped.
53 pub drop_target_background: Hsla,
54 /// Border Color. Used to show the area that shows where a dragged element will be dropped.
55 // pub drop_target_border: Hsla,
56 /// Used for the background of a ghost element that should have the same background as the surface it's on.
57 ///
58 /// Elements might include: Buttons, Inputs, Checkboxes, Radio Buttons...
59 ///
60 /// For an element that should have a different background than the surface it's on, use `element_background`.
61 pub ghost_element_background: Hsla,
62 /// Background Color. Used for the hover state of a ghost element that should have the same background as the surface it's on.
63 ///
64 /// Hover states are triggered by the mouse entering an element, or a finger touching an element on a touch screen.
65 pub ghost_element_hover: Hsla,
66 /// Background Color. Used for the active state of a ghost element that should have the same background as the surface it's on.
67 ///
68 /// Active states are triggered by the mouse button being pressed down on an element, or the Return button or other activator being pressd.
69 pub ghost_element_active: Hsla,
70 /// Background Color. Used for the selected state of a ghost element that should have the same background as the surface it's on.
71 ///
72 /// Selected states are triggered by the element being selected (or "activated") by the user.
73 ///
74 /// This could include a selected checkbox, a toggleable button that is toggled on, etc.
75 pub ghost_element_selected: Hsla,
76 /// Background Color. Used for the disabled state of a ghost element that should have the same background as the surface it's on.
77 ///
78 /// Disabled states are shown when a user cannot interact with an element, like a disabled button or input.
79 pub ghost_element_disabled: Hsla,
80 /// Text Color. Default text color used for most text.
81 pub text: Hsla,
82 /// Text Color. Color of muted or deemphasized text. It is a subdued version of the standard text color.
83 pub text_muted: Hsla,
84 /// Text Color. Color of the placeholder text typically shown in input fields to guide the user to enter valid data.
85 pub text_placeholder: Hsla,
86 /// Text Color. Color used for text denoting disabled elements. Typically, the color is faded or grayed out to emphasize the disabled state.
87 pub text_disabled: Hsla,
88 /// Text Color. Color used for emphasis or highlighting certain text, like an active filter or a matched character in a search.
89 pub text_accent: Hsla,
90 /// Fill Color. Used for the default fill color of an icon.
91 pub icon: Hsla,
92 /// Fill Color. Used for the muted or deemphasized fill color of an icon.
93 ///
94 /// This might be used to show an icon in an inactive pane, or to demphasize a series of icons to give them less visual weight.
95 pub icon_muted: Hsla,
96 /// Fill Color. Used for the disabled fill color of an icon.
97 ///
98 /// Disabled states are shown when a user cannot interact with an element, like a icon button.
99 pub icon_disabled: Hsla,
100 /// Fill Color. Used for the placeholder fill color of an icon.
101 ///
102 /// This might be used to show an icon in an input that disappears when the user enters text.
103 pub icon_placeholder: Hsla,
104 /// Fill Color. Used for the accent fill color of an icon.
105 ///
106 /// This might be used to show when a toggleable icon button is selected.
107 pub icon_accent: Hsla,
108
109 // ===
110 // UI Elements
111 // ===
112 pub status_bar_background: Hsla,
113 pub title_bar_background: Hsla,
114 pub toolbar_background: Hsla,
115 pub tab_bar_background: Hsla,
116 pub tab_inactive_background: Hsla,
117 pub tab_active_background: Hsla,
118 pub search_match_background: Hsla,
119 pub panel_background: Hsla,
120 pub panel_focused_border: Hsla,
121 pub pane_focused_border: Hsla,
122 /// The color of the scrollbar thumb.
123 pub scrollbar_thumb_background: Hsla,
124 /// The color of the scrollbar thumb when hovered over.
125 pub scrollbar_thumb_hover_background: Hsla,
126 /// The border color of the scrollbar thumb.
127 pub scrollbar_thumb_border: Hsla,
128 /// The background color of the scrollbar track.
129 pub scrollbar_track_background: Hsla,
130 /// The border color of the scrollbar track.
131 pub scrollbar_track_border: Hsla,
132 // /// The opacity of the scrollbar status marks, like diagnostic states and git status.
133 // todo!()
134 // pub scrollbar_status_opacity: Hsla,
135
136 // ===
137 // Editor
138 // ===
139 pub editor_foreground: Hsla,
140 pub editor_background: Hsla,
141 // pub editor_inactive_background: Hsla,
142 pub editor_gutter_background: Hsla,
143 pub editor_subheader_background: Hsla,
144 pub editor_active_line_background: Hsla,
145 pub editor_highlighted_line_background: Hsla,
146 /// Text Color. Used for the text of the line number in the editor gutter.
147 pub editor_line_number: Hsla,
148 /// Text Color. Used for the text of the line number in the editor gutter when the line is highlighted.
149 pub editor_active_line_number: Hsla,
150 /// Text Color. Used to mark invisible characters in the editor.
151 ///
152 /// Example: spaces, tabs, carriage returns, etc.
153 pub editor_invisible: Hsla,
154 pub editor_wrap_guide: Hsla,
155 pub editor_active_wrap_guide: Hsla,
156 /// Read-access of a symbol, like reading a variable.
157 ///
158 /// A document highlight is a range inside a text document which deserves
159 /// special attention. Usually a document highlight is visualized by changing
160 /// the background color of its range.
161 pub editor_document_highlight_read_background: Hsla,
162 /// Read-access of a symbol, like reading a variable.
163 ///
164 /// A document highlight is a range inside a text document which deserves
165 /// special attention. Usually a document highlight is visualized by changing
166 /// the background color of its range.
167 pub editor_document_highlight_write_background: Hsla,
168
169 // ===
170 // Terminal
171 // ===
172 /// Terminal Background Color
173 pub terminal_background: Hsla,
174 /// Bright Black Color for ANSI Terminal
175 pub terminal_ansi_bright_black: Hsla,
176 /// Bright Red Color for ANSI Terminal
177 pub terminal_ansi_bright_red: Hsla,
178 /// Bright Green Color for ANSI Terminal
179 pub terminal_ansi_bright_green: Hsla,
180 /// Bright Yellow Color for ANSI Terminal
181 pub terminal_ansi_bright_yellow: Hsla,
182 /// Bright Blue Color for ANSI Terminal
183 pub terminal_ansi_bright_blue: Hsla,
184 /// Bright Magenta Color for ANSI Terminal
185 pub terminal_ansi_bright_magenta: Hsla,
186 /// Bright Cyan Color for ANSI Terminal
187 pub terminal_ansi_bright_cyan: Hsla,
188 /// Bright White Color for ANSI Terminal
189 pub terminal_ansi_bright_white: Hsla,
190 /// Black Color for ANSI Terminal
191 pub terminal_ansi_black: Hsla,
192 /// Red Color for ANSI Terminal
193 pub terminal_ansi_red: Hsla,
194 /// Green Color for ANSI Terminal
195 pub terminal_ansi_green: Hsla,
196 /// Yellow Color for ANSI Terminal
197 pub terminal_ansi_yellow: Hsla,
198 /// Blue Color for ANSI Terminal
199 pub terminal_ansi_blue: Hsla,
200 /// Magenta Color for ANSI Terminal
201 pub terminal_ansi_magenta: Hsla,
202 /// Cyan Color for ANSI Terminal
203 pub terminal_ansi_cyan: Hsla,
204 /// White Color for ANSI Terminal
205 pub terminal_ansi_white: Hsla,
206
207 // ===
208 // UI/Rich Text
209 // ===
210 pub link_text_hover: Hsla,
211}
212
213#[derive(Refineable, Clone)]
214pub struct ThemeStyles {
215 pub system: SystemColors,
216 /// An array of colors used for theme elements that iterrate through a series of colors.
217 ///
218 /// Example: Player colors, rainbow brackets and indent guides, etc.
219 pub accents: Vec<Hsla>,
220
221 #[refineable]
222 pub colors: ThemeColors,
223
224 #[refineable]
225 pub status: StatusColors,
226
227 pub player: PlayerColors,
228 pub syntax: Arc<SyntaxTheme>,
229}
230
231#[cfg(test)]
232mod tests {
233 use serde_json::json;
234
235 use super::*;
236
237 #[test]
238 fn override_a_single_theme_color() {
239 let mut colors = ThemeColors::light();
240
241 let magenta: Hsla = gpui::rgb(0xff00ff);
242
243 assert_ne!(colors.text, magenta);
244
245 let overrides = ThemeColorsRefinement {
246 text: Some(magenta),
247 ..Default::default()
248 };
249
250 colors.refine(&overrides);
251
252 assert_eq!(colors.text, magenta);
253 }
254
255 #[test]
256 fn override_multiple_theme_colors() {
257 let mut colors = ThemeColors::light();
258
259 let magenta: Hsla = gpui::rgb(0xff00ff);
260 let green: Hsla = gpui::rgb(0x00ff00);
261
262 assert_ne!(colors.text, magenta);
263 assert_ne!(colors.background, green);
264
265 let overrides = ThemeColorsRefinement {
266 text: Some(magenta),
267 background: Some(green),
268 ..Default::default()
269 };
270
271 colors.refine(&overrides);
272
273 assert_eq!(colors.text, magenta);
274 assert_eq!(colors.background, green);
275 }
276
277 #[test]
278 fn deserialize_theme_colors_refinement_from_json() {
279 let colors: ThemeColorsRefinement = serde_json::from_value(json!({
280 "background": "#ff00ff",
281 "text": "#ff0000"
282 }))
283 .unwrap();
284
285 assert_eq!(colors.background, Some(gpui::rgb(0xff00ff)));
286 assert_eq!(colors.text, Some(gpui::rgb(0xff0000)));
287 }
288}