refactor opaque fallback

cosmic-theme/src/model/theme.rs

@@ -44,11 +44,19 @@ pub struct Theme {
     /// name of the theme
     pub name: String,
     /// background element colors
-    pub background: Container,
+    pub(crate) background: Container,
     /// primary element colors
-    pub primary: Container,
+    pub(crate) primary: Container,
     /// secondary element colors
-    pub secondary: Container,
+    pub(crate) secondary: Container,
+    /// background element colors
+    pub(crate) transparent_background: Container,
+    /// primary element colors
+    pub(crate) transparent_primary: Container,
+    /// secondary element colors
+    pub(crate) transparent_secondary: Container,
+    /// button component styling
+    pub button: Component,
     /// accent element colors
     pub accent: Component,
     /// suggested element colors
@@ -71,8 +79,6 @@ pub struct Theme {
     pub link_button: Component,
     /// text button element colors
     pub text_button: Component,
-    /// button component styling
-    pub button: Component,
     /// palette
     pub palette: CosmicPaletteInner,
     /// spacing
@@ -180,6 +186,39 @@ impl Theme {
         todo!();
     }
 
+    #[allow(clippy::doc_markdown)]
+    #[inline]
+    /// get opaque or transparent background based on whether blur is active
+    pub fn background(&self, transparent: bool) -> &Container {
+        if transparent {
+            &self.transparent_background
+        } else {
+            &self.background
+        }
+    }
+
+    #[allow(clippy::doc_markdown)]
+    #[inline]
+    /// get opaque or transparent primary based on whether blur is active
+    pub fn primary(&self, transparent: bool) -> &Container {
+        if transparent {
+            &self.transparent_primary
+        } else {
+            &self.primary
+        }
+    }
+
+    #[allow(clippy::doc_markdown)]
+    #[inline]
+    /// get opaque or transparent secondary based on whether blur is active
+    pub fn secondary(&self, transparent: bool) -> &Container {
+        if transparent {
+            &self.transparent_secondary
+        } else {
+            &self.secondary
+        }
+    }
+
     #[must_use]
     #[allow(clippy::doc_markdown)]
     #[inline]
@@ -1060,17 +1099,19 @@ impl ThemeBuilder {
             NonZeroUsize::new(100).unwrap(),
         );
 
-        let mut bg = if let Some(bg_color) = bg_color {
+        let bg = if let Some(bg_color) = bg_color {
             bg_color
         } else {
             p_ref.gray_1
         };
 
-        bg.alpha = container_alpha;
-
         let step_array = steps(bg, NonZeroUsize::new(100).unwrap());
         let bg_index = color_index(bg, step_array.len());
 
+        let mut transparent_bg = bg;
+        transparent_bg.alpha = container_alpha;
+        let transparent_bg_steps_array = steps(transparent_bg, NonZeroUsize::new(100).unwrap());
+
         let mut component_hovered_overlay = if bg_index < 91 {
             control_steps_array[10]
         } else {
@@ -1097,13 +1138,26 @@ impl ThemeBuilder {
             text_steps_array.as_deref(),
         );
 
+        let transparent_bg_component = get_surface_color(
+            bg_index,
+            8,
+            &transparent_bg_steps_array,
+            is_dark,
+            &p_ref.neutral_2,
+        );
+        let on_transparent_bg_component = get_text(
+            color_index(transparent_bg_component, transparent_bg_steps_array.len()),
+            &transparent_bg_steps_array,
+            &control_steps_array[8],
+            text_steps_array.as_deref(),
+        );
+
         let primary = {
             let mut container_bg = if let Some(primary_container_bg_color) = primary_container_bg {
                 primary_container_bg_color
             } else {
                 get_surface_color(bg_index, 5, &step_array, is_dark, &control_steps_array[1])
             };
-            container_bg.alpha = (container_alpha + if is_dark { 0.3 } else { 0.25 }).min(1.0);
 
             let step_array = steps(container_bg, NonZeroUsize::new(100).unwrap());
             let base_index: usize = color_index(container_bg, step_array.len());
@@ -1146,6 +1200,45 @@ impl ThemeBuilder {
                 is_high_contrast,
             )
         };
+        let transparent_primary = {
+            let mut container_bg = if let Some(primary_container_bg_color) = primary_container_bg {
+                primary_container_bg_color
+            } else {
+                get_surface_color(bg_index, 5, &step_array, is_dark, &control_steps_array[1])
+            };
+            container_bg.alpha = (container_alpha + if is_dark { 0.3 } else { 0.25 }).min(1.0);
+
+            let step_array = steps(container_bg, NonZeroUsize::new(100).unwrap());
+            let base_index: usize = color_index(container_bg, step_array.len());
+            let component_base =
+                get_surface_color(base_index, 6, &step_array, is_dark, &control_steps_array[3]);
+
+            Container::new(
+                Component::component(
+                    component_base,
+                    accent,
+                    get_text(
+                        color_index(component_base, step_array.len()),
+                        &step_array,
+                        &control_steps_array[8],
+                        text_steps_array.as_deref(),
+                    ),
+                    Srgba::new(0., 0., 0., 0.0),
+                    Srgba::new(0., 0., 0., 0.0),
+                    is_high_contrast,
+                    control_steps_array[8],
+                ),
+                container_bg,
+                get_text(
+                    base_index,
+                    &step_array,
+                    &control_steps_array[8],
+                    text_steps_array.as_deref(),
+                ),
+                get_small_widget_color(base_index, 5, &neutral_steps, &control_steps_array[6]),
+                is_high_contrast,
+            )
+        };
 
         let accent_text = if is_dark {
             (primary.base.relative_contrast(accent.color) < 4.).then(|| {
@@ -1220,13 +1313,11 @@ impl ThemeBuilder {
             ),
             primary,
             secondary: {
-                let mut container_bg = if let Some(secondary_container_bg) = secondary_container_bg
+                let container_bg = if let Some(secondary_container_bg) = secondary_container_bg {
-                {
                     secondary_container_bg
                 } else {
                     get_surface_color(bg_index, 10, &step_array, is_dark, &control_steps_array[2])
                 };
-                container_bg.alpha = (container_alpha + if is_dark { 0.6 } else { 0.5 }).min(1.0);
 
                 let step_array = steps(container_bg, NonZeroUsize::new(100).unwrap());
                 let base_index = color_index(container_bg, step_array.len());
@@ -1386,6 +1477,67 @@ impl ThemeBuilder {
             frosted_system_interface,
             frosted_panel,
             frosted_applets,
+            transparent_background: Container::new(
+                Component::component(
+                    transparent_bg_component,
+                    accent,
+                    on_transparent_bg_component,
+                    Srgba::new(0., 0., 0., 0.0),
+                    Srgba::new(0., 0., 0., 0.0),
+                    is_high_contrast,
+                    control_steps_array[8],
+                ),
+                transparent_bg,
+                get_text(
+                    bg_index,
+                    &transparent_bg_steps_array,
+                    &control_steps_array[8],
+                    text_steps_array.as_deref(),
+                ),
+                get_small_widget_color(bg_index, 5, &neutral_steps, &control_steps_array[6]),
+                is_high_contrast,
+            ),
+            transparent_primary,
+            transparent_secondary: {
+                let mut container_bg = if let Some(secondary_container_bg) = secondary_container_bg
+                {
+                    secondary_container_bg
+                } else {
+                    get_surface_color(bg_index, 10, &step_array, is_dark, &control_steps_array[2])
+                };
+                container_bg.alpha = (container_alpha + if is_dark { 0.6 } else { 0.5 }).min(1.0);
+
+                let step_array = steps(container_bg, NonZeroUsize::new(100).unwrap());
+                let base_index = color_index(container_bg, step_array.len());
+                let secondary_component =
+                    get_surface_color(base_index, 3, &step_array, is_dark, &control_steps_array[4]);
+
+                Container::new(
+                    Component::component(
+                        secondary_component,
+                        accent,
+                        get_text(
+                            color_index(secondary_component, step_array.len()),
+                            &step_array,
+                            &control_steps_array[8],
+                            text_steps_array.as_deref(),
+                        ),
+                        Srgba::new(0., 0., 0., 0.0),
+                        Srgba::new(0., 0., 0., 0.0),
+                        is_high_contrast,
+                        control_steps_array[8],
+                    ),
+                    container_bg,
+                    get_text(
+                        base_index,
+                        &step_array,
+                        &control_steps_array[8],
+                        text_steps_array.as_deref(),
+                    ),
+                    get_small_widget_color(base_index, 5, &neutral_steps, &control_steps_array[6]),
+                    is_high_contrast,
+                )
+            },
         };
         theme.spacing = spacing;
         theme.corner_radii = corner_radii;
@@ -1407,6 +1559,7 @@ impl ThemeBuilder {
 
 /// Actual blur radius is decided by cosmic-comp,
 /// but this represents the strength of the blur effect.
+#[allow(missing_docs)]
 #[repr(u8)]
 #[derive(Default, Copy, Clone, Debug, Serialize, Deserialize, PartialEq)]
 pub enum BlurStrength {

src/app/cosmic.rs

@@ -784,10 +784,11 @@ impl<T: Application> Cosmic<T> {
                         crate::core::AppType::Applet => t.frosted_applets,
                     }
                 };
-                if !new_blur {
+                theme.transparent = new_blur;
-                    theme = theme.into_opaque();
+                let mut guard = THEME.lock().unwrap();
-                }
+                guard.set_theme(theme.theme_type);
-                THEME.lock().unwrap().set_theme(theme.theme_type);
+                guard.transparent = new_blur;
+                drop(guard);
 
                 let core = self.app.core();
                 if core.auto_blur {
@@ -810,12 +811,23 @@ impl<T: Application> Cosmic<T> {
                 }
             }
 
-            Action::SystemThemeChange(keys, theme) => {
+            Action::SystemThemeChange(keys, mut theme) => {
                 let cur_is_dark = THEME.lock().unwrap().theme_type.is_dark();
                 // Ignore updates if the current theme mode does not match.
                 if cur_is_dark != theme.cosmic().is_dark {
                     return iced::Task::none();
                 }
+                // update transparent
+                let new_blur = WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland) && {
+                    let t = theme.cosmic();
+                    match self.app.core().app_type() {
+                        crate::core::AppType::Window => t.frosted_windows,
+                        crate::core::AppType::System => t.frosted_system_interface,
+                        crate::core::AppType::Applet => t.frosted_applets,
+                    }
+                };
+                theme.transparent = new_blur;
+
                 let cmd = self.app.system_theme_update(&keys, theme.cosmic());
                 // Record the last-known system theme in event that the current theme is custom.
                 self.app.core_mut().system_theme = theme.clone();
@@ -839,11 +851,12 @@ impl<T: Application> Cosmic<T> {
                         } else {
                             theme
                         };
+                        new_theme.transparent = new_blur;
                         new_theme.theme_type.prefer_dark(prefer_dark);
-                        // TODO adjust theme container alphas to remove transparency?
-                        // if auto-blur is disabled & theme is frosted, should we make container colors in theme opaque?
 
                         cosmic_theme.set_theme(new_theme.theme_type);
+                        cosmic_theme.transparent = new_blur;
+
                         #[cfg(all(feature = "wayland", target_os = "linux"))]
                         if self.app.core().sync_window_border_radii_to_theme() {
                             use iced_runtime::platform_specific::wayland::CornerRadius;
@@ -954,6 +967,7 @@ impl<T: Application> Cosmic<T> {
                 } {
                     return iced::Task::none();
                 }
+
                 let mut cmds = vec![self.app.system_theme_mode_update(&keys, &mode)];
 
                 let core = self.app.core_mut();
@@ -982,6 +996,15 @@ impl<T: Application> Cosmic<T> {
                     } else {
                         new_theme
                     };
+                    let new_blur = WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland) && {
+                        let t = new_theme.cosmic();
+                        match core.app_type() {
+                            crate::core::AppType::Window => t.frosted_windows,
+                            crate::core::AppType::System => t.frosted_system_interface,
+                            crate::core::AppType::Applet => t.frosted_applets,
+                        }
+                    };
+                    new_theme.transparent = new_blur;
 
                     core.system_theme = new_theme.clone();
                     {
@@ -989,20 +1012,8 @@ impl<T: Application> Cosmic<T> {
 
                         // Only apply update if the theme is set to load a system theme
                         if let ThemeType::System { .. } = cosmic_theme.theme_type {
-                            let new_blur =
-                                WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland) && {
-                                    let t = new_theme.cosmic();
-                                    match self.app.core().app_type() {
-                                        crate::core::AppType::Window => t.frosted_windows,
-                                        crate::core::AppType::System => t.frosted_system_interface,
-                                        crate::core::AppType::Applet => t.frosted_applets,
-                                    }
-                                };
-                            if !new_blur {
-                                new_theme = new_theme.into_opaque();
-                            }
-
                             cosmic_theme.set_theme(new_theme.theme_type);
+                            cosmic_theme.transparent = new_blur;
                             #[cfg(all(feature = "wayland", target_os = "linux"))]
                             if self.app.core().sync_window_border_radii_to_theme() {
                                 use iced_runtime::platform_specific::wayland::CornerRadius;
@@ -1087,7 +1098,7 @@ impl<T: Application> Cosmic<T> {
 
                                 let core = self.app.core();
                                 if core.auto_blur {
-                                    let blur = if new_blur {
+                                    let blur = if cosmic_theme.transparent {
                                         iced::window::enable_blur
                                     } else {
                                         iced::window::disable_blur
@@ -1206,6 +1217,18 @@ impl<T: Application> Cosmic<T> {
                     } else {
                         crate::theme::system_light()
                     };
+                    if let ThemeType::System { .. } = new_theme.theme_type {
+                        let new_blur = WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland)
+                            && {
+                                let t = new_theme.cosmic();
+                                match core.app_type() {
+                                    crate::core::AppType::Window => t.frosted_windows,
+                                    crate::core::AppType::System => t.frosted_system_interface,
+                                    crate::core::AppType::Applet => t.frosted_applets,
+                                }
+                            };
+                        new_theme.transparent = new_blur;
+                    }
                     core.system_theme = new_theme.clone();
                     {
                         let mut cosmic_theme = THEME.lock().unwrap();
@@ -1215,21 +1238,7 @@ impl<T: Application> Cosmic<T> {
                             let mut cmds = Vec::with_capacity(1 + self.tracked_windows.len());
 
                             if core.auto_blur {
-                                let new_blur =
+                                let blur = if cosmic_theme.transparent {
-                                    WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland) && {
-                                        let t = new_theme.cosmic();
-                                        match self.app.core().app_type() {
-                                            crate::core::AppType::Window => t.frosted_windows,
-                                            crate::core::AppType::System => {
-                                                t.frosted_system_interface
-                                            }
-                                            crate::core::AppType::Applet => t.frosted_applets,
-                                        }
-                                    };
-                                if !new_blur {
-                                    new_theme = new_theme.into_opaque();
-                                }
-                                let blur = if new_blur {
                                     iced::window::enable_blur
                                 } else {
                                     iced::window::disable_blur
@@ -1370,9 +1379,7 @@ impl<T: Application> Cosmic<T> {
                             crate::core::AppType::Applet => t.frosted_applets,
                         }
                     };
-                    if !new_blur {
+                    theme.transparent = new_blur;
-                        *theme = theme.into_opaque();
-                    }
                     let blur_cmd = if core.auto_blur {
                         let blur = if new_blur {
                             iced::window::enable_blur
@@ -1412,6 +1419,7 @@ impl<T: Application> Cosmic<T> {
                 return iced_runtime::window::run_with_handle(id, init_windowing_system);
             }
             Action::WindowingSystemInitialized => {
+                // TODO do this after blur event confirms support instead of for all wayland windows
                 let core = self.app.core();
                 let new_blur = WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland) && {
                     let t = core.system_theme.cosmic();
@@ -1423,17 +1431,8 @@ impl<T: Application> Cosmic<T> {
                 };
                 let mut t = THEME.lock().unwrap();
 
-                if let ThemeType::System { prefer_dark, theme } = &t.theme_type
+                t.transparent = matches!(&t.theme_type, ThemeType::System { .. }) && new_blur;
-                    && new_blur
+
-                {
-                    let mut reloaded = if theme.is_dark {
-                        crate::theme::system_dark()
-                    } else {
-                        crate::theme::system_light()
-                    };
-                    reloaded.theme_type.prefer_dark(*prefer_dark);
-                    *t = reloaded;
-                }
                 if core.auto_blur {
                     let blur = if new_blur {
                         iced::window::enable_blur

src/app/mod.rs

@@ -820,7 +820,7 @@ impl<App: Application> ApplicationExt for App {
                                 let cosmic = theme.cosmic();
                                 container::Style {
                                     background: Some(iced::Background::Color(
-                                        cosmic.background.base.into(),
+                                        cosmic.background(theme.transparent).base.into(),
                                     )),
                                     border: iced::Border {
                                         radius: [
@@ -849,7 +849,7 @@ impl<App: Application> ApplicationExt for App {
                 container::Style {
                     background: if content_container {
                         Some(iced::Background::Color(
-                            theme.cosmic().background.base.into(),
+                            theme.cosmic().background(theme.transparent).base.into(),
                         ))
                     } else {
                         None

src/applet/mod.rs

@@ -227,7 +227,7 @@ impl Context {
         let icon = widget::icon(icon)
             .class(if symbolic {
                 theme::Svg::Custom(Rc::new(|theme| iced_widget::svg::Style {
-                    color: Some(theme.cosmic().background.on.into()),
+                    color: Some(theme.cosmic().background(theme.transparent).on.into()),
                 }))
             } else {
                 theme::Svg::default()
@@ -378,18 +378,18 @@ impl Context {
                 Container::<Message, _, Renderer>::new(content).style(|theme| {
                     let cosmic = theme.cosmic();
                     let corners = cosmic.corner_radii;
-                    let mut bg = cosmic.background.base;
+                    let mut bg = cosmic.background(theme.transparent).base;
                     bg.alpha = (bg.alpha + if cosmic.is_dark { 0.6 } else { 0.5 }).min(1.);
                     iced_widget::container::Style {
-                        text_color: Some(cosmic.background.on.into()),
+                        text_color: Some(cosmic.background(theme.transparent).on.into()),
                         background: Some(Color::from(bg).into()),
                         border: iced::Border {
                             radius: corners.radius_m.into(),
                             width: 1.0,
-                            color: cosmic.background.divider.into(),
+                            color: cosmic.background(theme.transparent).divider.into(),
                         },
                         shadow: Shadow::default(),
-                        icon_color: Some(cosmic.background.on.into()),
+                        icon_color: Some(cosmic.background(theme.transparent).on.into()),
                         snap: true,
                     }
                 }),

src/theme/mod.rs

@@ -50,6 +50,7 @@ pub static TRANSPARENT_COMPONENT: LazyLock<Component> = LazyLock::new(|| Compone
 pub(crate) static THEME: Mutex<Theme> = Mutex::new(Theme {
     theme_type: ThemeType::Dark,
     layer: cosmic_theme::Layer::Background,
+    transparent: false,
 });
 
 /// Currently-defined theme.
@@ -213,6 +214,7 @@ impl ThemeType {
 pub struct Theme {
     pub theme_type: ThemeType,
     pub layer: cosmic_theme::Layer,
+    pub transparent: bool,
 }
 
 impl Theme {
@@ -283,9 +285,9 @@ impl Theme {
     /// can be used in a component that is intended to be a child of a `CosmicContainer`
     pub fn current_container(&self) -> &cosmic_theme::Container {
         match self.layer {
-            cosmic_theme::Layer::Background => &self.cosmic().background,
+            cosmic_theme::Layer::Background => &self.cosmic().background(self.transparent),
-            cosmic_theme::Layer::Primary => &self.cosmic().primary,
+            cosmic_theme::Layer::Primary => &self.cosmic().primary(self.transparent),
-            cosmic_theme::Layer::Secondary => &self.cosmic().secondary,
+            cosmic_theme::Layer::Secondary => &self.cosmic().secondary(self.transparent),
         }
     }
 
@@ -294,29 +296,6 @@ impl Theme {
     pub fn set_theme(&mut self, theme: ThemeType) {
         self.theme_type = theme;
     }
-
-    pub fn into_opaque(&self) -> Self {
-        let mut new_theme = Theme {
-            theme_type: match &self.theme_type {
-                ThemeType::System { theme, prefer_dark } => {
-                    let mut new_t = (**theme).clone();
-                    new_t.background.base.alpha = 1.0;
-                    new_t.primary.base.alpha = 1.0;
-                    new_t.secondary.base.alpha = 1.0;
-                    ThemeType::System {
-                        theme: Arc::new(new_t),
-                        prefer_dark: *prefer_dark,
-                    }
-                }
-                other => other.clone(),
-            },
-            layer: self.layer,
-        };
-        let cosmic = new_theme.cosmic();
-        // copy theme but make all container colors opaque
-
-        new_theme
-    }
 }
 
 impl LayeredTheme for Theme {

src/theme/style/button.rs

@@ -128,20 +128,20 @@ pub fn appearance(
             let (background, _, _) = color(&cosmic.text_button);
             appearance.background = Some(Background::Color(background));
 
-            appearance.icon_color = Some(cosmic.background.on.into());
+            appearance.icon_color = Some(cosmic.background(theme.transparent).on.into());
-            appearance.text_color = Some(cosmic.background.on.into());
+            appearance.text_color = Some(cosmic.background(theme.transparent).on.into());
             corner_radii = &cosmic.corner_radii.radius_0;
         }
         Button::AppletIcon => {
             let (background, _, _) = color(&cosmic.text_button);
             appearance.background = Some(Background::Color(background));
 
-            appearance.icon_color = Some(cosmic.background.on.into());
+            appearance.icon_color = Some(cosmic.background(theme.transparent).on.into());
-            appearance.text_color = Some(cosmic.background.on.into());
+            appearance.text_color = Some(cosmic.background(theme.transparent).on.into());
         }
         Button::MenuFolder => {
             // Menu folders cannot be disabled, ignore customized icon and text color
-            let component = &cosmic.background.component;
+            let component = &cosmic.background(theme.transparent).component;
             let (background, _, _) = color(component);
             appearance.background = Some(Background::Color(background));
             appearance.icon_color = Some(component.on.into());
@@ -150,11 +150,12 @@ pub fn appearance(
         }
         Button::ListItem => {
             corner_radii = &[0.0; 4];
-            let (background, text, icon) = color(&cosmic.background.component);
+            let (background, text, icon) = color(&cosmic.background(theme.transparent).component);
 
             if selected {
-                appearance.background =
+                appearance.background = Some(Background::Color(
-                    Some(Background::Color(cosmic.primary.component.hover.into()));
+                    cosmic.primary(theme.transparent).component.hover.into(),
+                ));
                 appearance.icon_color = Some(cosmic.accent.base.into());
                 appearance.text_color = Some(cosmic.accent_text_color().into());
             } else {
@@ -164,7 +165,7 @@ pub fn appearance(
             }
         }
         Button::MenuItem => {
-            let (background, text, icon) = color(&cosmic.background.component);
+            let (background, text, icon) = color(&cosmic.background(theme.transparent).component);
             appearance.background = Some(Background::Color(background));
             appearance.icon_color = icon;
             appearance.text_color = text;
@@ -280,6 +281,6 @@ impl Catalog for crate::Theme {
     }
 
     fn selection_background(&self) -> Background {
-        Background::Color(self.cosmic().primary.base.into())
+        Background::Color(self.cosmic().primary(self.transparent).base.into())
     }
 }

src/theme/style/dropdown.rs

@@ -13,18 +13,28 @@ impl dropdown::menu::StyleSheet for Theme {
 
         dropdown::menu::Appearance {
             text_color: cosmic.on_bg_color().into(),
-            background: Background::Color(cosmic.background.component.base.into()),
+            background: Background::Color(
+                cosmic.background(self.transparent).component.base.into(),
+            ),
             border_width: 0.0,
             border_radius: cosmic.corner_radii.radius_m.into(),
             border_color: Color::TRANSPARENT,
 
             hovered_text_color: cosmic.on_bg_color().into(),
-            hovered_background: Background::Color(cosmic.primary.component.hover.into()),
+            hovered_background: Background::Color(
+                cosmic.primary(self.transparent).component.hover.into(),
+            ),
 
             selected_text_color: cosmic.accent_text_color().into(),
-            selected_background: Background::Color(cosmic.primary.component.hover.into()),
+            selected_background: Background::Color(
+                cosmic.primary(self.transparent).component.hover.into(),
+            ),
 
-            description_color: cosmic.primary.component.on_disabled.into(),
+            description_color: cosmic
+                .primary(self.transparent)
+                .component
+                .on_disabled
+                .into(),
         }
     }
 }

src/theme/style/iced.rs

@@ -228,11 +228,11 @@ impl iced_checkbox::Catalog for Theme {
                     },
                     Checkbox::Secondary => iced_checkbox::Style {
                         background: Background::Color(if is_checked {
-                            cosmic.background.component.base.into()
+                            cosmic.background(self.transparent).component.base.into()
                         } else {
                             self.current_container().small_widget.into()
                         }),
-                        icon_color: cosmic.background.on.into(),
+                        icon_color: cosmic.background(self.transparent).on.into(),
                         border: Border {
                             radius: corners.radius_xs.into(),
                             width: if is_checked { 0.0 } else { 1.0 },
@@ -413,11 +413,13 @@ impl<'a> Container<'a> {
     }
 
     #[must_use]
-    pub fn background(theme: &cosmic_theme::Theme) -> iced_container::Style {
+    pub fn background(theme: &cosmic_theme::Theme, transparent: bool) -> iced_container::Style {
         iced_container::Style {
-            icon_color: Some(Color::from(theme.background.on)),
+            icon_color: Some(Color::from(theme.background(transparent).on)),
-            text_color: Some(Color::from(theme.background.on)),
+            text_color: Some(Color::from(theme.background(transparent).on)),
-            background: Some(iced::Background::Color(theme.background.base.into())),
+            background: Some(iced::Background::Color(
+                theme.background(transparent).base.into(),
+            )),
             border: Border {
                 radius: theme.corner_radii.radius_s.into(),
                 ..Default::default()
@@ -428,11 +430,13 @@ impl<'a> Container<'a> {
     }
 
     #[must_use]
-    pub fn primary(theme: &cosmic_theme::Theme) -> iced_container::Style {
+    pub fn primary(theme: &cosmic_theme::Theme, transparent: bool) -> iced_container::Style {
         iced_container::Style {
-            icon_color: Some(Color::from(theme.primary.on)),
+            icon_color: Some(Color::from(theme.primary(transparent).on)),
-            text_color: Some(Color::from(theme.primary.on)),
+            text_color: Some(Color::from(theme.primary(transparent).on)),
-            background: Some(iced::Background::Color(theme.primary.base.into())),
+            background: Some(iced::Background::Color(
+                theme.primary(transparent).base.into(),
+            )),
             border: Border {
                 radius: theme.corner_radii.radius_s.into(),
                 ..Default::default()
@@ -443,11 +447,13 @@ impl<'a> Container<'a> {
     }
 
     #[must_use]
-    pub fn secondary(theme: &cosmic_theme::Theme) -> iced_container::Style {
+    pub fn secondary(theme: &cosmic_theme::Theme, transparent: bool) -> iced_container::Style {
         iced_container::Style {
-            icon_color: Some(Color::from(theme.secondary.on)),
+            icon_color: Some(Color::from(theme.secondary(transparent).on)),
-            text_color: Some(Color::from(theme.secondary.on)),
+            text_color: Some(Color::from(theme.secondary(transparent).on)),
-            background: Some(iced::Background::Color(theme.secondary.base.into())),
+            background: Some(iced::Background::Color(
+                theme.secondary(transparent).base.into(),
+            )),
             border: Border {
                 radius: theme.corner_radii.radius_s.into(),
                 ..Default::default()
@@ -497,9 +503,11 @@ impl iced_container::Catalog for Theme {
             Container::Custom(f) => f(self),
 
             Container::WindowBackground => iced_container::Style {
-                icon_color: Some(Color::from(cosmic.background.on)),
+                icon_color: Some(Color::from(cosmic.background(self.transparent).on)),
-                text_color: Some(Color::from(cosmic.background.on)),
+                text_color: Some(Color::from(cosmic.background(self.transparent).on)),
-                background: Some(iced::Background::Color(cosmic.background.base.into())),
+                background: Some(iced::Background::Color(
+                    cosmic.background(self.transparent).base.into(),
+                )),
                 border: Border {
                     radius: [
                         cosmic.corner_radii.radius_0[0],
@@ -537,12 +545,13 @@ impl iced_container::Catalog for Theme {
                 let (icon_color, text_color) = if *focused {
                     (
                         Color::from(cosmic.accent_text_color()),
-                        Color::from(cosmic.background.on),
+                        Color::from(cosmic.background(self.transparent).on),
                     )
                 } else {
                     use crate::ext::ColorExt;
-                    let unfocused_color = Color::from(cosmic.background.component.on)
+                    let unfocused_color =
-                        .blend_alpha(cosmic.background.base.into(), 0.5);
+                        Color::from(cosmic.background(self.transparent).component.on)
+                            .blend_alpha(cosmic.background(self.transparent).base.into(), 0.5);
                     (unfocused_color, unfocused_color)
                 };
 
@@ -552,7 +561,9 @@ impl iced_container::Catalog for Theme {
                     background: if *transparent {
                         None
                     } else {
-                        Some(iced::Background::Color(cosmic.background.base.into()))
+                        Some(iced::Background::Color(
+                            cosmic.background(self.transparent).base.into(),
+                        ))
                     },
                     border: Border {
                         radius: [
@@ -578,23 +589,23 @@ impl iced_container::Catalog for Theme {
             }
 
             Container::ContextDrawer => {
-                let mut a = Container::primary(cosmic);
+                let mut a = Container::primary(cosmic, self.transparent);
                 if let Some(Background::Color(ref mut color)) = a.background {
                     color.a = (color.a + if cosmic.is_dark { 0.60 } else { 0.5 }).min(1.);
                 }
 
                 if cosmic.is_high_contrast {
                     a.border.width = 1.;
-                    a.border.color = cosmic.primary.divider.into();
+                    a.border.color = cosmic.primary(self.transparent).divider.into();
                 }
                 a
             }
 
-            Container::Background => Container::background(cosmic),
+            Container::Background => Container::background(cosmic, self.transparent),
 
-            Container::Primary => Container::primary(cosmic),
+            Container::Primary => Container::primary(cosmic, self.transparent),
 
-            Container::Secondary => Container::secondary(cosmic),
+            Container::Secondary => Container::secondary(cosmic, self.transparent),
 
             Container::Dropdown => iced_container::Style {
                 icon_color: None,
@@ -626,10 +637,14 @@ impl iced_container::Catalog for Theme {
 
                 match self.layer {
                     cosmic_theme::Layer::Background => iced_container::Style {
-                        icon_color: Some(Color::from(cosmic.background.component.on)),
+                        icon_color: Some(Color::from(
-                        text_color: Some(Color::from(cosmic.background.component.on)),
+                            cosmic.background(self.transparent).component.on,
+                        )),
+                        text_color: Some(Color::from(
+                            cosmic.background(self.transparent).component.on,
+                        )),
                         background: Some(iced::Background::Color(
-                            cosmic.background.component.base.into(),
+                            cosmic.background(self.transparent).component.base.into(),
                         )),
                         border: Border {
                             radius: cosmic.corner_radii.radius_s.into(),
@@ -639,10 +654,14 @@ impl iced_container::Catalog for Theme {
                         snap: true,
                     },
                     cosmic_theme::Layer::Primary => iced_container::Style {
-                        icon_color: Some(Color::from(cosmic.primary.component.on)),
+                        icon_color: Some(Color::from(
-                        text_color: Some(Color::from(cosmic.primary.component.on)),
+                            cosmic.primary(self.transparent).component.on,
+                        )),
+                        text_color: Some(Color::from(
+                            cosmic.primary(self.transparent).component.on,
+                        )),
                         background: Some(iced::Background::Color(
-                            cosmic.primary.component.base.into(),
+                            cosmic.primary(self.transparent).component.base.into(),
                         )),
                         border: Border {
                             radius: cosmic.corner_radii.radius_s.into(),
@@ -652,10 +671,14 @@ impl iced_container::Catalog for Theme {
                         snap: true,
                     },
                     cosmic_theme::Layer::Secondary => iced_container::Style {
-                        icon_color: Some(Color::from(cosmic.secondary.component.on)),
+                        icon_color: Some(Color::from(
-                        text_color: Some(Color::from(cosmic.secondary.component.on)),
+                            cosmic.secondary(self.transparent).component.on,
+                        )),
+                        text_color: Some(Color::from(
+                            cosmic.secondary(self.transparent).component.on,
+                        )),
                         background: Some(iced::Background::Color(
-                            cosmic.secondary.component.base.into(),
+                            cosmic.secondary(self.transparent).component.base.into(),
                         )),
                         border: Border {
                             radius: cosmic.corner_radii.radius_s.into(),
@@ -668,11 +691,13 @@ impl iced_container::Catalog for Theme {
             }
 
             Container::Dialog => iced_container::Style {
-                icon_color: Some(Color::from(cosmic.primary.on)),
+                icon_color: Some(Color::from(cosmic.primary(self.transparent).on)),
-                text_color: Some(Color::from(cosmic.primary.on)),
+                text_color: Some(Color::from(cosmic.primary(self.transparent).on)),
-                background: Some(iced::Background::Color(cosmic.primary.base.into())),
+                background: Some(iced::Background::Color(
+                    cosmic.primary(self.transparent).base.into(),
+                )),
                 border: Border {
-                    color: cosmic.primary.divider.into(),
+                    color: cosmic.primary(self.transparent).divider.into(),
                     width: 1.0,
                     radius: cosmic.corner_radii.radius_m.into(),
                 },
@@ -814,13 +839,15 @@ impl menu::Catalog for Theme {
 
         menu::Style {
             text_color: cosmic.on_bg_color().into(),
-            background: Background::Color(cosmic.background.base.into()),
+            background: Background::Color(cosmic.background(self.transparent).base.into()),
             border: Border {
                 radius: cosmic.corner_radii.radius_m.into(),
                 ..Default::default()
             },
             selected_text_color: cosmic.accent_text_color().into(),
-            selected_background: Background::Color(cosmic.background.component.hover.into()),
+            selected_background: Background::Color(
+                cosmic.background(self.transparent).component.hover.into(),
+            ),
             shadow: Default::default(),
         }
     }
@@ -858,7 +885,7 @@ impl pick_list::Catalog for Theme {
         match status {
             pick_list::Status::Active => appearance,
             pick_list::Status::Hovered => pick_list::Style {
-                background: Background::Color(cosmic.background.base.into()),
+                background: Background::Color(cosmic.background(self.transparent).base.into()),
                 ..appearance
             },
             pick_list::Status::Opened { is_hovered: _ } => appearance,
@@ -1054,7 +1081,10 @@ impl progress_bar::Catalog for Theme {
                 },
             )
         } else {
-            (theme.accent.base, theme.background.divider)
+            (
+                theme.accent.base,
+                theme.background(self.transparent).divider,
+            )
         };
         let border = Border {
             radius: theme.corner_radii.radius_xl.into(),
@@ -1527,7 +1557,7 @@ impl iced_widget::text_editor::Catalog for Theme {
         let selection = cosmic.accent.base.into();
         let value = cosmic.palette.neutral_9.into();
         let placeholder = cosmic.palette.neutral_9.with_alpha(0.7).into();
-        let icon: Color = cosmic.background.on.into();
+        let icon: Color = cosmic.background(self.transparent).on.into();
         // TODO do we need to add icon color back?
 
         match status {

src/theme/style/menu_bar.rs

@@ -64,7 +64,7 @@ impl StyleSheet for Theme {
 
     fn appearance(&self, style: &Self::Style) -> Appearance {
         let cosmic = self.cosmic();
-        let component = &cosmic.background.component;
+        let component = &cosmic.background(self.transparent).component;
         let mut bg = component.base;
         bg.alpha = (bg.alpha + if cosmic.is_dark { 0.6 } else { 0.5 }).min(1.);
 

src/widget/card/style.rs

@@ -31,16 +31,26 @@ impl crate::widget::card::style::Catalog for crate::Theme {
 
         match self.layer {
             cosmic_theme::Layer::Background => crate::widget::card::style::Style {
-                card_1: Background::Color(cosmic.background.component.hover.into()),
+                card_1: Background::Color(
-                card_2: Background::Color(cosmic.background.component.pressed.into()),
+                    cosmic.background(self.transparent).component.hover.into(),
+                ),
+                card_2: Background::Color(
+                    cosmic.background(self.transparent).component.pressed.into(),
+                ),
             },
             cosmic_theme::Layer::Primary => crate::widget::card::style::Style {
-                card_1: Background::Color(cosmic.primary.component.hover.into()),
+                card_1: Background::Color(cosmic.primary(self.transparent).component.hover.into()),
-                card_2: Background::Color(cosmic.primary.component.pressed.into()),
+                card_2: Background::Color(
+                    cosmic.primary(self.transparent).component.pressed.into(),
+                ),
             },
             cosmic_theme::Layer::Secondary => crate::widget::card::style::Style {
-                card_1: Background::Color(cosmic.secondary.component.hover.into()),
+                card_1: Background::Color(
-                card_2: Background::Color(cosmic.secondary.component.pressed.into()),
+                    cosmic.secondary(self.transparent).component.hover.into(),
+                ),
+                card_2: Background::Color(
+                    cosmic.secondary(self.transparent).component.pressed.into(),
+                ),
             },
         }
     }

src/widget/menu/menu_tree.rs

@@ -230,7 +230,7 @@ pub fn menu_items<
     }
 
     fn key_style(theme: &crate::Theme) -> TextStyle {
-        let mut color = theme.cosmic().background.component.on;
+        let mut color = theme.cosmic().background(theme.transparent).component.on;
         color.alpha *= 0.75;
         TextStyle {
             color: Some(color.into()),

src/widget/nav_bar.rs

@@ -173,7 +173,9 @@ pub fn nav_bar_style(theme: &Theme) -> iced_widget::container::Style {
     iced_widget::container::Style {
         icon_color: Some(cosmic.on_bg_color().into()),
         text_color: Some(cosmic.on_bg_color().into()),
-        background: Some(Background::Color(cosmic.primary.base.into())),
+        background: Some(Background::Color(
+            cosmic.primary(theme.transparent).base.into(),
+        )),
         border: Border {
             width: 0.0,
             color: Color::TRANSPARENT,