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