diff --git a/src/widget/list.rs b/src/widget/list.rs
index bf99ea11..c2a6d2ae 100644
--- a/src/widget/list.rs
+++ b/src/widget/list.rs
@@ -65,14 +65,10 @@ macro_rules! list_section {
 pub use list_section;
 
 pub fn list_section_style(theme: &Theme) -> widget::container::Appearance {
+    let cosmic = &theme.cosmic().primary;
     widget::container::Appearance {
-        text_color: None,
-        background: Some(Background::Color(
-            match theme {
-                Theme::Dark => Color::from_rgb8(0x27, 0x27, 0x27),
-                Theme::Light => Color::from_rgb8(0xf7, 0xf7, 0xf7),
-            }
-        )),
+        text_color: Some(cosmic.on.into()),
+        background: Some(Background::Color(cosmic.base.into())),
         border_radius: 8.0,
         border_width: 0.0,
         border_color: Color::TRANSPARENT,
diff --git a/src/widget/nav.rs b/src/widget/nav.rs
index 6f5ff974..50b0fee7 100644
--- a/src/widget/nav.rs
+++ b/src/widget/nav.rs
@@ -27,14 +27,10 @@ macro_rules! nav_bar {
 pub use nav_bar;
 
 pub fn nav_bar_style(theme: &Theme) -> widget::container::Appearance {
+    let cosmic = &theme.cosmic().primary;
     widget::container::Appearance {
-        text_color: None,
-        background: Some(Background::Color(
-            match theme {
-                Theme::Dark => Color::from_rgb8(0x29, 0x29, 0x29),
-                Theme::Light => Color::from_rgb8(0xfd, 0xfd, 0xfd),
-            }
-        )),
+        text_color: Some(cosmic.on.into()),
+        background: Some(Background::Color(cosmic.base.into())),
         border_radius: 8.0,
         border_width: 0.0,
         border_color: Color::TRANSPARENT,