diff --git a/crates/ui2/src/components/assistant_panel.rs b/crates/ui2/src/components/assistant_panel.rs
index b64f7befd30ff7f4ee45442234f3c6dc744a9433..fcba18a60f321db168f62e47a2d22caae170bb14 100644
--- a/crates/ui2/src/components/assistant_panel.rs
+++ b/crates/ui2/src/components/assistant_panel.rs
@@ -27,7 +27,7 @@ impl<S: 'static + Send + Sync + Clone> AssistantPanel<S> {
     }
 
     fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         Panel::new(self.scroll_state.clone())
             .children(vec![div()
diff --git a/crates/ui2/src/components/breadcrumb.rs b/crates/ui2/src/components/breadcrumb.rs
index b0c706f9abac46a6a19929828c44412e9d51b387..a721b59179a2e6fe9c22d6db912526f7f3e85f14 100644
--- a/crates/ui2/src/components/breadcrumb.rs
+++ b/crates/ui2/src/components/breadcrumb.rs
@@ -25,10 +25,9 @@ impl<S: 'static + Send + Sync + Clone> Breadcrumb<S> {
         }
     }
 
-    fn render_separator(&self, theme: &Theme) -> Div<S> {
-        div()
-            .child(" › ")
-            .text_color(HighlightColor::Default.hsla(theme))
+    fn render_separator(&self, cx: &WindowContext) -> Div<S> {
+        let color = ThemeColor::new(cx);
+        div().child(" › ").text_color(color.text_muted)
     }
 
     fn render(
@@ -36,21 +35,22 @@ impl<S: 'static + Send + Sync + Clone> Breadcrumb<S> {
         view_state: &mut S,
         cx: &mut ViewContext<S>,
     ) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
+        let color = ThemeColor::new(cx);
 
         let symbols_len = self.symbols.len();
 
         h_stack()
             .px_1()
-            // TODO: Read font from theme (or settings?).
-            .font("Zed Mono Extended")
             .text_sm()
-            .text_color(theme.middle.base.default.foreground)
+            .text_color(color.text_muted)
             .rounded_md()
-            .hover(|style| style.bg(theme.highest.base.hovered.background))
+            .hover(|style| style.bg(color.ghost_element_hover))
+            // TODO: Add this when active is ready
+            // .active(|style| style.bg(color.ghost_element_active))
             .child(self.path.clone().to_str().unwrap().to_string())
             .child(if !self.symbols.is_empty() {
-                self.render_separator(&theme)
+                self.render_separator(cx)
             } else {
                 div()
             })
@@ -68,7 +68,7 @@ impl<S: 'static + Send + Sync + Clone> Breadcrumb<S> {
 
                             let is_last_segment = ix == symbols_len - 1;
                             if !is_last_segment {
-                                items.push(self.render_separator(&theme));
+                                items.push(self.render_separator(cx));
                             }
 
                             items
@@ -107,7 +107,7 @@ mod stories {
             view_state: &mut S,
             cx: &mut ViewContext<S>,
         ) -> impl Element<ViewState = S> {
-            let theme = theme(cx);
+            let color = ThemeColor::new(cx);
 
             Story::container(cx)
                 .child(Story::title_for::<_, Breadcrumb<S>>(cx))
@@ -118,21 +118,21 @@ mod stories {
                         Symbol(vec![
                             HighlightedText {
                                 text: "impl ".to_string(),
-                                color: HighlightColor::Keyword.hsla(&theme),
+                                color: color.syntax.keyword,
                             },
                             HighlightedText {
                                 text: "BreadcrumbStory".to_string(),
-                                color: HighlightColor::Function.hsla(&theme),
+                                color: color.syntax.function,
                             },
                         ]),
                         Symbol(vec![
                             HighlightedText {
                                 text: "fn ".to_string(),
-                                color: HighlightColor::Keyword.hsla(&theme),
+                                color: color.syntax.keyword,
                             },
                             HighlightedText {
                                 text: "render".to_string(),
-                                color: HighlightColor::Function.hsla(&theme),
+                                color: color.syntax.function,
                             },
                         ]),
                     ],
diff --git a/crates/ui2/src/components/buffer.rs b/crates/ui2/src/components/buffer.rs
index 7a775327f9b67e3732c4d285a0e74a735e74f68c..9564ede748e802eb0ca750a93d1bbba35706e949 100644
--- a/crates/ui2/src/components/buffer.rs
+++ b/crates/ui2/src/components/buffer.rs
@@ -163,19 +163,19 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
     }
 
     fn render_row(row: BufferRow, cx: &WindowContext) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
         let system_color = SystemColor::new();
+        let color = ThemeColor::new(cx);
 
         let line_background = if row.current {
-            theme.middle.base.default.background
+            color.editor_active_line
         } else {
             system_color.transparent
         };
 
         let line_number_color = if row.current {
-            HighlightColor::Default.hsla(&theme)
+            color.text
         } else {
-            HighlightColor::Comment.hsla(&theme)
+            color.syntax.comment
         };
 
         h_stack()
@@ -225,14 +225,14 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let rows = self.render_rows(cx);
 
         v_stack()
             .flex_1()
             .w_full()
             .h_full()
-            .bg(theme.highest.base.default.background)
+            .bg(color.editor_background)
             .children(rows)
     }
 }
@@ -268,7 +268,7 @@ mod stories {
             _view: &mut S,
             cx: &mut ViewContext<S>,
         ) -> impl Element<ViewState = S> {
-            let theme = theme(cx);
+            let color = ThemeColor::new(cx);
 
             Story::container(cx)
                 .child(Story::title_for::<_, Buffer<S>>(cx))
diff --git a/crates/ui2/src/components/buffer_search.rs b/crates/ui2/src/components/buffer_search.rs
index ddc18bdc77d149900a4996f88a7ba121601d9b76..395c538a6c50bdbc9565605230dd5194eedf8f00 100644
--- a/crates/ui2/src/components/buffer_search.rs
+++ b/crates/ui2/src/components/buffer_search.rs
@@ -21,27 +21,22 @@ impl BufferSearch {
     }
 
     pub fn view(cx: &mut WindowContext) -> View<Self> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         view(cx.entity(|cx| Self::new()), Self::render)
     }
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
-        let theme = theme(cx);
-
-        h_stack()
-            .bg(theme.highest.base.default.background)
-            .p_2()
-            .child(
-                h_stack()
-                    .child(Input::new("Search (↑/↓ for previous/next query)"))
-                    .child(
-                        IconButton::<Self>::new(Icon::Replace)
-                            .when(self.is_replace_open, |this| this.color(IconColor::Accent))
-                            .on_click(|buffer_search, cx| {
-                                buffer_search.toggle_replace(cx);
-                            }),
-                    ),
-            )
+        let color = ThemeColor::new(cx);
+
+        h_stack().bg(color.toolbar_background).p_2().child(
+            h_stack().child(Input::new("Search")).child(
+                IconButton::<Self>::new(Icon::Replace)
+                    .when(self.is_replace_open, |this| this.color(IconColor::Accent))
+                    .on_click(|buffer_search, cx| {
+                        buffer_search.toggle_replace(cx);
+                    }),
+            ),
+        )
     }
 }
diff --git a/crates/ui2/src/components/chat_panel.rs b/crates/ui2/src/components/chat_panel.rs
index 45a62e207a264ce1eff21ae59bb1f311135c96cd..4f0e3bd3c3ef9aabd47ce5bff7445368918842e8 100644
--- a/crates/ui2/src/components/chat_panel.rs
+++ b/crates/ui2/src/components/chat_panel.rs
@@ -26,8 +26,6 @@ impl<S: 'static + Send + Sync + Clone> ChatPanel<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
-
         div()
             .flex()
             .flex_col()
diff --git a/crates/ui2/src/components/collab_panel.rs b/crates/ui2/src/components/collab_panel.rs
index 55733ed8d360d332f222bbaea7815289b42d78a7..560c1d7f1250af3cd6fb56830d7e3badf96224c4 100644
--- a/crates/ui2/src/components/collab_panel.rs
+++ b/crates/ui2/src/components/collab_panel.rs
@@ -24,7 +24,7 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let color = ThemeColor::new(cx);
 
         v_stack()
@@ -35,20 +35,15 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
                     .w_full()
                     .overflow_y_scroll(self.scroll_state.clone())
                     .child(
-                        div()
-                            .bg(theme.lowest.base.default.background)
-                            .pb_1()
-                            .border_color(theme.lowest.base.default.border)
-                            .border_b()
-                            .child(
-                                List::new(static_collab_panel_current_call())
-                                    .header(
-                                        ListHeader::new("CRDB")
-                                            .set_left_icon(Icon::Hash.into())
-                                            .set_toggle(ToggleState::Toggled),
-                                    )
-                                    .set_toggle(ToggleState::Toggled),
-                            ),
+                        div().pb_1().border_color(color.border).border_b().child(
+                            List::new(static_collab_panel_current_call())
+                                .header(
+                                    ListHeader::new("CRDB")
+                                        .set_left_icon(Icon::Hash.into())
+                                        .set_toggle(ToggleState::Toggled),
+                                )
+                                .set_toggle(ToggleState::Toggled),
+                        ),
                     )
                     .child(
                         v_stack().py_1().child(
@@ -86,13 +81,13 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
                     .h_7()
                     .px_2()
                     .border_t()
-                    .border_color(theme.middle.variant.default.border)
+                    .border_color(color.border)
                     .flex()
                     .items_center()
                     .child(
                         div()
                             .text_sm()
-                            .text_color(theme.middle.variant.default.foreground)
+                            .text_color(color.text_placeholder)
                             .child("Find..."),
                     ),
             )
@@ -102,8 +97,9 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
         &self,
         label: impl Into<SharedString>,
         expanded: bool,
-        theme: &Theme,
+        cx: &WindowContext,
     ) -> impl Element<ViewState = S> {
+        let color = ThemeColor::new(cx);
         div()
             .h_7()
             .px_2()
@@ -121,7 +117,7 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
                         })
                         .w_3p5()
                         .h_3p5()
-                        .text_color(theme.middle.variant.default.foreground),
+                        .text_color(color.icon_muted),
                 ),
             )
     }
@@ -130,14 +126,16 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
         &self,
         avatar_uri: impl Into<SharedString>,
         label: impl Into<SharedString>,
-        theme: &Theme,
+        cx: &WindowContext,
     ) -> impl Element<ViewState = S> {
+        let color = ThemeColor::new(cx);
+
         div()
             .h_7()
             .px_2()
             .flex()
             .items_center()
-            .hover(|style| style.bg(theme.lowest.variant.hovered.background))
+            .hover(|style| style.bg(color.ghost_element_hover))
             // .active(|style| style.fill(theme.lowest.variant.pressed.background))
             .child(
                 div()
@@ -146,11 +144,11 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
                     .gap_1()
                     .text_sm()
                     .child(
-                        img().uri(avatar_uri).size_3p5().rounded_full().bg(theme
-                            .middle
-                            .positive
-                            .default
-                            .foreground),
+                        img()
+                            .uri(avatar_uri)
+                            .size_3p5()
+                            .rounded_full()
+                            .bg(color.image_fallback_background),
                     )
                     .child(label.into()),
             )
diff --git a/crates/ui2/src/components/context_menu.rs b/crates/ui2/src/components/context_menu.rs
index b3ed884e64f42baf68e0835c4e16b2b1628b5b8a..d37b38dd80d5d55c98a6ec8143c343c23ec008ed 100644
--- a/crates/ui2/src/components/context_menu.rs
+++ b/crates/ui2/src/components/context_menu.rs
@@ -44,13 +44,13 @@ impl<S: 'static + Send + Sync + Clone> ContextMenu<S> {
         }
     }
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         v_stack()
             .flex()
-            .bg(theme.lowest.base.default.background)
+            .bg(color.elevated_surface)
             .border()
-            .border_color(theme.lowest.base.default.border)
+            .border_color(color.border)
             .child(
                 List::new(
                     self.items
diff --git a/crates/ui2/src/components/editor_pane.rs b/crates/ui2/src/components/editor_pane.rs
index 59dc2619fa0a4341ac89d549d468ea85a7f63354..b54ad3110014d5d289c36552c91ae18334e3f475 100644
--- a/crates/ui2/src/components/editor_pane.rs
+++ b/crates/ui2/src/components/editor_pane.rs
@@ -43,7 +43,7 @@ impl EditorPane {
     }
 
     pub fn view(cx: &mut WindowContext) -> View<Self> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         view(
             cx.entity(|cx| hello_world_rust_editor_with_status_example(cx)),
diff --git a/crates/ui2/src/components/facepile.rs b/crates/ui2/src/components/facepile.rs
index 4f76c505da14db679c1b89fbbfd7267c40804e15..8bd4eafa18918b1b83bcf806434cb0eadd7e0a4e 100644
--- a/crates/ui2/src/components/facepile.rs
+++ b/crates/ui2/src/components/facepile.rs
@@ -1,7 +1,7 @@
 use std::marker::PhantomData;
 
 use crate::prelude::*;
-use crate::{theme, Avatar, Player};
+use crate::{Avatar, Player};
 
 #[derive(Element)]
 pub struct Facepile<S: 'static + Send + Sync> {
@@ -18,7 +18,7 @@ impl<S: 'static + Send + Sync> Facepile<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let player_count = self.players.len();
         let player_list = self.players.iter().enumerate().map(|(ix, player)| {
             let isnt_last = ix < player_count - 1;
@@ -52,7 +52,11 @@ mod stories {
             }
         }
 
-        fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+        fn render(
+            &mut self,
+            _view: &mut S,
+            cx: &mut ViewContext<S>,
+        ) -> impl Element<ViewState = S> {
             let players = static_players();
 
             Story::container(cx)
diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs
index 3f41b4f5b953e89f54db58fa97aefcfcfbc3c4f1..163622002a06de516b8408abe3561c0099ee165c 100644
--- a/crates/ui2/src/components/icon_button.rs
+++ b/crates/ui2/src/components/icon_button.rs
@@ -67,7 +67,6 @@ impl<S: 'static + Send + Sync> IconButton<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
         let color = ThemeColor::new(cx);
 
         let icon_color = match (self.state, self.color) {
@@ -75,15 +74,27 @@ impl<S: 'static + Send + Sync> IconButton<S> {
             _ => self.color,
         };
 
+        let (bg_color, bg_hover_color, bg_active_color) = match self.variant {
+            ButtonVariant::Filled => (
+                color.filled_element,
+                color.filled_element_hover,
+                color.filled_element_active,
+            ),
+            ButtonVariant::Ghost => (
+                color.ghost_element,
+                color.ghost_element_hover,
+                color.ghost_element_active,
+            ),
+        };
+
         let mut button = h_stack()
             .justify_center()
             .rounded_md()
             .py(ui_size(0.25))
             .px(ui_size(6. / 14.))
-            .when(self.variant == ButtonVariant::Filled, |this| {
-                this.bg(color.filled_element)
-            })
-            .hover(|style| style.bg(theme.highest.base.hovered.background))
+            .bg(bg_color)
+            .hover(|style| style.bg(bg_hover_color))
+            // .active(|style| style.bg(bg_active_color))
             .child(IconElement::new(self.icon).color(icon_color));
 
         if let Some(click_handler) = self.handlers.click.clone() {
diff --git a/crates/ui2/src/components/keybinding.rs b/crates/ui2/src/components/keybinding.rs
index 72128e54345615e90b21782696105fb492bca575..6f244a2cd8e41ee96f7d5f515c48a2ddc1dd3b30 100644
--- a/crates/ui2/src/components/keybinding.rs
+++ b/crates/ui2/src/components/keybinding.rs
@@ -70,15 +70,15 @@ impl<S: 'static + Send + Sync> Key<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div()
             .px_2()
             .py_0()
             .rounded_md()
             .text_sm()
-            .text_color(theme.lowest.on.default.foreground)
-            .bg(theme.lowest.on.default.background)
+            .text_color(color.text)
+            .bg(color.filled_element)
             .child(self.key.clone())
     }
 }
diff --git a/crates/ui2/src/components/list.rs b/crates/ui2/src/components/list.rs
index 1a60581855aae9f5052c703d3b1d94c82d1bddb1..ddf7649b9552964e219eeb9b968608943fd65ee7 100644
--- a/crates/ui2/src/components/list.rs
+++ b/crates/ui2/src/components/list.rs
@@ -91,7 +91,7 @@ impl<S: 'static + Send + Sync + Clone> ListHeader<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let system_color = SystemColor::new();
         let color = ThemeColor::new(cx);
 
@@ -158,7 +158,7 @@ impl<S: 'static + Send + Sync + Clone> ListSubHeader<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         h_stack().flex_1().w_full().relative().py_1().child(
             div()
@@ -338,7 +338,7 @@ impl<S: 'static + Send + Sync + Clone> ListEntry<S> {
         &mut self,
         cx: &mut ViewContext<S>,
     ) -> Option<impl Element<ViewState = S>> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         let disclosure_control_icon = if let Some(ToggleState::Toggled) = self.toggle {
             IconElement::new(Icon::ChevronDown)
@@ -360,7 +360,7 @@ impl<S: 'static + Send + Sync + Clone> ListEntry<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let system_color = SystemColor::new();
         let color = ThemeColor::new(cx);
         let setting = user_settings();
@@ -470,7 +470,7 @@ impl<S: 'static + Send + Sync + Clone> List<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let is_toggleable = self.toggleable != Toggleable::NotToggleable;
         let is_toggled = Toggleable::is_toggled(&self.toggleable);
 
diff --git a/crates/ui2/src/components/multi_buffer.rs b/crates/ui2/src/components/multi_buffer.rs
index eb3e8a5af6d70f886f74238c46c77c9fd28c6790..e9a8d60493c7d8adced713c1d119d7bf41c68173 100644
--- a/crates/ui2/src/components/multi_buffer.rs
+++ b/crates/ui2/src/components/multi_buffer.rs
@@ -18,7 +18,7 @@ impl<S: 'static + Send + Sync + Clone> MultiBuffer<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         v_stack()
             .w_full()
@@ -32,7 +32,7 @@ impl<S: 'static + Send + Sync + Clone> MultiBuffer<S> {
                             .items_center()
                             .justify_between()
                             .p_4()
-                            .bg(theme.lowest.base.default.background)
+                            .bg(color.editor_subheader)
                             .child(Label::new("main.rs"))
                             .child(IconButton::new(Icon::ArrowUpRight)),
                     )
@@ -67,7 +67,7 @@ mod stories {
             _view: &mut S,
             cx: &mut ViewContext<S>,
         ) -> impl Element<ViewState = S> {
-            let theme = theme(cx);
+            let color = ThemeColor::new(cx);
 
             Story::container(cx)
                 .child(Story::title_for::<_, MultiBuffer<S>>(cx))
diff --git a/crates/ui2/src/components/palette.rs b/crates/ui2/src/components/palette.rs
index 4ed99d295f5bcd9b659080e06867943a769b73bd..697f78ee4614c43c028d3f083ffcced6730e7aa5 100644
--- a/crates/ui2/src/components/palette.rs
+++ b/crates/ui2/src/components/palette.rs
@@ -48,21 +48,21 @@ impl<S: 'static + Send + Sync + Clone> Palette<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         v_stack()
             .w_96()
             .rounded_lg()
-            .bg(theme.lowest.base.default.background)
+            .bg(color.elevated_surface)
             .border()
-            .border_color(theme.lowest.base.default.border)
+            .border_color(color.border)
             .child(
                 v_stack()
                     .gap_px()
                     .child(v_stack().py_0p5().px_1().child(div().px_2().py_0p5().child(
                         Label::new(self.input_placeholder.clone()).color(LabelColor::Placeholder),
                     )))
-                    .child(div().h_px().w_full().bg(theme.lowest.base.default.border))
+                    .child(div().h_px().w_full().bg(color.filled_element))
                     .child(
                         v_stack()
                             .py_0p5()
@@ -90,9 +90,8 @@ impl<S: 'static + Send + Sync + Clone> Palette<S> {
                                     .px_2()
                                     .py_0p5()
                                     .rounded_lg()
-                                    .hover(|style| style.bg(theme.lowest.base.hovered.background))
-                                    // .active()
-                                    // .fill(theme.lowest.base.pressed.background)
+                                    .hover(|style| style.bg(color.ghost_element_hover))
+                                    // .active(|style| style.bg(color.ghost_element_active))
                                     .child(item.clone())
                             })),
                     ),
@@ -135,7 +134,7 @@ impl<S: 'static + Send + Sync + Clone> PaletteItem<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div()
             .flex()
diff --git a/crates/ui2/src/components/panel.rs b/crates/ui2/src/components/panel.rs
index 52e36b2f14e21c4c2f61683d8d8b0ce10efeadc3..d70d81c82e8e5f5f1dc50f813b796cd050bc9654 100644
--- a/crates/ui2/src/components/panel.rs
+++ b/crates/ui2/src/components/panel.rs
@@ -97,7 +97,7 @@ impl<S: 'static + Send + Sync> Panel<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         let panel_base;
         let current_width = self.width.unwrap_or(self.initial_width);
diff --git a/crates/ui2/src/components/panes.rs b/crates/ui2/src/components/panes.rs
index 96c0bb86ce266b8004b4dfbe26ebc42185bb12ba..c88d687ea190e23bd411724c2b621d666ed12de2 100644
--- a/crates/ui2/src/components/panes.rs
+++ b/crates/ui2/src/components/panes.rs
@@ -43,7 +43,7 @@ impl<S: 'static + Send + Sync> Pane<S> {
     }
 
     fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div()
             .flex()
@@ -90,7 +90,7 @@ impl<S: 'static + Send + Sync> PaneGroup<S> {
     }
 
     fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         if !self.panes.is_empty() {
             let el = div()
diff --git a/crates/ui2/src/components/project_panel.rs b/crates/ui2/src/components/project_panel.rs
index 4c4fbe9f293602bd4dfe8435837203ccee50df22..4f883c1c15b502ad49b012e778b3c38ca6fedfb0 100644
--- a/crates/ui2/src/components/project_panel.rs
+++ b/crates/ui2/src/components/project_panel.rs
@@ -21,7 +21,7 @@ impl<S: 'static + Send + Sync + Clone> ProjectPanel<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let color = ThemeColor::new(cx);
 
         div()
diff --git a/crates/ui2/src/components/status_bar.rs b/crates/ui2/src/components/status_bar.rs
index 8a68cbf31bce704c0acf3269c1ddf43bb724767c..b7aa9a53d39193c8495f33af9832820b8bdc7356 100644
--- a/crates/ui2/src/components/status_bar.rs
+++ b/crates/ui2/src/components/status_bar.rs
@@ -87,7 +87,7 @@ impl StatusBar {
         view: &mut Workspace,
         cx: &mut ViewContext<Workspace>,
     ) -> impl Element<ViewState = Workspace> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div()
             .py_0p5()
diff --git a/crates/ui2/src/components/tab.rs b/crates/ui2/src/components/tab.rs
index 7e8ad15daa69f4895dc5df691a550f92d869fc59..75911976b2716627136f2c2fbc32f06ab25e966d 100644
--- a/crates/ui2/src/components/tab.rs
+++ b/crates/ui2/src/components/tab.rs
@@ -75,7 +75,7 @@ impl<S: 'static + Send + Sync + Clone> Tab<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let has_fs_conflict = self.fs_status == FileSystemStatus::Conflict;
         let is_deleted = self.fs_status == FileSystemStatus::Deleted;
 
diff --git a/crates/ui2/src/components/tab_bar.rs b/crates/ui2/src/components/tab_bar.rs
index 542bc695188ab9bfda68bde65bdca89268b8ba71..9d352a09a5f02ebc243e56fe90963c4e7fc0e08f 100644
--- a/crates/ui2/src/components/tab_bar.rs
+++ b/crates/ui2/src/components/tab_bar.rs
@@ -24,7 +24,7 @@ impl<S: 'static + Send + Sync + Clone> TabBar<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let can_navigate_back = true;
         let can_navigate_forward = false;
 
diff --git a/crates/ui2/src/components/terminal.rs b/crates/ui2/src/components/terminal.rs
index 598fad5fa6bde16b7ce7f5935be1aba507af5b3e..a56c07a75052eb563a7562d8a206e9f04109a36a 100644
--- a/crates/ui2/src/components/terminal.rs
+++ b/crates/ui2/src/components/terminal.rs
@@ -18,7 +18,7 @@ impl<S: 'static + Send + Sync + Clone> Terminal<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         let can_navigate_back = true;
         let can_navigate_forward = false;
diff --git a/crates/ui2/src/components/title_bar.rs b/crates/ui2/src/components/title_bar.rs
index 68033629ba0f9dbe69a4aeda0c9e42cddbde2330..a64694c3c6d2c114bd6276e5dbe506ca5f09d1e6 100644
--- a/crates/ui2/src/components/title_bar.rs
+++ b/crates/ui2/src/components/title_bar.rs
@@ -93,7 +93,7 @@ impl TitleBar {
     }
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let color = ThemeColor::new(cx);
         let setting = user_settings();
 
diff --git a/crates/ui2/src/components/toolbar.rs b/crates/ui2/src/components/toolbar.rs
index 0be752b3e3016384c890746360f8671b704b12c9..e58de4c9ba9358d73c1cfac9f3a437abb12f3dab 100644
--- a/crates/ui2/src/components/toolbar.rs
+++ b/crates/ui2/src/components/toolbar.rs
@@ -56,7 +56,7 @@ impl<S: 'static + Send + Sync> Toolbar<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div()
             .bg(theme.highest.base.default.background)
@@ -98,7 +98,7 @@ mod stories {
             _view: &mut S,
             cx: &mut ViewContext<S>,
         ) -> impl Element<ViewState = S> {
-            let theme = theme(cx);
+            let color = ThemeColor::new(cx);
 
             Story::container(cx)
                 .child(Story::title_for::<_, Toolbar<S>>(cx))
diff --git a/crates/ui2/src/components/traffic_lights.rs b/crates/ui2/src/components/traffic_lights.rs
index 0a2b769bca61db89da45ac79a0b707ad5842db2b..0533639841121ee610bdcafdd2aa93e35972c236 100644
--- a/crates/ui2/src/components/traffic_lights.rs
+++ b/crates/ui2/src/components/traffic_lights.rs
@@ -27,7 +27,7 @@ impl<S: 'static + Send + Sync> TrafficLight<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let system_color = SystemColor::new();
 
         let fill = match (self.window_has_focus, self.color) {
@@ -61,7 +61,7 @@ impl<S: 'static + Send + Sync> TrafficLights<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div()
             .flex()
diff --git a/crates/ui2/src/elements/avatar.rs b/crates/ui2/src/elements/avatar.rs
index 314e001bdeb472e3f315c37a3489346fc8b891c1..9b86b557426c374d10183ed00428a796a5e6e08b 100644
--- a/crates/ui2/src/elements/avatar.rs
+++ b/crates/ui2/src/elements/avatar.rs
@@ -27,7 +27,7 @@ impl<S: 'static + Send + Sync> Avatar<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         let mut img = img();
 
diff --git a/crates/ui2/src/elements/details.rs b/crates/ui2/src/elements/details.rs
index 94e213ffbfd27129c6e0386a094630850fa5503e..84deb69d596d5896d167744492a67b6938109b85 100644
--- a/crates/ui2/src/elements/details.rs
+++ b/crates/ui2/src/elements/details.rs
@@ -25,7 +25,7 @@ impl<S: 'static + Send + Sync + Clone> Details<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div()
             // .flex()
@@ -60,7 +60,11 @@ mod stories {
             }
         }
 
-        fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+        fn render(
+            &mut self,
+            _view: &mut S,
+            cx: &mut ViewContext<S>,
+        ) -> impl Element<ViewState = S> {
             Story::container(cx)
                 .child(Story::title_for::<_, Details<S>>(cx))
                 .child(Story::label(cx, "Default"))
diff --git a/crates/ui2/src/elements/icon.rs b/crates/ui2/src/elements/icon.rs
index 00c22432d47110dce99dac7df785b6638125c6e5..720ef95a5af6fcb74dfcc82e1cf6ee785c0326ee 100644
--- a/crates/ui2/src/elements/icon.rs
+++ b/crates/ui2/src/elements/icon.rs
@@ -177,7 +177,7 @@ impl<S: 'static + Send + Sync> IconElement<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let fill = self.color.color(theme);
         let svg_size = match self.size {
             IconSize::Small => ui_size(12. / 14.),
diff --git a/crates/ui2/src/elements/input.rs b/crates/ui2/src/elements/input.rs
index 45edb1a73d7fe469609ce88a506d675abe279880..57cdcfe59944bd7659c1619d64c68613dfd9ae2f 100644
--- a/crates/ui2/src/elements/input.rs
+++ b/crates/ui2/src/elements/input.rs
@@ -46,7 +46,7 @@ impl<S: 'static + Send + Sync> Input<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         let text_el;
         let text_color;
diff --git a/crates/ui2/src/elements/label.rs b/crates/ui2/src/elements/label.rs
index 37cabc553490e3e70def4a014999bed779020e70..f81c86c31f3df365a76838df17940393f626c8ee 100644
--- a/crates/ui2/src/elements/label.rs
+++ b/crates/ui2/src/elements/label.rs
@@ -22,7 +22,7 @@ pub enum LabelColor {
 
 impl LabelColor {
     pub fn hsla(&self, cx: &WindowContext) -> Hsla {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         match self {
             Self::Default => theme.middle.base.default.foreground,
@@ -82,7 +82,7 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div()
             .when(self.strikethrough, |this| {
@@ -136,7 +136,7 @@ impl<S: 'static + Send + Sync + Clone> HighlightedLabel<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         let highlight_color = theme.lowest.accent.default.foreground;
 
diff --git a/crates/ui2/src/elements/player.rs b/crates/ui2/src/elements/player.rs
index 514cfe97ec5b91107210ed3c5aa67c2457c1afd3..cf90dbab34b792f3f3327fbee47bd7bf7aadb1c4 100644
--- a/crates/ui2/src/elements/player.rs
+++ b/crates/ui2/src/elements/player.rs
@@ -139,13 +139,13 @@ impl Player {
     }
 
     pub fn cursor_color<S: 'static>(&self, cx: &mut ViewContext<S>) -> Hsla {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let index = self.index % 8;
         theme.players[self.index].cursor
     }
 
     pub fn selection_color<S: 'static>(&self, cx: &mut ViewContext<S>) -> Hsla {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let index = self.index % 8;
         theme.players[self.index].selection
     }
diff --git a/crates/ui2/src/elements/tool_divider.rs b/crates/ui2/src/elements/tool_divider.rs
index 3b7392c3a2ce9a7f2705f65f2a82abbd952c2f27..d0fc709346d4b492964c455d3150806f20981ce8 100644
--- a/crates/ui2/src/elements/tool_divider.rs
+++ b/crates/ui2/src/elements/tool_divider.rs
@@ -16,7 +16,7 @@ impl<S: 'static + Send + Sync> ToolDivider<S> {
     }
 
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div().w_px().h_3().bg(theme.lowest.base.default.border)
     }
diff --git a/crates/ui2/src/prelude.rs b/crates/ui2/src/prelude.rs
index a132542e299b4e088449e215f262df0e42f93ac9..9433145ff52cd6b29f07a393b792cc5ef6fe868b 100644
--- a/crates/ui2/src/prelude.rs
+++ b/crates/ui2/src/prelude.rs
@@ -35,6 +35,27 @@ impl SystemColor {
     }
 }
 
+#[derive(Clone, Copy)]
+pub struct SyntaxColor {
+    pub comment: Hsla,
+    pub string: Hsla,
+    pub function: Hsla,
+    pub keyword: Hsla,
+}
+
+impl SyntaxColor {
+    pub fn new(cx: &WindowContext) -> Self {
+        let theme = theme(cx);
+
+        Self {
+            comment: theme.syntax.comment,
+            string: theme.syntax.string,
+            function: theme.syntax.function,
+            keyword: theme.syntax.keyword,
+        }
+    }
+}
+
 #[derive(Clone, Copy)]
 pub struct ThemeColor {
     pub border: Hsla,
@@ -63,12 +84,26 @@ pub struct ThemeColor {
     pub filled_element_selected: Hsla,
     pub filled_element_disabled: Hsla,
     pub ghost_element: Hsla,
+    /// The background color of a hovered element with no default background,
+    /// like a ghost-style button or an interactable list item.
     /// - TODO: Map to step 3.
     pub ghost_element_hover: Hsla,
     /// - TODO: Map to step 4.
     pub ghost_element_active: Hsla,
     pub ghost_element_selected: Hsla,
     pub ghost_element_disabled: Hsla,
+    pub text: Hsla,
+    pub text_muted: Hsla,
+    pub text_placeholder: Hsla,
+    pub text_disabled: Hsla,
+    pub icon_muted: Hsla,
+    pub syntax: SyntaxColor,
+
+    pub toolbar_background: Hsla,
+    pub editor_background: Hsla,
+    pub editor_subheader: Hsla,
+    pub editor_active_line: Hsla,
+    pub image_fallback_background: Hsla,
 }
 
 impl ThemeColor {
@@ -94,6 +129,18 @@ impl ThemeColor {
             ghost_element_active: theme.lowest.base.hovered.background,
             ghost_element_selected: theme.lowest.accent.default.background,
             ghost_element_disabled: system_color.transparent,
+            text: theme.lowest.base.default.foreground,
+            text_muted: theme.lowest.variant.default.foreground,
+            /// TODO: map this to a real value
+            text_placeholder: theme.lowest.negative.default.foreground,
+            text_disabled: theme.lowest.base.disabled.foreground,
+            icon_muted: theme.lowest.variant.default.foreground,
+            syntax: SyntaxColor::new(cx),
+            toolbar_background: theme.highest.base.default.background,
+            editor_background: theme.highest.base.default.background,
+            editor_subheader: theme.middle.base.default.background,
+            editor_active_line: theme.highest.on.default.background,
+            image_fallback_background: theme.lowest.base.default.background,
         }
     }
 }
@@ -192,7 +239,7 @@ impl GitStatus {
     }
 
     pub fn hsla(&self, cx: &WindowContext) -> Hsla {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
         let system_color = SystemColor::new();
 
         match self {
diff --git a/crates/ui2/src/story.rs b/crates/ui2/src/story.rs
index 4edc796d00a55f63d7b9e37f83bb0cd66c017bff..cb269850d16597c5e6b9aa5a92244ffa8936684a 100644
--- a/crates/ui2/src/story.rs
+++ b/crates/ui2/src/story.rs
@@ -7,7 +7,7 @@ pub struct Story {}
 
 impl Story {
     pub fn container<S: 'static + Send + Sync>(cx: &mut ViewContext<S>) -> Div<S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div()
             .size_full()
@@ -23,7 +23,7 @@ impl Story {
         cx: &mut ViewContext<S>,
         title: &str,
     ) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div()
             .text_xl()
@@ -41,7 +41,7 @@ impl Story {
         cx: &mut ViewContext<S>,
         label: &str,
     ) -> impl Element<ViewState = S> {
-        let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         div()
             .mt_4()