Skip to content

Refactor/opacity model - unified opacity setting #903

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MalpenZibo wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Refactor/opacity model - unified opacity setting #903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9413e94
refactor(theme): apply opacity once, in the palette
MalpenZibo Aug 3, 2026
3f1a609
docs(appearance): document the single opacity field
MalpenZibo Aug 3, 2026
97186cd
fix(theme): overlay hover for buttons that paint nothing at rest
MalpenZibo Aug 3, 2026
440d916
style: trim the comments added by this branch
MalpenZibo Aug 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions docs/src/core/theme-system.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ pub struct AshellTheme {
pub bar_surface: BarSurface, // transparent or solid
pub bar_radius: BarRadius, // per-corner radius (CSS shorthand)
pub bar_margin: BarMargin, // per-edge margin (CSS shorthand)
pub opacity: f32, // Bar opacity (0.0-1.0)
pub menu: MenuAppearance, // Menu-specific styling
pub workspace_colors: Vec<AppearanceColor>, // Per-workspace color cycling
pub special_workspace_colors: Option<Vec<AppearanceColor>>, // Special workspace colors
Expand Down Expand Up @@ -127,7 +126,6 @@ impl AshellTheme {
bar_surface: appearance.bar.surface,
bar_radius: appearance.bar.radius,
bar_margin: appearance.bar.margin,
opacity: appearance.bar.opacity,
// ...
}
}
Expand Down
3 changes: 1 addition & 2 deletions docs/src/reference/config-reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,13 @@ Module names: `"Workspaces"`, `"WindowTitle"`, `"SystemInfo"`, `"KeyboardLayout"
[appearance]
font_name = "JetBrains Mono" # Optional custom font
scale_factor = 1.0 # DPI scale factor
opacity = 1.0 # 0.0-1.0, every surface ashell draws
blur = "auto" # auto|always|never, compositor blur

[appearance.bar]
surface = "transparent" # "transparent" or "solid"
radius = "none" # none|sm|md|lg|xl, CSS border-radius shorthand (solid only)
margin = "none" # none|xxs..xxl, CSS margin shorthand
opacity = 0.9 # 0.0-1.0
```

### Colors
Expand All @@ -64,7 +64,6 @@ Available color fields: `background`, `text`, `primary`, `secondary`, `success`,

```toml
[appearance.menu]
opacity = 0.95
backdrop = 0.3 # darkening drawn behind an open menu
```

