dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme: Fix some dropdown to use popover for bg, and improve macos-cla… (#1702)

Browse source 
<img width="1136" height="859" alt="image"
src="https://github.com/user-attachments/assets/16764390-2089-43b9-bb96-77912263f07e"
/>

<img width="1136" height="859" alt="image"
src="https://github.com/user-attachments/assets/c2cb7e4f-76d6-458e-8ff9-2734d4944008"
/>
This commit is contained in:
Jason Lee 2025-11-28 16:57:13 +08:00 committed by GitHub
parent 660c88cc21
commit 04abdbe771
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 46 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
crates/ui/src/color_picker.rs
View file

@ -491,7 +491,8 @@ impl RenderOnce for ColorPicker {
.border_1()
.border_color(cx.theme().border)
.shadow_lg()
.bg(cx.theme().background)
.bg(cx.theme().popover)
.text_color(cx.theme().popover_foreground)
.child(self.render_colors(window, cx))
.on_mouse_up_out(
MouseButton::Left,

2
crates/ui/src/text/node.rs
View file

@ -370,7 +370,7 @@ impl CodeBlock {
.id("codeblock")
.p_3()
.rounded(cx.theme().radius)
.bg(cx.theme().secondary.opacity(0.85))
.bg(cx.theme().muted)
.font_family(cx.theme().mono_font_family.clone())
.text_size(cx.theme().mono_font_size)
.relative()

12
crates/ui/src/theme/schema.rs
View file

@ -1,13 +1,13 @@
use std::{rc::Rc, sync::Arc};
use anyhow::Result;
use gpui::{px, Hsla, SharedString};
use gpui::{Hsla, SharedString, px};
use schemars::JsonSchema;
use serde::{Deserialize, Serialize};
use crate::{
highlighter::{HighlightTheme, HighlightThemeStyle},
Colorize, Theme, ThemeColor, ThemeMode,
highlighter::{HighlightTheme, HighlightThemeStyle},
};
/// Represents a theme configuration.
@ -528,7 +528,7 @@ impl ThemeColor {
// Other colors
apply_color!(accent, fallback = self.secondary);
apply_color!(accent_foreground, fallback = self.secondary_foreground);
apply_color!(accent_foreground, fallback = self.foreground);
apply_color!(accordion, fallback = self.background);
apply_color!(accordion_hover, fallback = self.accent.opacity(0.8));
apply_color!(
@ -540,7 +540,7 @@ impl ThemeColor {
.opacity(if config.mode.is_dark() { 0.3 } else { 0.4 })
)
);
apply_color!(group_box_foreground, fallback = self.secondary_foreground);
apply_color!(group_box_foreground, fallback = self.foreground);
apply_color!(caret, fallback = self.primary);
apply_color!(chart_1, fallback = self.blue.lighten(0.4));
apply_color!(chart_2, fallback = self.blue.lighten(0.2));
@ -560,7 +560,7 @@ impl ThemeColor {
);
apply_color!(
description_list_label_foreground,
fallback = self.secondary_foreground
fallback = self.muted_foreground
);
apply_color!(drag_border, fallback = self.primary.opacity(0.65));
apply_color!(drop_target, fallback = self.primary.opacity(0.2));
@ -608,7 +608,7 @@ impl ThemeColor {
apply_color!(tab_active_foreground, fallback = self.foreground);
apply_color!(tab_bar, fallback = self.background);
apply_color!(tab_bar_segmented, fallback = self.secondary);
apply_color!(tab_foreground, fallback = self.secondary_foreground);
apply_color!(tab_foreground, fallback = self.foreground);
apply_color!(table, fallback = self.list);
apply_color!(table_active, fallback = self.list_active);
apply_color!(table_active_border, fallback = self.list_active_border);

17
crates/ui/src/time/date_picker.rs
View file

@ -2,20 +2,20 @@ use std::rc::Rc;
use chrono::NaiveDate;
use gpui::{
anchored, deferred, div, prelude::FluentBuilder as _, px, App, AppContext, ClickEvent, Context,
ElementId, Empty, Entity, EventEmitter, FocusHandle, Focusable, InteractiveElement as _,
IntoElement, KeyBinding, MouseButton, ParentElement as _, Render, RenderOnce, SharedString,
StatefulInteractiveElement as _, StyleRefinement, Styled, Subscription, Window,
App, AppContext, ClickEvent, Context, ElementId, Empty, Entity, EventEmitter, FocusHandle,
Focusable, InteractiveElement as _, IntoElement, KeyBinding, MouseButton, ParentElement as _,
Render, RenderOnce, SharedString, StatefulInteractiveElement as _, StyleRefinement, Styled,
Subscription, Window, anchored, deferred, div, prelude::FluentBuilder as _, px,
};
use rust_i18n::t;
use crate::{
ActiveTheme, Disableable, Icon, IconName, Sizable, Size, StyleSized as _, StyledExt as _,
actions::{Cancel, Confirm},
button::{Button, ButtonVariants as _},
h_flex,
input::{clear_button, Delete},
v_flex, ActiveTheme, Disableable, Icon, IconName, Sizable, Size, StyleSized as _,
StyledExt as _,
input::{Delete, clear_button},
v_flex,
};
use super::calendar::{Calendar, CalendarEvent, CalendarState, Date, Matcher};
@ -443,7 +443,8 @@ impl RenderOnce for DatePicker {
.border_color(cx.theme().border)
.shadow_lg()
.rounded((cx.theme().radius * 2.).min(px(8.)))
.bg(cx.theme().background)
.bg(cx.theme().popover)
.text_color(cx.theme().popover_foreground)
.on_mouse_up_out(
MouseButton::Left,
window.listener_for(&self.state, |view, _, window, cx| {

57
themes/macos-classic.json
View file

@ -14,19 +14,21 @@
"background": "#F9F9F9",
"foreground": "#000000",
"border": "#D2D2D2",
"ring": "#0064E1",
"ring": "#007AFF",
"danger.foreground": "#FFFFFF",
"list.active.background": "#0064E110",
"list.active.border": "#0064E1",
"list.background": "#FFFFFF",
"list.active.border": "#007AFF",
"list.even.background": "#EFEFEF",
"list.hover.background": "#E7E7E7",
"muted.background": "#F5F5F5",
"muted.foreground": "#707070",
"popover.background": "#F5F5F5",
"popover.foreground": "#000000",
"primary.background": "#0064E1",
"primary.background": "#007AFF",
"primary.foreground": "#FFFFFF",
"danger.background": "#E0383E",
"warning.background": "#c79f00",
"success.background": "#62BA46",
"scrollbar.background": "#FFFFFF00",
"scrollbar.thumb.background": "#C8C8C8",
"secondary.active.background": "#D9D9D9",
@ -39,18 +41,12 @@
"tab_bar.background": "#E9E9E9",
"title_bar.background": "#FEFEFE",
"title_bar.border": "#DADADA",
"base.yellow": "#8E7823",
"base.yellow.light": "#BDA400",
"base.red": "#d21f07",
"base.red.light": "#D9564E",
"base.blue": "#0433ff",
"base.blue.light": "#5685F4",
"base.green": "#277F2B",
"base.green.light": "#35BD33",
"base.yellow": "#FAC800",
"base.red": "#E0383E",
"base.blue": "#007AFF",
"base.green": "#62BA46",
"base.magenta": "#AE30C2",
"base.magenta.light": "#D75CE7",
"base.cyan": "#00767C",
"base.cyan.light": "#20B1C9"
"base.cyan": "#04b0ff"
},
"highlight": {
"editor.foreground": "#000000",
@ -151,36 +147,39 @@
"accent.background": "#363636",
"accent.foreground": "#CACCCA",
"background": "#1E1E1E",
"border": "#454545",
"ring": "#0059D1",
"border": "#404040",
"ring": "#007AFF",
"foreground": "#DEDEDE",
"list.even.background": "#232323",
"list.active.background": "#0059D115",
"list.active.border": "#0059D1",
"muted.background": "#1E1D1E",
"list.active.border": "#077DFF",
"muted.background": "#252525",
"muted.foreground": "#9D9D9D",
"popover.background": "#1E1D1E",
"popover.background": "#191919",
"popover.foreground": "#CACCCA",
"primary.background": "#0059D1",
"primary.background": "#077DFF",
"primary.foreground": "#F2F9FF",
"switch.background": "#393939",
"switch.thumb.background": "#DAECFF",
"scrollbar.background": "#13131300",
"scrollbar.thumb.background": "#4C4D4DAA",
"scrollbar.thumb.background": "#9F9F9F",
"secondary.active.background": "#30303099",
"secondary.background": "#303030",
"secondary.background": "#353535",
"secondary.foreground": "#DEDEDE",
"secondary.hover.background": "#323232",
"secondary.hover.background": "#393939",
"warning.background": "#c99e00",
"tab.active.background": "#1E1E1E",
"tab.background": "#232323",
"tab.foreground": "#8F8F8F",
"title_bar.background": "#272727",
"selection.background": "#3F638B",
"link": "#307BF6",
"base.blue": "#0059D1",
"link": "#007AFF",
"base.blue": "#007AFF",
"base.cyan": "#3CD3FE",
"base.green": "#62BA46",
"base.magenta": "#F74F9E",
"base.red": "#FF4245",
"base.yellow": "#FCB827"
"base.magenta": "#A550A7",
"base.red": "#FF5257",
"base.yellow": "#FFC600"
},
"highlight": {
"editor.foreground": "#CACCCA",