theme: Add colors for minimap thumb and border (#30785)
A user on Discord reported an issue where the minimap thumb was fully opaque: <img src="https://github.com/user-attachments/assets/5049c6a3-f89a-4ceb-9d1b-ec06e7fe9151" height="300"> This can happen because the scrollbar and its thumb might not neccessarily be transparent at all. Thus, this PR adds the`minimap.thumb.background` and `minimap.thumb.border` colors to themes so theme authors can specify custom colors for both here. Furthermore, I ensured that the minimap thumb background fallback value can never be entirely opaque. The values were arbitrarily chosen to avoid the issue from occuring whilst keeping currently working setups working. With the new properties added, authors (and users) should be able to avoid running into this issue altogether so I would argue for this special casing to be fine. However, open to change it should a different approach be preferrred. Release Notes: - Added `minimap.thumb.background` and `minimap.thumb.border` to themes to customize the thumb color and background of the minimap. - Fixed an issue where the minimap thumb could be opaque if the theme did not specify a color for the thumb.
This commit is contained in:
Finn Evers
GitHub
parent
8a24f9f280
commit
4c396bcc91
7 changed files with 194 additions and 67 deletions
|
|
@ -90,6 +90,10 @@ impl ThemeColors {
|
|||
scrollbar_thumb_border: gpui::transparent_black(),
|
||||
scrollbar_track_background: gpui::transparent_black(),
|
||||
scrollbar_track_border: neutral().light().step_5(),
|
||||
minimap_thumb_background: neutral().light_alpha().step_3().alpha(0.7),
|
||||
minimap_thumb_hover_background: neutral().light_alpha().step_4().alpha(0.7),
|
||||
minimap_thumb_active_background: neutral().light_alpha().step_5().alpha(0.7),
|
||||
minimap_thumb_border: gpui::transparent_black(),
|
||||
editor_foreground: neutral().light().step_12(),
|
||||
editor_background: neutral().light().step_1(),
|
||||
editor_gutter_background: neutral().light().step_1(),
|
||||
|
|
@ -211,6 +215,10 @@ impl ThemeColors {
|
|||
scrollbar_thumb_border: gpui::transparent_black(),
|
||||
scrollbar_track_background: gpui::transparent_black(),
|
||||
scrollbar_track_border: neutral().dark().step_5(),
|
||||
minimap_thumb_background: neutral().dark_alpha().step_3().alpha(0.7),
|
||||
minimap_thumb_hover_background: neutral().dark_alpha().step_4().alpha(0.7),
|
||||
minimap_thumb_active_background: neutral().dark_alpha().step_5().alpha(0.7),
|
||||
minimap_thumb_border: gpui::transparent_black(),
|
||||
editor_foreground: neutral().dark().step_12(),
|
||||
editor_background: neutral().dark().step_1(),
|
||||
editor_gutter_background: neutral().dark().step_1(),
|
||||
|
|
|
|||
|
|
@ -199,6 +199,10 @@ pub(crate) fn zed_default_dark() -> Theme {
|
|||
scrollbar_thumb_border: hsla(228. / 360., 8. / 100., 25. / 100., 1.),
|
||||
scrollbar_track_background: gpui::transparent_black(),
|
||||
scrollbar_track_border: hsla(228. / 360., 8. / 100., 25. / 100., 1.),
|
||||
minimap_thumb_background: hsla(225.0 / 360., 11.8 / 100., 26.7 / 100., 0.7),
|
||||
minimap_thumb_hover_background: hsla(225.0 / 360., 11.8 / 100., 26.7 / 100., 0.7),
|
||||
minimap_thumb_active_background: hsla(225.0 / 360., 11.8 / 100., 26.7 / 100., 0.7),
|
||||
minimap_thumb_border: hsla(228. / 360., 8. / 100., 25. / 100., 1.),
|
||||
editor_foreground: hsla(218. / 360., 14. / 100., 71. / 100., 1.),
|
||||
link_text_hover: blue,
|
||||
version_control_added: ADDED_COLOR,
|
||||
|
|
|
|||
|
|
@ -28,6 +28,18 @@ pub(crate) fn try_parse_color(color: &str) -> Result<Hsla> {
|
|||
Ok(hsla)
|
||||
}
|
||||
|
||||
fn ensure_non_opaque(color: Hsla) -> Hsla {
|
||||
const MAXIMUM_OPACITY: f32 = 0.7;
|
||||
if color.a <= MAXIMUM_OPACITY {
|
||||
color
|
||||
} else {
|
||||
Hsla {
|
||||
a: MAXIMUM_OPACITY,
|
||||
..color
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Debug, PartialEq, Clone, Copy, Serialize, Deserialize, JsonSchema)]
|
||||
#[serde(rename_all = "snake_case")]
|
||||
pub enum AppearanceContent {
|
||||
|
|
@ -374,6 +386,22 @@ pub struct ThemeColorsContent {
|
|||
#[serde(rename = "scrollbar.track.border")]
|
||||
pub scrollbar_track_border: Option<String>,
|
||||
|
||||
/// The color of the minimap thumb.
|
||||
#[serde(rename = "minimap.thumb.background")]
|
||||
pub minimap_thumb_background: Option<String>,
|
||||
|
||||
/// The color of the minimap thumb when hovered over.
|
||||
#[serde(rename = "minimap.thumb.hover_background")]
|
||||
pub minimap_thumb_hover_background: Option<String>,
|
||||
|
||||
/// The color of the minimap thumb whilst being actively dragged.
|
||||
#[serde(rename = "minimap.thumb.active_background")]
|
||||
pub minimap_thumb_active_background: Option<String>,
|
||||
|
||||
/// The border color of the minimap thumb.
|
||||
#[serde(rename = "minimap.thumb.border")]
|
||||
pub minimap_thumb_border: Option<String>,
|
||||
|
||||
#[serde(rename = "editor.foreground")]
|
||||
pub editor_foreground: Option<String>,
|
||||
|
||||
|
|
@ -635,6 +663,19 @@ impl ThemeColorsContent {
|
|||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok())
|
||||
});
|
||||
let scrollbar_thumb_hover_background = self
|
||||
.scrollbar_thumb_hover_background
|
||||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok());
|
||||
let scrollbar_thumb_active_background = self
|
||||
.scrollbar_thumb_active_background
|
||||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok())
|
||||
.or(scrollbar_thumb_background);
|
||||
let scrollbar_thumb_border = self
|
||||
.scrollbar_thumb_border
|
||||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok());
|
||||
ThemeColorsRefinement {
|
||||
border,
|
||||
border_variant: self
|
||||
|
|
@ -819,19 +860,9 @@ impl ThemeColorsContent {
|
|||
.and_then(|color| try_parse_color(color).ok())
|
||||
.or(border),
|
||||
scrollbar_thumb_background,
|
||||
scrollbar_thumb_hover_background: self
|
||||
.scrollbar_thumb_hover_background
|
||||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok()),
|
||||
scrollbar_thumb_active_background: self
|
||||
.scrollbar_thumb_active_background
|
||||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok())
|
||||
.or(scrollbar_thumb_background),
|
||||
scrollbar_thumb_border: self
|
||||
.scrollbar_thumb_border
|
||||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok()),
|
||||
scrollbar_thumb_hover_background,
|
||||
scrollbar_thumb_active_background,
|
||||
scrollbar_thumb_border,
|
||||
scrollbar_track_background: self
|
||||
.scrollbar_track_background
|
||||
.as_ref()
|
||||
|
|
@ -840,6 +871,26 @@ impl ThemeColorsContent {
|
|||
.scrollbar_track_border
|
||||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok()),
|
||||
minimap_thumb_background: self
|
||||
.minimap_thumb_background
|
||||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok())
|
||||
.or(scrollbar_thumb_background.map(ensure_non_opaque)),
|
||||
minimap_thumb_hover_background: self
|
||||
.minimap_thumb_hover_background
|
||||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok())
|
||||
.or(scrollbar_thumb_hover_background.map(ensure_non_opaque)),
|
||||
minimap_thumb_active_background: self
|
||||
.minimap_thumb_active_background
|
||||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok())
|
||||
.or(scrollbar_thumb_active_background.map(ensure_non_opaque)),
|
||||
minimap_thumb_border: self
|
||||
.minimap_thumb_border
|
||||
.as_ref()
|
||||
.and_then(|color| try_parse_color(color).ok())
|
||||
.or(scrollbar_thumb_border),
|
||||
editor_foreground: self
|
||||
.editor_foreground
|
||||
.as_ref()
|
||||
|
|
|
|||
|
|
@ -143,6 +143,14 @@ pub struct ThemeColors {
|
|||
pub scrollbar_track_background: Hsla,
|
||||
/// The border color of the scrollbar track.
|
||||
pub scrollbar_track_border: Hsla,
|
||||
/// The color of the minimap thumb.
|
||||
pub minimap_thumb_background: Hsla,
|
||||
/// The color of the minimap thumb when hovered over.
|
||||
pub minimap_thumb_hover_background: Hsla,
|
||||
/// The color of the minimap thumb whilst being actively dragged.
|
||||
pub minimap_thumb_active_background: Hsla,
|
||||
/// The border color of the minimap thumb.
|
||||
pub minimap_thumb_border: Hsla,
|
||||
|
||||
// ===
|
||||
// Editor
|
||||
|
|
@ -327,6 +335,10 @@ pub enum ThemeColorField {
|
|||
ScrollbarThumbBorder,
|
||||
ScrollbarTrackBackground,
|
||||
ScrollbarTrackBorder,
|
||||
MinimapThumbBackground,
|
||||
MinimapThumbHoverBackground,
|
||||
MinimapThumbActiveBackground,
|
||||
MinimapThumbBorder,
|
||||
EditorForeground,
|
||||
EditorBackground,
|
||||
EditorGutterBackground,
|
||||
|
|
@ -437,6 +449,10 @@ impl ThemeColors {
|
|||
ThemeColorField::ScrollbarThumbBorder => self.scrollbar_thumb_border,
|
||||
ThemeColorField::ScrollbarTrackBackground => self.scrollbar_track_background,
|
||||
ThemeColorField::ScrollbarTrackBorder => self.scrollbar_track_border,
|
||||
ThemeColorField::MinimapThumbBackground => self.minimap_thumb_background,
|
||||
ThemeColorField::MinimapThumbHoverBackground => self.minimap_thumb_hover_background,
|
||||
ThemeColorField::MinimapThumbActiveBackground => self.minimap_thumb_active_background,
|
||||
ThemeColorField::MinimapThumbBorder => self.minimap_thumb_border,
|
||||
ThemeColorField::EditorForeground => self.editor_foreground,
|
||||
ThemeColorField::EditorBackground => self.editor_background,
|
||||
ThemeColorField::EditorGutterBackground => self.editor_gutter_background,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue