theme/theme/palettes.rs
1//! The two concrete palettes: dark and light.
2
3use gpui::{hsla, rgb};
4
5use crate::{
6 Appearance, Ink, TextInk, color, paint,
7 theme::{Glass, MaterialSpec, SurfaceSpec, SurfaceStyle, Theme, syntax::SyntaxPalette},
8};
9
10impl Theme {
11 /// Build the dark theme. The surface tones are sampled straight from the
12 /// reference screenshots of the original app (docs/reference): main panel
13 /// `#060606`, shell/sidebar `#0d0d0d`.
14 pub fn dark() -> Self {
15 Self {
16 appearance: Appearance::Dark,
17 bg: color::grey(6), // main panel — sampled #060606
18 surface: color::grey(13), // shell / sidebar — sampled #0d0d0d
19 surface_raised: color::neutral(0.235),
20 surface_card: color::grey(0x0e),
21 surface_dialog: color::grey(0x10),
22 surface_overlay: color::grey(0x16),
23 // `../desktop`'s `--color-hover`, pure ink: white at 8%.
24 element_hover: hsla(0.0, 0.0, 1.0, 0.08),
25 // `--color-active`, a rung above the hover: white at 12%.
26 element_active: hsla(0.0, 0.0, 1.0, 0.12),
27 border: hsla(0.0, 0.0, 1.0, 0.08),
28 border_strong: hsla(0.0, 0.0, 1.0, 0.14),
29 text: TextInk::color(Appearance::Dark, Ink::APPKIT.dark.text),
30 text_muted: TextInk::color(Appearance::Dark, Ink::APPKIT.dark.muted),
31 text_faint: TextInk::color(Appearance::Dark, Ink::APPKIT.dark.faint),
32 text_dim: color::grey(0x98),
33 solid: color::neutral(0.922), // near-white plate
34 on_solid: color::grey(0x0e), // near-black label
35 accent: color::neutral(0.673), // indigo-400's lightness, no chroma
36 accent_strong: color::neutral(0.922), // the solid plate
37 on_accent: color::grey(0x0e), // its inverse label
38 danger: color::oklch(0.704, 0.191, 22.216), // red-400
39 danger_muted: color::oklch(0.808, 0.114, 19.571), // red-300
40 warning: color::oklch(0.828, 0.189, 84.429), // amber-400
41 warning_muted: color::oklch(0.924, 0.12, 95.746), // amber-200
42 success: color::oklch(0.765, 0.177, 163.223), // emerald-400
43 busy: color::oklch(0.718, 0.202, 349.761), // pink-400
44 success_muted: color::oklch(0.845, 0.143, 164.978), // emerald-300
45 surface_raised_hover: color::neutral(0.29),
46 band: paint::band_for(Appearance::Dark),
47 input_bg: hsla(0.0, 0.0, 1.0, 0.03),
48 selection: rgb(0x3f638b).into(),
49 cursor: hsla(0.0, 0.0, 1.0, 0.35),
50 caret: color::neutral(0.673), // the accent
51 ring: paint::hairline_for(Appearance::Dark, 0.35), // ~2.5× border_strong
52 drop_line: color::neutral(0.55),
53 danger_strong: color::oklch(0.58, 0.16, 25.0),
54 code_text: color::neutral(0.94), // near-white, a shade above body text
55 code_wash: hsla(0.0, 0.0, 1.0, 0.08), // white/8
56 syntax: SyntaxPalette::dark(
57 color::neutral(0.922),
58 color::neutral(0.60),
59 color::oklch(0.704, 0.191, 22.216),
60 ),
61 diff_add: color::oklch(0.765, 0.177, 163.223), // emerald-400
62 diff_del: color::oklch(0.704, 0.191, 22.216), // red-400
63 diff_hunk_bg: hsla(0.6, 0.35, 0.6, 0.05),
64 vibrancy_alpha: Self::VIBRANCY_ALPHA,
65 vibrancy: crate::frosted_window(),
66 glass: crate::LENSED,
67 // SwiftUI's frost, measured 2026-08-31: `tint / (1 - gain)` implies
68 // one tone across all five thicknesses (49.8 down to 45.3), and the
69 // sigma does not move with them. The rim is bezel's, not Apple's —
70 // SwiftUI's material has no lit edge at all, and the popover card
71 // used to draw this hairline itself.
72 material: MaterialSpec {
73 tone: color::grey(47),
74 saturation: 2.1,
75 blur: 21.0,
76 edge: 0.10,
77 edge_width: 1.0,
78 edge_aa: 0.5,
79 },
80 // Measured 2026-08-31 off a real NSGlassEffectView, one
81 // whole-canvas tone at a time: a fill the size of the probe cannot
82 // be contaminated by a 10pt blur, which is what every earlier
83 // reading of this look got wrong. Six greys give the line at rms
84 // 0.9 levels, four saturated tones agree on the saturation to 0.1,
85 // and the sigma is the gaussian that best fits a 70pt bar edge at
86 // the centre of a 320pt glass, rms 0.4 levels. Over a backdrop that
87 // is NOT locally flat the real material saturates less than these
88 // numbers reproduce, so its saturation is not the per-pixel one
89 // this models. Rim and lit edge are `Clear`'s.
90 glass_regular: SurfaceSpec {
91 gain: 0.311,
92 saturation: 2.55,
93 tint: gpui::hsla(0.0, 0.0, 1.0, 11.0 / 255.0),
94 // An on-screen choice, 2026-09-01. The measurement above reads
95 // 10.8, at which the interior is a flat wash and every seam in
96 // the lens shows as a step in it.
97 blur: 4.0,
98 rim: 18.75,
99 reach: 47.0,
100 // Measured 2026-08-31 over a black canvas, where the coverage
101 // blend can only pull down, so anything above the interior is
102 // rim light: +25 levels at the boundary and gone by 1pt, the
103 // same in both appearances. Clear's 0.26 was read over a bright
104 // backdrop, where the blend toward a brighter outside inflates
105 // it — at that value the rim reads as a drawn border. It scales
106 // with what is behind it (+25 over black, +36 over mid grey)
107 // where this is a constant, so it is one point on their curve.
108 edge: 0.10,
109 edge_width: 1.0,
110 edge_aa: 0.5,
111 shadow: false,
112 },
113 // `Clear` refit 2026-08-30 over the gallery's own backdrops, rms
114 // 0.4 levels on backdrop 0..212. A window that is not key carries a
115 // different material, and this is the key one. The sigma is off a
116 // 2pt rule, which a 48pt band is too wide to resolve. The rim is
117 // off the position-coded backdrop, pooled over four shapes from
118 // 96pt to 320pt and r24 to r84: one curve, rms 1.8pt.
119 glass_clear: SurfaceSpec {
120 gain: 1.029,
121 saturation: 1.0,
122 tint: gpui::hsla(0.0, 0.0, 1.0, 16.0 / 255.0),
123 blur: 1.2,
124 rim: 18.75,
125 reach: 47.0,
126 edge: 0.26,
127 edge_width: 1.4,
128 edge_aa: 0.5,
129 shadow: false,
130 },
131 // Matched on screen against a real NSGlassEffectView, which is a
132 // higher bar than the dome's algebra: fitting the formula to their
133 // measured curve lands ~15% short of what the shader then renders.
134 popover_surface: SurfaceStyle::Glass(Glass::Regular),
135 glass_magnify: 1.1,
136 glass_dispersion: 0.005,
137 font_sans: SYSTEM_SANS.into(),
138 font_body: SYSTEM_SANS.into(),
139 font_mono: system_mono().into(),
140 }
141 }
142
143 /// Build the light theme.
144 ///
145 /// Neutrals are the same oklch scale read from the other end, but the *roles*
146 /// are reassigned rather than mirrored (see the module docs): content plane
147 /// white, chrome grey, raised surfaces white-plus-shadow. Text tones are
148 /// picked to reproduce the dark theme's contrast ratios, and accents drop
149 /// from the 400 to the 600 step at identical hue so they clear WCAG AA on
150 /// white instead of glowing.
151 pub fn light() -> Self {
152 Self {
153 appearance: Appearance::Light,
154 bg: color::grey(0xff), // main panel — clean white
155 // Deeper than ~neutral-100 looks on paper: the content card is pure
156 // white and sits *inside* this surface, so too small a step leaves the
157 // whole window one flat sheet with a hairline drawn on it.
158 surface: color::neutral(0.968),
159 // A real grey, NOT white. This is the opaque-plate tone — user
160 // message bubbles, the jump-to-bottom pill — and those sit directly
161 // on the white content plane with no border or shadow to save them.
162 // White here made the user's own messages vanish into the page.
163 // Popovers do not use this; they have their own ladder below.
164 surface_raised: color::neutral(0.940),
165 surface_card: color::grey(0xff),
166 surface_dialog: color::grey(0xff),
167 surface_overlay: color::grey(0xff),
168 // The same token in light: black at 4%.
169 element_hover: hsla(0.0, 0.0, 0.0, 0.04),
170 // The same rung in light: black at 6%.
171 element_active: hsla(0.0, 0.0, 0.0, 0.06),
172 border: hsla(0.0, 0.0, 0.0, 0.10),
173 border_strong: hsla(0.0, 0.0, 0.0, 0.17),
174 text: TextInk::color(Appearance::Light, Ink::APPKIT.light.text),
175 text_muted: TextInk::color(Appearance::Light, Ink::APPKIT.light.muted),
176 text_faint: TextInk::color(Appearance::Light, Ink::APPKIT.light.faint),
177 text_dim: color::neutral(0.50),
178 solid: color::neutral(0.205), // near-black plate, deeper than body text
179 on_solid: color::neutral(0.985), // near-white label
180 accent: color::neutral(0.511), // indigo-600's lightness, no chroma
181 accent_strong: color::neutral(0.205), // the solid plate
182 on_accent: color::neutral(0.985), // its inverse label
183 danger: color::oklch(0.577, 0.245, 27.325), // red-600
184 danger_muted: color::oklch(0.505, 0.213, 27.518), // red-700
185 warning: color::oklch(0.555, 0.163, 48.998), // amber-700 — carries 12px text
186 warning_muted: color::oklch(0.473, 0.137, 46.201), // amber-800
187 success: color::oklch(0.596, 0.145, 163.225), // emerald-600
188 busy: color::oklch(0.592, 0.249, 0.584), // pink-600
189 success_muted: color::oklch(0.508, 0.118, 165.612), // emerald-700
190 // Opaque pills darken on hover here rather than brighten — same
191 // "brighten the plate, don't wash it out" rule, read the other way.
192 surface_raised_hover: color::neutral(0.900),
193 // A recessed strip on white needs far less ink than on near-black;
194 // the dark 16% would read as a bruise.
195 band: paint::band_for(Appearance::Light),
196 input_bg: color::grey(0xff),
197 selection: rgb(0xb3d7ff).into(),
198 cursor: hsla(0.0, 0.0, 0.0, 0.55),
199 caret: color::neutral(0.511), // the accent
200 ring: paint::hairline_for(Appearance::Light, 0.35),
201 drop_line: color::neutral(0.62),
202 danger_strong: color::oklch(0.51, 0.20, 25.0),
203 code_text: color::neutral(0.18), // near-black, a shade under body text
204 code_wash: hsla(0.0, 0.0, 0.0, 0.06), // black/6
205 syntax: SyntaxPalette::light(
206 color::neutral(0.25),
207 color::neutral(0.48),
208 color::oklch(0.505, 0.213, 27.518),
209 ),
210 diff_add: color::oklch(0.596, 0.145, 163.225), // emerald-600
211 diff_del: color::oklch(0.577, 0.245, 27.325), // red-600
212 diff_hunk_bg: hsla(0.6, 0.35, 0.35, 0.07),
213 vibrancy_alpha: Self::VIBRANCY_ALPHA,
214 vibrancy: crate::frosted_window(),
215 glass: crate::LENSED,
216 // Measured 2026-08-30, macOS 26.3 LIGHT, same instruments. The
217 // material is not a tone-flip of dark: `regular` keeps its opacity
218 // (86%) and swaps a 19% grey base for a 97% white one, which is why
219 // it reads as ordinary frost here. `clear` stops compressing
220 // altogether — it is very nearly a pure lift.
221 // Material: the menu surface before glass, kept as a look of its own
222 // because it stays readable over content a lens would only bend.
223 // Light's own tone, same instrument: gain 0.378 at `Regular`, so
224 // opacity 0.622 against dark's 0.638 — the scale is shared and only
225 // the tone moves. The sigma is dark's; it is a SwiftUI constant,
226 // not an appearance choice.
227 material: MaterialSpec {
228 tone: color::grey(235),
229 saturation: 2.1,
230 blur: 21.0,
231 edge: 0.10,
232 edge_width: 1.0,
233 edge_aa: 0.5,
234 },
235 // The real material measured 2026-08-31, same instrument as dark:
236 // gain 0.139, tint white at 214/255, saturation 4.27 (within 0.1
237 // over four hues). 84% of its output is tint.
238 //
239 // Shipped off that pair since 2026-09-23: a third of the tint
240 // traded for the backdrop it was covering, holding the product
241 // `tint.a / (1 - gain)` that [`SurfaceSpec::flat`] reads, so a
242 // build with no lens keeps the white panel it had. Saturation
243 // comes down with it — 4.27 was fit at 13.9% transmission and
244 // oversaturates at 40%. Rim and lit edge are dark's, unmeasured
245 // here.
246 glass_regular: SurfaceSpec {
247 gain: 0.40,
248 saturation: 2.2,
249 tint: gpui::hsla(0.0, 0.0, 1.0, 150.0 / 255.0),
250 blur: 8.9,
251 rim: 18.75,
252 reach: 47.0,
253 edge: 0.10,
254 edge_width: 1.0,
255 edge_aa: 0.5,
256 shadow: false,
257 },
258 // Carries dark's rim, sigma and edge: light has not been
259 // re-measured since the instrument learned to hold the window key.
260 glass_clear: SurfaceSpec {
261 gain: 1.041,
262 saturation: 1.0,
263 tint: gpui::hsla(0.0, 0.0, 1.0, 18.8 / 255.0),
264 blur: 1.2,
265 rim: 18.75,
266 reach: 47.0,
267 edge: 0.26,
268 edge_width: 1.4,
269 edge_aa: 0.5,
270 shadow: false,
271 },
272 // At 1-3pt inside the rim the real material drags the backdrop 26pt
273 // or more, and lets go by 5.5pt; on the shader's profile that is 8.
274 popover_surface: SurfaceStyle::Glass(Glass::Regular),
275 glass_magnify: 1.1,
276 glass_dispersion: 0.005,
277 font_sans: SYSTEM_SANS.into(),
278 font_body: SYSTEM_SANS.into(),
279 font_mono: system_mono().into(),
280 }
281 }
282
283 /// Build the theme for an appearance.
284 pub fn for_appearance(appearance: Appearance) -> Self {
285 match appearance {
286 Appearance::Dark => Self::dark(),
287 Appearance::Light => Self::light(),
288 }
289 }
290}
291
292/// gpui's alias for whatever the platform calls its UI font, resolved per
293/// backend by `font_name_with_fallbacks`.
294const SYSTEM_SANS: &str = ".SystemUIFont";
295
296/// The mono face has no alias of its own, so each backend is named here.
297/// macOS wants the dot-name — "SF Mono" does not resolve. wasm has only what
298/// gpui-web bundles, which `.ZedMono` names.
299fn system_mono() -> &'static str {
300 if cfg!(target_family = "wasm") {
301 ".ZedMono"
302 } else if cfg!(target_os = "macos") {
303 ".AppleSystemUIFontMonospaced"
304 } else if cfg!(target_os = "windows") {
305 // Ships with Windows 11 and with Terminal. Nothing names a second
306 // choice behind it — `font_name_with_fallbacks` resolves the dot-names
307 // and nothing else — so a system without it gets whatever DirectWrite
308 // substitutes.
309 "Cascadia Mono"
310 } else {
311 "DejaVu Sans Mono"
312 }
313}