Expand Down
5 changes: 2 additions & 3 deletions src/app.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -577,12 +577,11 @@ impl App {

let [left, center, right] = self.modules_section(id);

let (space, bar_surface, opacity, menu, animations_enabled, bar_radius, blur) =
let (space, bar_surface, menu, animations_enabled, bar_radius, blur) =
use_theme(|t| {
(
t.space,
t.bar_surface,
t.opacity,
t.menu,
t.animations_enabled,
t.bar_border_radius(),
Expand All @@ -609,7 +608,7 @@ impl App {
let bar_style = move |t: &Theme| container::Style {
background: match bar_surface {
BarSurface::Solid => Some({
let bg = t.palette().background.scale_alpha(opacity);
let bg = t.palette().background;
if menu_is_open {
darken_color(bg, menu.backdrop)
} else {
Expand Down
31 changes: 12 additions & 19 deletions src/components/menu.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,28 +299,21 @@ impl App {
content: Element<'a, app::Message>,
button_ui_ref: ButtonUIRef,
) -> Element<'a, app::Message> {
let (space, menu_opacity, radius, bar_surface, bar_position, menu_backdrop, blur) =
use_theme(|t| {
(
t.space,
t.menu.opacity,
t.radius,
t.bar_surface,
t.bar_position,
t.menu.backdrop,
t.blur,
)
});
let (space, radius, bar_surface, bar_position, menu_backdrop, blur) = use_theme(|t| {
(
t.space,
t.radius,
t.bar_surface,
t.bar_position,
t.menu.backdrop,
t.blur,
)
});

let menu_style = move |theme: &Theme| Style {
background: Some(theme.palette().background.scale_alpha(menu_opacity).into()),
background: Some(theme.palette().background.into()),
border: Border {
color: theme
.extended_palette()
.background
.weakest
.color
.scale_alpha(menu_opacity),
color: theme.extended_palette().background.weakest.color,
width: 1.,
radius: radius.lg.into(),
},
Expand Down
6 changes: 3 additions & 3 deletions src/components/module_group.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ use iced::{
/// - `Transparent` → wrap in a container with background color + rounded border,
/// using `blur_container` when compositor blur is enabled
pub fn module_group<'a, Msg: 'static>(content: Element<'a, Msg>) -> Element<'a, Msg> {
let (bar_surface, opacity, radius, blur) =
use_theme(|theme| (theme.bar_surface, theme.opacity, theme.radius, theme.blur));
let (bar_surface, radius, blur) =
use_theme(|theme| (theme.bar_surface, theme.radius, theme.blur));

match bar_surface {
BarSurface::Solid => content,
BarSurface::Transparent => {
let style = move |iced_theme: &iced::Theme| container::Style {
background: Some(iced_theme.palette().background.scale_alpha(opacity).into()),
background: Some(iced_theme.palette().background.into()),
border: Border {
width: 0.0,
radius: radius.lg.into(),
Expand Down
12 changes: 2 additions & 10 deletions src/components/sub_menu_wrapper.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,11 @@ use crate::theme::use_theme;
use iced::{Background, Border, Element, Length, Theme, widget::container};

pub fn sub_menu_wrapper<'a, Msg: 'static>(content: Element<'a, Msg>) -> Element<'a, Msg> {
let (opacity, radius, space) = use_theme(|theme| (theme.opacity, theme.radius, theme.space));
let (radius, space) = use_theme(|theme| (theme.radius, theme.space));

container(content)
.style(move |theme: &Theme| container::Style {
background: Background::Color(
theme
.extended_palette()
.background
.weak
.color
.scale_alpha(opacity),
)
.into(),
background: Background::Color(theme.extended_palette().background.weak.color).into(),
border: Border::default().rounded(radius.lg),
..container::Style::default()
})
Expand Down
33 changes: 7 additions & 26 deletions src/config.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -995,50 +995,30 @@ impl<'de> Deserialize<'de> for BarMargin {
}
}

#[derive(Deserialize, Clone, Copy, Debug, PartialEq)]
#[derive(Deserialize, Default, Clone, Copy, Debug, PartialEq)]
#[serde(default)]
pub struct BarAppearance {
pub surface: BarSurface,
#[serde(deserialize_with = "opacity_deserializer")]
pub opacity: f32,
pub radius: BarRadius,
pub margin: BarMargin,
}

impl Default for BarAppearance {
fn default() -> Self {
Self {
surface: BarSurface::default(),
opacity: default_opacity(),
radius: BarRadius::default(),
margin: BarMargin::default(),
}
}
}

#[derive(Deserialize, Clone, Copy, Debug)]
#[derive(Deserialize, Default, Clone, Copy, Debug)]
#[serde(default)]
pub struct MenuAppearance {
#[serde(deserialize_with = "opacity_deserializer")]
pub opacity: f32,
pub backdrop: f32,
}

impl Default for MenuAppearance {
fn default() -> Self {
Self {
opacity: default_opacity(),
backdrop: f32::default(),
}
}
}

#[derive(Deserialize, Clone, Debug)]
#[serde(default)]
pub struct Appearance {
pub font_name: Option<String>,
#[serde(deserialize_with = "scale_factor_deserializer")]
pub scale_factor: f64,
/// Opacity of every surface ashell draws. Applied once, to the palette, so
/// every background colour carries it and every text colour does not.
#[serde(deserialize_with = "opacity_deserializer")]
pub opacity: f32,
pub bar: BarAppearance,
pub menu: MenuAppearance,
pub background_color: BackgroundAppearanceColor,
Expand Down Expand Up @@ -1128,6 +1108,7 @@ impl Default for Appearance {
Self {
font_name: None,
scale_factor: 1.0,
opacity: default_opacity(),
bar: BarAppearance::default(),
menu: MenuAppearance::default(),
background_color: BackgroundAppearanceColor::Complete {
Expand Down
10 changes: 2 additions & 8 deletions src/modules/media_player.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,11 +231,10 @@ impl MediaPlayer {
}

pub fn menu_view<'a>(&'a self, is_closing: bool) -> Element<'a, Message> {
let (space, font_size, opacity, radius, palette) = use_theme(|theme| {
let (space, font_size, radius, palette) = use_theme(|theme| {
(
theme.space,
theme.font_size,
theme.opacity,
theme.radius,
theme.iced_theme.palette(),
)
Expand Down Expand Up @@ -385,12 +384,7 @@ impl MediaPlayer {
container(body)
.style(move |app_theme: &Theme| container::Style {
background: Background::Color(
app_theme
.extended_palette()
.background
.weak
.color
.scale_alpha(opacity),
app_theme.extended_palette().background.weak.color,
)
.into(),
border: Border::default().rounded(radius.lg),
Expand Down
45 changes: 13 additions & 32 deletions src/modules/notifications.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,7 +463,7 @@ impl Notifications {
style: NotificationStyle,
urgency: Urgency,
) -> impl Fn(&Theme, iced::widget::button::Status) -> iced::widget::button::Style + use<> {
let (radius, menu_opacity) = use_theme(|t| (t.radius, t.menu.opacity));
let radius = use_theme(|t| t.radius);
move |iced_theme: &Theme, status| {
let mut border = match style {
NotificationStyle::Toast => Border::default()
Expand Down Expand Up @@ -496,38 +496,19 @@ impl Notifications {
border,
..iced::widget::button::Style::default()
};
match status {
iced::widget::button::Status::Hovered => {
if style == NotificationStyle::Toast {
button_style.background = Some(
iced_theme
.extended_palette()
.background
.weak
.color
.scale_alpha(menu_opacity)
.into(),
);
} else {
button_style.background = Some(
iced_theme
.extended_palette()
.background
.strong
.color
.scale_alpha(menu_opacity)
.into(),
);
}
}
_ => {
button_style.background = if style == NotificationStyle::Toast {
Some(iced_theme.palette().background.into())
} else {
Some(iced_theme.extended_palette().background.weak.color.into())
}
let bg = if style == NotificationStyle::Toast {
iced_theme.extended_palette().background.base.color
} else {
iced_theme.extended_palette().background.weak.color
};
button_style.background = Some(
if matches!(status, iced::widget::button::Status::Hovered) {
crate::theme::hovered(iced_theme, bg)
} else {
bg
}
}
.into(),
);
button_style
}
}
Expand Down
24 changes: 4 additions & 20 deletions src/modules/tempo/weather.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ use super::{Message, Tempo};

impl Tempo {
pub(super) fn weather<'a>(&'a self) -> Option<Element<'a, Message>> {
let (space, font_size, opacity, radius) =
use_theme(|t| (t.space, t.font_size, t.opacity, t.radius));
let (space, font_size, radius) = use_theme(|t| (t.space, t.font_size, t.radius));
let locale = chrono_locale();
let units = unit_system();
let temp = units.temperature_symbol();
Expand Down Expand Up @@ -147,12 +146,7 @@ impl Tempo {
.padding(space.md)
.style(move |app_theme: &Theme| container::Style {
background: Background::Color(
app_theme
.extended_palette()
.background
.weak
.color
.scale_alpha(opacity),
app_theme.extended_palette().background.weak.color,
)
.into(),
border: Border::default().rounded(radius.lg),
Expand Down Expand Up @@ -210,12 +204,7 @@ impl Tempo {
.padding(space.sm)
.style(move |app_theme: &Theme| container::Style {
background: Background::Color(
app_theme
.extended_palette()
.background
.weak
.color
.scale_alpha(opacity),
app_theme.extended_palette().background.weak.color,
)
.into(),
border: Border::default().rounded(radius.lg),
Expand Down Expand Up @@ -278,12 +267,7 @@ impl Tempo {
.padding(space.sm)
.style(move |app_theme: &Theme| container::Style {
background: Background::Color(
app_theme
.extended_palette()
.background
.weak
.color
.scale_alpha(opacity),
app_theme.extended_palette().background.weak.color,
)
.into(),
border: Border::default().rounded(iced::border::Radius {
Expand Down
Loading