update theme

Rebrand Zeron theme family as Coop
simplify theme crate to builtin-only registry
2026-10-08 13:55:23 +07:00 · 2026-10-08 09:58:23 +07:00 · 2026-10-08 09:25:24 +07:00 · 2026-10-08 09:00:58 +07:00 · 2026-10-08 08:56:57 +07:00 · 2026-10-08 08:51:11 +07:00
75 changed files with 2909 additions and 2915 deletions
@@ -7436,14 +7436,13 @@ dependencies = [
 name = "theme"
 version = "1.0.2"
 dependencies = [
- "anyhow",
 "gpui-base",
 "gpui-pre",
 "log",
- "schemars",
 "serde",
 "serde_json",
- "tempfile",
+ "sha2 0.10.9",
+ "thiserror 2.0.21",
 ]

 [[package]]
@@ -33,6 +33,7 @@ nostr = { git = "https://github.com/rust-nostr/nostr", features = [ "nip59", "ni
 aes-gcm = "0.10"
 base64 = "0.22"
 sha2 = "0.10"
+thiserror = "2.0"
 data-encoding = "2"
 hkdf = "0.12"
 # Pinned to the instances `nostr` already builds: the NIP-44 message-key disclosure
@@ -1,144 +0,0 @@
-{
-  "id": "aurora",
-  "name": "Aurora",
-  "author": "Coop",
-  "url": "https://coopchat.xyz",
-  "light": {
-    "background": "#fdfcfeff",
-    "surface_background": "#f8f8ffff",
-    "elevated_surface_background": "#f0f1feff",
-    "panel_background": "#fdfcfeff",
-    "overlay": "#211f4300",
-    "title_bar": "#f0f1feff",
-    "title_bar_inactive": "#fdfcfeff",
-    "window_border": "#dadcffff",
-    "border": "#dadcffff",
-    "border_variant": "#cbcdffff",
-    "border_focused": "#5b5bd6ff",
-    "border_selected": "#5b5bd6ff",
-    "border_transparent": "#00000000",
-    "border_disabled": "#e6e7ffff",
-    "ring": "#5151cdff",
-    "text": "#1f2d5cff",
-    "text_muted": "#5753c6ff",
-    "text_placeholder": "#9b9ef0ff",
-    "text_accent": "#5b5bd6ff",
-    "text_danger": "#e54d2eff",
-    "text_warning": "#f76b15ff",
-    "icon": "#5753c6ff",
-    "icon_muted": "#9b9ef0ff",
-    "icon_accent": "#5151cdff",
-    "element_foreground": "#ffffffff",
-    "element_background": "#5b5bd6ff",
-    "element_hover": "#5151cdff",
-    "element_active": "#6e56cfff",
-    "element_selected": "#654dc4ff",
-    "element_disabled": "#5b5bd64d",
-    "secondary_foreground": "#1f2d5cff",
-    "secondary_background": "#f0f1feff",
-    "secondary_hover": "#e6e7ffff",
-    "secondary_active": "#dadcffff",
-    "secondary_selected": "#dadcffff",
-    "secondary_disabled": "#5b5bd64d",
-    "danger_foreground": "#ffffffff",
-    "danger_background": "#feebe7ff",
-    "danger_hover": "#ffcdc2ff",
-    "danger_active": "#fdbdafff",
-    "danger_selected": "#fdbdafff",
-    "danger_disabled": "#e54d2e4d",
-    "warning_foreground": "#ffffffff",
-    "warning_background": "#fff7edff",
-    "warning_hover": "#ffd19aff",
-    "warning_active": "#ffc182ff",
-    "warning_selected": "#ffc182ff",
-    "warning_disabled": "#f76b154d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#f0f1feff",
-    "ghost_element_hover": "#211f430d",
-    "ghost_element_active": "#211f431a",
-    "ghost_element_selected": "#211f431a",
-    "ghost_element_disabled": "#211f4305",
-    "tab_background": "#f0f1feff",
-    "tab_foreground": "#5753c6ff",
-    "tab_hover_background": "#211f430d",
-    "tab_active_background": "#fdfcfeff",
-    "tab_active_foreground": "#1f2d5cff",
-    "scrollbar_thumb_background": "#211f431a",
-    "scrollbar_thumb_hover_background": "#211f4326",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#00000000",
-    "drop_target_background": "#5b5bd61a",
-    "cursor": "#5b5bd6ff",
-    "selection": "#5b5bd640"
-  },
-  "dark": {
-    "background": "#14121fff",
-    "surface_background": "#1b1525ff",
-    "elevated_surface_background": "#291f43ff",
-    "panel_background": "#14121fff",
-    "overlay": "#baa7ff1a",
-    "title_bar": "#291f43ff",
-    "title_bar_inactive": "#14121fff",
-    "window_border": "#473876ff",
-    "border": "#473876ff",
-    "border_variant": "#3c2e69ff",
-    "border_focused": "#7d66d9ff",
-    "border_selected": "#7d66d9ff",
-    "border_transparent": "#00000000",
-    "border_disabled": "#33255bff",
-    "ring": "#6e56cfff",
-    "text": "#e2ddfeff",
-    "text_muted": "#baa7ffff",
-    "text_placeholder": "#6958adff",
-    "text_accent": "#baa7ffff",
-    "text_danger": "#ff977dff",
-    "text_warning": "#ffa057ff",
-    "icon": "#baa7ffff",
-    "icon_muted": "#6958adff",
-    "icon_accent": "#6e56cfff",
-    "element_foreground": "#14121fff",
-    "element_background": "#7d66d9ff",
-    "element_hover": "#baa7ffff",
-    "element_active": "#6e56cfff",
-    "element_selected": "#654dc4ff",
-    "element_disabled": "#7d66d94d",
-    "secondary_foreground": "#e2ddfeff",
-    "secondary_background": "#291f43ff",
-    "secondary_hover": "#33255bff",
-    "secondary_active": "#3c2e69ff",
-    "secondary_selected": "#3c2e69ff",
-    "secondary_disabled": "#7d66d94d",
-    "danger_foreground": "#181111ff",
-    "danger_background": "#391714ff",
-    "danger_hover": "#5e1c16ff",
-    "danger_active": "#6e2920ff",
-    "danger_selected": "#6e2920ff",
-    "danger_disabled": "#ff977d4d",
-    "warning_foreground": "#17120eff",
-    "warning_background": "#331e0bff",
-    "warning_hover": "#562800ff",
-    "warning_active": "#66350cff",
-    "warning_selected": "#66350cff",
-    "warning_disabled": "#ffa0574d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#291f43ff",
-    "ghost_element_hover": "#baa7ff0d",
-    "ghost_element_active": "#baa7ff1a",
-    "ghost_element_selected": "#baa7ff1a",
-    "ghost_element_disabled": "#baa7ff05",
-    "tab_background": "#291f43ff",
-    "tab_foreground": "#baa7ffff",
-    "tab_hover_background": "#baa7ff0d",
-    "tab_active_background": "#14121fff",
-    "tab_active_foreground": "#e2ddfeff",
-    "scrollbar_thumb_background": "#baa7ff1a",
-    "scrollbar_thumb_hover_background": "#baa7ff26",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#00000000",
-    "drop_target_background": "#baa7ff1a",
-    "cursor": "#baa7ffff",
-    "selection": "#baa7ff40"
-  }
-}
@@ -1,144 +0,0 @@
-{
-  "id": "catppuccin-frappe",
-  "name": "Catppuccin Frappé",
-  "author": "Catppuccin Org (ported by Coop)",
-  "url": "https://catppuccin.com",
-  "light": {
-    "background": "#303446",
-    "surface_background": "#292c3c",
-    "elevated_surface_background": "#232634",
-    "panel_background": "#303446",
-    "overlay": "#c6d0f51a",
-    "title_bar": "#232634",
-    "title_bar_inactive": "#303446",
-    "window_border": "#51576d",
-    "border": "#51576d",
-    "border_variant": "#414559",
-    "border_focused": "#8caaee",
-    "border_selected": "#8caaee",
-    "border_transparent": "#c6d0f500",
-    "border_disabled": "#292c3c",
-    "ring": "#babbf1",
-    "text": "#c6d0f5",
-    "text_muted": "#a5adce",
-    "text_placeholder": "#838ba7",
-    "text_accent": "#8caaee",
-    "text_danger": "#e78284",
-    "text_warning": "#ef9f76",
-    "icon": "#a5adce",
-    "icon_muted": "#838ba7",
-    "icon_accent": "#babbf1",
-    "element_foreground": "#303446",
-    "element_background": "#8caaee",
-    "element_hover": "#babbf1",
-    "element_active": "#99d1db",
-    "element_selected": "#85c1dc",
-    "element_disabled": "#8caaee4d",
-    "secondary_foreground": "#c6d0f5",
-    "secondary_background": "#414559",
-    "secondary_hover": "#51576d",
-    "secondary_active": "#626880",
-    "secondary_selected": "#626880",
-    "secondary_disabled": "#8caaee4d",
-    "danger_foreground": "#303446",
-    "danger_background": "#e78284",
-    "danger_hover": "#ea999c",
-    "danger_active": "#ef9f76",
-    "danger_selected": "#e5c890",
-    "danger_disabled": "#e782844d",
-    "warning_foreground": "#303446",
-    "warning_background": "#ef9f76",
-    "warning_hover": "#e5c890",
-    "warning_active": "#a6d189",
-    "warning_selected": "#81c8be",
-    "warning_disabled": "#ef9f764d",
-    "ghost_element_background": "#c6d0f500",
-    "ghost_element_background_alt": "#292c3c",
-    "ghost_element_hover": "#c6d0f50d",
-    "ghost_element_active": "#c6d0f51a",
-    "ghost_element_selected": "#c6d0f51a",
-    "ghost_element_disabled": "#c6d0f505",
-    "tab_background": "#232634",
-    "tab_foreground": "#a5adce",
-    "tab_hover_background": "#c6d0f50d",
-    "tab_active_background": "#303446",
-    "tab_active_foreground": "#c6d0f5",
-    "scrollbar_thumb_background": "#c6d0f51a",
-    "scrollbar_thumb_hover_background": "#c6d0f526",
-    "scrollbar_thumb_border": "#c6d0f500",
-    "scrollbar_track_background": "#c6d0f500",
-    "scrollbar_track_border": "#c6d0f500",
-    "drop_target_background": "#8caaee1a",
-    "cursor": "#8caaee",
-    "selection": "#8caaee40"
-  },
-  "dark": {
-    "background": "#303446",
-    "surface_background": "#292c3c",
-    "elevated_surface_background": "#232634",
-    "panel_background": "#303446",
-    "overlay": "#c6d0f51a",
-    "title_bar": "#232634",
-    "title_bar_inactive": "#303446",
-    "window_border": "#51576d",
-    "border": "#51576d",
-    "border_variant": "#414559",
-    "border_focused": "#8caaee",
-    "border_selected": "#8caaee",
-    "border_transparent": "#c6d0f500",
-    "border_disabled": "#292c3c",
-    "ring": "#babbf1",
-    "text": "#c6d0f5",
-    "text_muted": "#a5adce",
-    "text_placeholder": "#838ba7",
-    "text_accent": "#8caaee",
-    "text_danger": "#e78284",
-    "text_warning": "#ef9f76",
-    "icon": "#a5adce",
-    "icon_muted": "#838ba7",
-    "icon_accent": "#babbf1",
-    "element_foreground": "#303446",
-    "element_background": "#8caaee",
-    "element_hover": "#babbf1",
-    "element_active": "#99d1db",
-    "element_selected": "#85c1dc",
-    "element_disabled": "#8caaee4d",
-    "secondary_foreground": "#c6d0f5",
-    "secondary_background": "#414559",
-    "secondary_hover": "#51576d",
-    "secondary_active": "#626880",
-    "secondary_selected": "#626880",
-    "secondary_disabled": "#8caaee4d",
-    "danger_foreground": "#303446",
-    "danger_background": "#e78284",
-    "danger_hover": "#ea999c",
-    "danger_active": "#ef9f76",
-    "danger_selected": "#e5c890",
-    "danger_disabled": "#e782844d",
-    "warning_foreground": "#303446",
-    "warning_background": "#ef9f76",
-    "warning_hover": "#e5c890",
-    "warning_active": "#a6d189",
-    "warning_selected": "#81c8be",
-    "warning_disabled": "#ef9f764d",
-    "ghost_element_background": "#c6d0f500",
-    "ghost_element_background_alt": "#292c3c",
-    "ghost_element_hover": "#c6d0f50d",
-    "ghost_element_active": "#c6d0f51a",
-    "ghost_element_selected": "#c6d0f51a",
-    "ghost_element_disabled": "#c6d0f505",
-    "tab_background": "#232634",
-    "tab_foreground": "#a5adce",
-    "tab_hover_background": "#c6d0f50d",
-    "tab_active_background": "#303446",
-    "tab_active_foreground": "#c6d0f5",
-    "scrollbar_thumb_background": "#c6d0f51a",
-    "scrollbar_thumb_hover_background": "#c6d0f526",
-    "scrollbar_thumb_border": "#c6d0f500",
-    "scrollbar_track_background": "#c6d0f500",
-    "scrollbar_track_border": "#c6d0f500",
-    "drop_target_background": "#8caaee1a",
-    "cursor": "#8caaee",
-    "selection": "#8caaee40"
-  }
-}
@@ -1,144 +0,0 @@
-{
-  "id": "catppuccin-latte",
-  "name": "Catppuccin Latte",
-  "author": "Catppuccin Org (ported by Coop)",
-  "url": "https://catppuccin.com",
-  "light": {
-    "background": "#eff1f5",
-    "surface_background": "#e6e9ef",
-    "elevated_surface_background": "#dce0e8",
-    "panel_background": "#eff1f5",
-    "overlay": "#4c4f691a",
-    "title_bar": "#dce0e8",
-    "title_bar_inactive": "#eff1f5",
-    "window_border": "#bcc0cc",
-    "border": "#bcc0cc",
-    "border_variant": "#ccd0da",
-    "border_focused": "#1e66f5",
-    "border_selected": "#1e66f5",
-    "border_transparent": "#4c4f6900",
-    "border_disabled": "#e6e9ef",
-    "ring": "#7287fd",
-    "text": "#4c4f69",
-    "text_muted": "#6c6f85",
-    "text_placeholder": "#8c8fa1",
-    "text_accent": "#1e66f5",
-    "text_danger": "#d20f39",
-    "text_warning": "#fe640b",
-    "icon": "#6c6f85",
-    "icon_muted": "#8c8fa1",
-    "icon_accent": "#7287fd",
-    "element_foreground": "#eff1f5",
-    "element_background": "#1e66f5",
-    "element_hover": "#7287fd",
-    "element_active": "#04a5e5",
-    "element_selected": "#209fb5",
-    "element_disabled": "#1e66f54d",
-    "secondary_foreground": "#4c4f69",
-    "secondary_background": "#ccd0da",
-    "secondary_hover": "#bcc0cc",
-    "secondary_active": "#acb0be",
-    "secondary_selected": "#acb0be",
-    "secondary_disabled": "#1e66f54d",
-    "danger_foreground": "#eff1f5",
-    "danger_background": "#d20f39",
-    "danger_hover": "#e64553",
-    "danger_active": "#fe640b",
-    "danger_selected": "#df8e1d",
-    "danger_disabled": "#d20f394d",
-    "warning_foreground": "#eff1f5",
-    "warning_background": "#fe640b",
-    "warning_hover": "#df8e1d",
-    "warning_active": "#40a02b",
-    "warning_selected": "#179299",
-    "warning_disabled": "#fe640b4d",
-    "ghost_element_background": "#4c4f6900",
-    "ghost_element_background_alt": "#e6e9ef",
-    "ghost_element_hover": "#4c4f690d",
-    "ghost_element_active": "#4c4f691a",
-    "ghost_element_selected": "#4c4f691a",
-    "ghost_element_disabled": "#4c4f6905",
-    "tab_background": "#e6e9ef",
-    "tab_foreground": "#6c6f85",
-    "tab_hover_background": "#4c4f690d",
-    "tab_active_background": "#eff1f5",
-    "tab_active_foreground": "#4c4f69",
-    "scrollbar_thumb_background": "#4c4f691a",
-    "scrollbar_thumb_hover_background": "#4c4f6926",
-    "scrollbar_thumb_border": "#4c4f6900",
-    "scrollbar_track_background": "#4c4f6900",
-    "scrollbar_track_border": "#4c4f6900",
-    "drop_target_background": "#1e66f51a",
-    "cursor": "#1e66f5",
-    "selection": "#1e66f540"
-  },
-  "dark": {
-    "background": "#eff1f5",
-    "surface_background": "#e6e9ef",
-    "elevated_surface_background": "#dce0e8",
-    "panel_background": "#eff1f5",
-    "overlay": "#4c4f691a",
-    "title_bar": "#dce0e8",
-    "title_bar_inactive": "#eff1f5",
-    "window_border": "#bcc0cc",
-    "border": "#bcc0cc",
-    "border_variant": "#ccd0da",
-    "border_focused": "#1e66f5",
-    "border_selected": "#1e66f5",
-    "border_transparent": "#4c4f6900",
-    "border_disabled": "#e6e9ef",
-    "ring": "#7287fd",
-    "text": "#4c4f69",
-    "text_muted": "#6c6f85",
-    "text_placeholder": "#8c8fa1",
-    "text_accent": "#1e66f5",
-    "text_danger": "#d20f39",
-    "text_warning": "#fe640b",
-    "icon": "#6c6f85",
-    "icon_muted": "#8c8fa1",
-    "icon_accent": "#7287fd",
-    "element_foreground": "#eff1f5",
-    "element_background": "#1e66f5",
-    "element_hover": "#7287fd",
-    "element_active": "#04a5e5",
-    "element_selected": "#209fb5",
-    "element_disabled": "#1e66f54d",
-    "secondary_foreground": "#4c4f69",
-    "secondary_background": "#ccd0da",
-    "secondary_hover": "#bcc0cc",
-    "secondary_active": "#acb0be",
-    "secondary_selected": "#acb0be",
-    "secondary_disabled": "#1e66f54d",
-    "danger_foreground": "#eff1f5",
-    "danger_background": "#d20f39",
-    "danger_hover": "#e64553",
-    "danger_active": "#fe640b",
-    "danger_selected": "#df8e1d",
-    "danger_disabled": "#d20f394d",
-    "warning_foreground": "#eff1f5",
-    "warning_background": "#fe640b",
-    "warning_hover": "#df8e1d",
-    "warning_active": "#40a02b",
-    "warning_selected": "#179299",
-    "warning_disabled": "#fe640b4d",
-    "ghost_element_background": "#4c4f6900",
-    "ghost_element_background_alt": "#e6e9ef",
-    "ghost_element_hover": "#4c4f690d",
-    "ghost_element_active": "#4c4f691a",
-    "ghost_element_selected": "#4c4f691a",
-    "ghost_element_disabled": "#4c4f6905",
-    "tab_background": "#e6e9ef",
-    "tab_foreground": "#6c6f85",
-    "tab_hover_background": "#4c4f690d",
-    "tab_active_background": "#eff1f5",
-    "tab_active_foreground": "#4c4f69",
-    "scrollbar_thumb_background": "#4c4f691a",
-    "scrollbar_thumb_hover_background": "#4c4f6926",
-    "scrollbar_thumb_border": "#4c4f6900",
-    "scrollbar_track_background": "#4c4f6900",
-    "scrollbar_track_border": "#4c4f6900",
-    "drop_target_background": "#1e66f51a",
-    "cursor": "#1e66f5",
-    "selection": "#1e66f540"
-  }
-}
@@ -1,144 +0,0 @@
-{
-  "id": "catppuccin-macchiato",
-  "name": "Catppuccin Macchiato",
-  "author": "Catppuccin Org (ported by Coop)",
-  "url": "https://catppuccin.com",
-  "light": {
-    "background": "#24273a",
-    "surface_background": "#1e2030",
-    "elevated_surface_background": "#181926",
-    "panel_background": "#24273a",
-    "overlay": "#cad3f51a",
-    "title_bar": "#181926",
-    "title_bar_inactive": "#24273a",
-    "window_border": "#494d64",
-    "border": "#494d64",
-    "border_variant": "#363a4f",
-    "border_focused": "#8aadf4",
-    "border_selected": "#8aadf4",
-    "border_transparent": "#cad3f500",
-    "border_disabled": "#1e2030",
-    "ring": "#b7bdf8",
-    "text": "#cad3f5",
-    "text_muted": "#a5adcb",
-    "text_placeholder": "#8087a2",
-    "text_accent": "#8aadf4",
-    "text_danger": "#ed8796",
-    "text_warning": "#f5a97f",
-    "icon": "#a5adcb",
-    "icon_muted": "#8087a2",
-    "icon_accent": "#b7bdf8",
-    "element_foreground": "#24273a",
-    "element_background": "#8aadf4",
-    "element_hover": "#b7bdf8",
-    "element_active": "#91d7e3",
-    "element_selected": "#7dc4e4",
-    "element_disabled": "#8aadf44d",
-    "secondary_foreground": "#cad3f5",
-    "secondary_background": "#363a4f",
-    "secondary_hover": "#494d64",
-    "secondary_active": "#5b6078",
-    "secondary_selected": "#5b6078",
-    "secondary_disabled": "#8aadf44d",
-    "danger_foreground": "#24273a",
-    "danger_background": "#ed8796",
-    "danger_hover": "#ee99a0",
-    "danger_active": "#f5a97f",
-    "danger_selected": "#eed49f",
-    "danger_disabled": "#ed87964d",
-    "warning_foreground": "#24273a",
-    "warning_background": "#f5a97f",
-    "warning_hover": "#eed49f",
-    "warning_active": "#a6da95",
-    "warning_selected": "#8bd5ca",
-    "warning_disabled": "#f5a97f4d",
-    "ghost_element_background": "#cad3f500",
-    "ghost_element_background_alt": "#1e2030",
-    "ghost_element_hover": "#cad3f50d",
-    "ghost_element_active": "#cad3f51a",
-    "ghost_element_selected": "#cad3f51a",
-    "ghost_element_disabled": "#cad3f505",
-    "tab_background": "#181926",
-    "tab_foreground": "#a5adcb",
-    "tab_hover_background": "#cad3f50d",
-    "tab_active_background": "#24273a",
-    "tab_active_foreground": "#cad3f5",
-    "scrollbar_thumb_background": "#cad3f51a",
-    "scrollbar_thumb_hover_background": "#cad3f526",
-    "scrollbar_thumb_border": "#cad3f500",
-    "scrollbar_track_background": "#cad3f500",
-    "scrollbar_track_border": "#cad3f500",
-    "drop_target_background": "#8aadf41a",
-    "cursor": "#8aadf4",
-    "selection": "#8aadf440"
-  },
-  "dark": {
-    "background": "#24273a",
-    "surface_background": "#1e2030",
-    "elevated_surface_background": "#181926",
-    "panel_background": "#24273a",
-    "overlay": "#cad3f51a",
-    "title_bar": "#181926",
-    "title_bar_inactive": "#24273a",
-    "window_border": "#494d64",
-    "border": "#494d64",
-    "border_variant": "#363a4f",
-    "border_focused": "#8aadf4",
-    "border_selected": "#8aadf4",
-    "border_transparent": "#cad3f500",
-    "border_disabled": "#1e2030",
-    "ring": "#b7bdf8",
-    "text": "#cad3f5",
-    "text_muted": "#a5adcb",
-    "text_placeholder": "#8087a2",
-    "text_accent": "#8aadf4",
-    "text_danger": "#ed8796",
-    "text_warning": "#f5a97f",
-    "icon": "#a5adcb",
-    "icon_muted": "#8087a2",
-    "icon_accent": "#b7bdf8",
-    "element_foreground": "#24273a",
-    "element_background": "#8aadf4",
-    "element_hover": "#b7bdf8",
-    "element_active": "#91d7e3",
-    "element_selected": "#7dc4e4",
-    "element_disabled": "#8aadf44d",
-    "secondary_foreground": "#cad3f5",
-    "secondary_background": "#363a4f",
-    "secondary_hover": "#494d64",
-    "secondary_active": "#5b6078",
-    "secondary_selected": "#5b6078",
-    "secondary_disabled": "#8aadf44d",
-    "danger_foreground": "#24273a",
-    "danger_background": "#ed8796",
-    "danger_hover": "#ee99a0",
-    "danger_active": "#f5a97f",
-    "danger_selected": "#eed49f",
-    "danger_disabled": "#ed87964d",
-    "warning_foreground": "#24273a",
-    "warning_background": "#f5a97f",
-    "warning_hover": "#eed49f",
-    "warning_active": "#a6da95",
-    "warning_selected": "#8bd5ca",
-    "warning_disabled": "#f5a97f4d",
-    "ghost_element_background": "#cad3f500",
-    "ghost_element_background_alt": "#1e2030",
-    "ghost_element_hover": "#cad3f50d",
-    "ghost_element_active": "#cad3f51a",
-    "ghost_element_selected": "#cad3f51a",
-    "ghost_element_disabled": "#cad3f505",
-    "tab_background": "#181926",
-    "tab_foreground": "#a5adcb",
-    "tab_hover_background": "#cad3f50d",
-    "tab_active_background": "#24273a",
-    "tab_active_foreground": "#cad3f5",
-    "scrollbar_thumb_background": "#cad3f51a",
-    "scrollbar_thumb_hover_background": "#cad3f526",
-    "scrollbar_thumb_border": "#cad3f500",
-    "scrollbar_track_background": "#cad3f500",
-    "scrollbar_track_border": "#cad3f500",
-    "drop_target_background": "#8aadf41a",
-    "cursor": "#8aadf4",
-    "selection": "#8aadf440"
-  }
-}
@@ -1,144 +0,0 @@
-{
-  "id": "catppuccin-mocha",
-  "name": "Catppuccin Mocha",
-  "author": "Catppuccin Org (ported by Coop)",
-  "url": "https://catppuccin.com",
-  "light": {
-    "background": "#1e1e2e",
-    "surface_background": "#181825",
-    "elevated_surface_background": "#11111b",
-    "panel_background": "#1e1e2e",
-    "overlay": "#cdd6f41a",
-    "title_bar": "#11111b",
-    "title_bar_inactive": "#1e1e2e",
-    "window_border": "#45475a",
-    "border": "#45475a",
-    "border_variant": "#313244",
-    "border_focused": "#89b4fa",
-    "border_selected": "#89b4fa",
-    "border_transparent": "#cdd6f400",
-    "border_disabled": "#181825",
-    "ring": "#b4befe",
-    "text": "#cdd6f4",
-    "text_muted": "#a6adc8",
-    "text_placeholder": "#7f849c",
-    "text_accent": "#89b4fa",
-    "text_danger": "#f38ba8",
-    "text_warning": "#fab387",
-    "icon": "#a6adc8",
-    "icon_muted": "#7f849c",
-    "icon_accent": "#b4befe",
-    "element_foreground": "#1e1e2e",
-    "element_background": "#89b4fa",
-    "element_hover": "#b4befe",
-    "element_active": "#89dceb",
-    "element_selected": "#74c7ec",
-    "element_disabled": "#89b4fa4d",
-    "secondary_foreground": "#cdd6f4",
-    "secondary_background": "#313244",
-    "secondary_hover": "#45475a",
-    "secondary_active": "#585b70",
-    "secondary_selected": "#585b70",
-    "secondary_disabled": "#89b4fa4d",
-    "danger_foreground": "#1e1e2e",
-    "danger_background": "#f38ba8",
-    "danger_hover": "#eba0ac",
-    "danger_active": "#fab387",
-    "danger_selected": "#f9e2af",
-    "danger_disabled": "#f38ba84d",
-    "warning_foreground": "#1e1e2e",
-    "warning_background": "#fab387",
-    "warning_hover": "#f9e2af",
-    "warning_active": "#a6e3a1",
-    "warning_selected": "#94e2d5",
-    "warning_disabled": "#fab3874d",
-    "ghost_element_background": "#cdd6f400",
-    "ghost_element_background_alt": "#181825",
-    "ghost_element_hover": "#cdd6f40d",
-    "ghost_element_active": "#cdd6f41a",
-    "ghost_element_selected": "#cdd6f41a",
-    "ghost_element_disabled": "#cdd6f405",
-    "tab_background": "#11111b",
-    "tab_foreground": "#a6adc8",
-    "tab_hover_background": "#cdd6f40d",
-    "tab_active_background": "#1e1e2e",
-    "tab_active_foreground": "#cdd6f4",
-    "scrollbar_thumb_background": "#cdd6f41a",
-    "scrollbar_thumb_hover_background": "#cdd6f426",
-    "scrollbar_thumb_border": "#cdd6f400",
-    "scrollbar_track_background": "#cdd6f400",
-    "scrollbar_track_border": "#cdd6f400",
-    "drop_target_background": "#89b4fa1a",
-    "cursor": "#89b4fa",
-    "selection": "#89b4fa40"
-  },
-  "dark": {
-    "background": "#1e1e2e",
-    "surface_background": "#181825",
-    "elevated_surface_background": "#11111b",
-    "panel_background": "#1e1e2e",
-    "overlay": "#cdd6f41a",
-    "title_bar": "#11111b",
-    "title_bar_inactive": "#1e1e2e",
-    "window_border": "#45475a",
-    "border": "#45475a",
-    "border_variant": "#313244",
-    "border_focused": "#89b4fa",
-    "border_selected": "#89b4fa",
-    "border_transparent": "#cdd6f400",
-    "border_disabled": "#181825",
-    "ring": "#b4befe",
-    "text": "#cdd6f4",
-    "text_muted": "#a6adc8",
-    "text_placeholder": "#7f849c",
-    "text_accent": "#89b4fa",
-    "text_danger": "#f38ba8",
-    "text_warning": "#fab387",
-    "icon": "#a6adc8",
-    "icon_muted": "#7f849c",
-    "icon_accent": "#b4befe",
-    "element_foreground": "#1e1e2e",
-    "element_background": "#89b4fa",
-    "element_hover": "#b4befe",
-    "element_active": "#89dceb",
-    "element_selected": "#74c7ec",
-    "element_disabled": "#89b4fa4d",
-    "secondary_foreground": "#cdd6f4",
-    "secondary_background": "#313244",
-    "secondary_hover": "#45475a",
-    "secondary_active": "#585b70",
-    "secondary_selected": "#585b70",
-    "secondary_disabled": "#89b4fa4d",
-    "danger_foreground": "#1e1e2e",
-    "danger_background": "#f38ba8",
-    "danger_hover": "#eba0ac",
-    "danger_active": "#fab387",
-    "danger_selected": "#f9e2af",
-    "danger_disabled": "#f38ba84d",
-    "warning_foreground": "#1e1e2e",
-    "warning_background": "#fab387",
-    "warning_hover": "#f9e2af",
-    "warning_active": "#a6e3a1",
-    "warning_selected": "#94e2d5",
-    "warning_disabled": "#fab3874d",
-    "ghost_element_background": "#cdd6f400",
-    "ghost_element_background_alt": "#181825",
-    "ghost_element_hover": "#cdd6f40d",
-    "ghost_element_active": "#cdd6f41a",
-    "ghost_element_selected": "#cdd6f41a",
-    "ghost_element_disabled": "#cdd6f405",
-    "tab_background": "#11111b",
-    "tab_foreground": "#a6adc8",
-    "tab_hover_background": "#cdd6f40d",
-    "tab_active_background": "#1e1e2e",
-    "tab_active_foreground": "#cdd6f4",
-    "scrollbar_thumb_background": "#cdd6f41a",
-    "scrollbar_thumb_hover_background": "#cdd6f426",
-    "scrollbar_thumb_border": "#cdd6f400",
-    "scrollbar_track_background": "#cdd6f400",
-    "scrollbar_track_border": "#cdd6f400",
-    "drop_target_background": "#89b4fa1a",
-    "cursor": "#89b4fa",
-    "selection": "#89b4fa40"
-  }
-}
@@ -1,144 +0,0 @@
-{
-  "id": "flexoki",
-  "name": "Flexoki",
-  "author": "Steph Ango (ported by Coop)",
-  "url": "https://stephango.com/flexoki",
-  "light": {
-    "background": "#FFFCF0",
-    "surface_background": "#F2F0E5",
-    "elevated_surface_background": "#E6E4D9",
-    "panel_background": "#FFFCF0",
-    "overlay": "#100F0F1A",
-    "title_bar": "#E6E4D9",
-    "title_bar_inactive": "#FFFCF0",
-    "window_border": "#CECDC3",
-    "border": "#CECDC3",
-    "border_variant": "#DAD8CE",
-    "border_focused": "#24837B",
-    "border_selected": "#24837B",
-    "border_transparent": "#100F0F00",
-    "border_disabled": "#E6E4D9",
-    "ring": "#3AA99F",
-    "text": "#100F0F",
-    "text_muted": "#6F6E69",
-    "text_placeholder": "#B7B5AC",
-    "text_accent": "#24837B",
-    "text_danger": "#AF3029",
-    "text_warning": "#BC5215",
-    "icon": "#6F6E69",
-    "icon_muted": "#B7B5AC",
-    "icon_accent": "#3AA99F",
-    "element_foreground": "#FFFCF0",
-    "element_background": "#24837B",
-    "element_hover": "#3AA99F",
-    "element_active": "#1C1B1A",
-    "element_selected": "#100F0F",
-    "element_disabled": "#24837B4D",
-    "secondary_foreground": "#100F0F",
-    "secondary_background": "#E6E4D9",
-    "secondary_hover": "#DAD8CE",
-    "secondary_active": "#CECDC3",
-    "secondary_selected": "#CECDC3",
-    "secondary_disabled": "#24837B4D",
-    "danger_foreground": "#FFFCF0",
-    "danger_background": "#AF3029",
-    "danger_hover": "#D14D41",
-    "danger_active": "#1C1B1A",
-    "danger_selected": "#100F0F",
-    "danger_disabled": "#AF30294D",
-    "warning_foreground": "#FFFCF0",
-    "warning_background": "#BC5215",
-    "warning_hover": "#DA702C",
-    "warning_active": "#1C1B1A",
-    "warning_selected": "#100F0F",
-    "warning_disabled": "#BC52154D",
-    "ghost_element_background": "#100F0F00",
-    "ghost_element_background_alt": "#F2F0E5",
-    "ghost_element_hover": "#100F0F0D",
-    "ghost_element_active": "#100F0F1A",
-    "ghost_element_selected": "#100F0F1A",
-    "ghost_element_disabled": "#100F0F05",
-    "tab_background": "#E6E4D9",
-    "tab_foreground": "#6F6E69",
-    "tab_hover_background": "#100F0F0D",
-    "tab_active_background": "#FFFCF0",
-    "tab_active_foreground": "#100F0F",
-    "scrollbar_thumb_background": "#100F0F1A",
-    "scrollbar_thumb_hover_background": "#100F0F26",
-    "scrollbar_thumb_border": "#100F0F00",
-    "scrollbar_track_background": "#100F0F00",
-    "scrollbar_track_border": "#100F0F00",
-    "drop_target_background": "#24837B1A",
-    "cursor": "#24837B",
-    "selection": "#24837B40"
-  },
-  "dark": {
-    "background": "#100F0F",
-    "surface_background": "#1C1B1A",
-    "elevated_surface_background": "#282726",
-    "panel_background": "#100F0F",
-    "overlay": "#FFFCF01A",
-    "title_bar": "#282726",
-    "title_bar_inactive": "#100F0F",
-    "window_border": "#403E3C",
-    "border": "#403E3C",
-    "border_variant": "#343331",
-    "border_focused": "#3AA99F",
-    "border_selected": "#3AA99F",
-    "border_transparent": "#100F0F00",
-    "border_disabled": "#282726",
-    "ring": "#24837B",
-    "text": "#CECDC3",
-    "text_muted": "#878580",
-    "text_placeholder": "#575653",
-    "text_accent": "#3AA99F",
-    "text_danger": "#D14D41",
-    "text_warning": "#DA702C",
-    "icon": "#878580",
-    "icon_muted": "#575653",
-    "icon_accent": "#24837B",
-    "element_foreground": "#100F0F",
-    "element_background": "#3AA99F",
-    "element_hover": "#24837B",
-    "element_active": "#CECDC3",
-    "element_selected": "#F2F0E5",
-    "element_disabled": "#3AA99F4D",
-    "secondary_foreground": "#CECDC3",
-    "secondary_background": "#1C1B1A",
-    "secondary_hover": "#282726",
-    "secondary_active": "#343331",
-    "secondary_selected": "#343331",
-    "secondary_disabled": "#3AA99F4D",
-    "danger_foreground": "#100F0F",
-    "danger_background": "#D14D41",
-    "danger_hover": "#AF3029",
-    "danger_active": "#CECDC3",
-    "danger_selected": "#F2F0E5",
-    "danger_disabled": "#D14D414D",
-    "warning_foreground": "#100F0F",
-    "warning_background": "#DA702C",
-    "warning_hover": "#BC5215",
-    "warning_active": "#CECDC3",
-    "warning_selected": "#F2F0E5",
-    "warning_disabled": "#DA702C4D",
-    "ghost_element_background": "#100F0F00",
-    "ghost_element_background_alt": "#1C1B1A",
-    "ghost_element_hover": "#FFFCF00D",
-    "ghost_element_active": "#FFFCF01A",
-    "ghost_element_selected": "#FFFCF01A",
-    "ghost_element_disabled": "#FFFCF005",
-    "tab_background": "#282726",
-    "tab_foreground": "#878580",
-    "tab_hover_background": "#FFFCF00D",
-    "tab_active_background": "#100F0F",
-    "tab_active_foreground": "#CECDC3",
-    "scrollbar_thumb_background": "#FFFCF01A",
-    "scrollbar_thumb_hover_background": "#FFFCF026",
-    "scrollbar_thumb_border": "#100F0F00",
-    "scrollbar_track_background": "#100F0F00",
-    "scrollbar_track_border": "#100F0F00",
-    "drop_target_background": "#3AA99F1A",
-    "cursor": "#3AA99F",
-    "selection": "#3AA99F40"
-  }
-}
@@ -1,144 +0,0 @@
-{
-  "id": "forest",
-  "name": "Forest",
-  "author": "Coop",
-  "url": "https://coopchat.xyz",
-  "light": {
-    "background": "#fbfefcff",
-    "surface_background": "#f4fbf6ff",
-    "elevated_surface_background": "#e9f6e9ff",
-    "panel_background": "#fbfefcff",
-    "overlay": "#193b2d1a",
-    "title_bar": "#e9f6e9ff",
-    "title_bar_inactive": "#fbfefcff",
-    "window_border": "#c4e8d1ff",
-    "border": "#c4e8d1ff",
-    "border_variant": "#b2ddb5ff",
-    "border_focused": "#30a46cff",
-    "border_selected": "#30a46cff",
-    "border_transparent": "#00000000",
-    "border_disabled": "#e0f3e6ff",
-    "ring": "#2b9a66ff",
-    "text": "#193b2dff",
-    "text_muted": "#2f7c57ff",
-    "text_placeholder": "#8eceaaff",
-    "text_accent": "#30a46cff",
-    "text_danger": "#e54d2eff",
-    "text_warning": "#f76b15ff",
-    "icon": "#2f7c57ff",
-    "icon_muted": "#8eceaaff",
-    "icon_accent": "#2b9a66ff",
-    "element_foreground": "#ffffffff",
-    "element_background": "#30a46cff",
-    "element_hover": "#2b9a66ff",
-    "element_active": "#2a7e3bff",
-    "element_selected": "#218358ff",
-    "element_disabled": "#30a46c4d",
-    "secondary_foreground": "#193b2dff",
-    "secondary_background": "#e9f6e9ff",
-    "secondary_hover": "#daf1dbff",
-    "secondary_active": "#c4e8d1ff",
-    "secondary_selected": "#c4e8d1ff",
-    "secondary_disabled": "#30a46c4d",
-    "danger_foreground": "#ffffffff",
-    "danger_background": "#feebe7ff",
-    "danger_hover": "#ffcdc2ff",
-    "danger_active": "#fdbdafff",
-    "danger_selected": "#fdbdafff",
-    "danger_disabled": "#e54d2e4d",
-    "warning_foreground": "#ffffffff",
-    "warning_background": "#fff7edff",
-    "warning_hover": "#ffd19aff",
-    "warning_active": "#ffc182ff",
-    "warning_selected": "#ffc182ff",
-    "warning_disabled": "#f76b154d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#e9f6e9ff",
-    "ghost_element_hover": "#193b2d0d",
-    "ghost_element_active": "#193b2d1a",
-    "ghost_element_selected": "#193b2d1a",
-    "ghost_element_disabled": "#193b2d05",
-    "tab_background": "#e9f6e9ff",
-    "tab_foreground": "#2f7c57ff",
-    "tab_hover_background": "#193b2d0d",
-    "tab_active_background": "#fbfefcff",
-    "tab_active_foreground": "#193b2dff",
-    "scrollbar_thumb_background": "#193b2d1a",
-    "scrollbar_thumb_hover_background": "#193b2d26",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#00000000",
-    "drop_target_background": "#30a46c1a",
-    "cursor": "#30a46cff",
-    "selection": "#30a46c40"
-  },
-  "dark": {
-    "background": "#0e1512ff",
-    "surface_background": "#121b17ff",
-    "elevated_surface_background": "#132d21ff",
-    "panel_background": "#0e1512ff",
-    "overlay": "#b1f1cb1a",
-    "title_bar": "#132d21ff",
-    "title_bar_inactive": "#0e1512ff",
-    "window_border": "#20573eff",
-    "border": "#20573eff",
-    "border_variant": "#174933ff",
-    "border_focused": "#33b074ff",
-    "border_selected": "#33b074ff",
-    "border_transparent": "#00000000",
-    "border_disabled": "#113b29ff",
-    "ring": "#33b074ff",
-    "text": "#b1f1cbff",
-    "text_muted": "#71d083ff",
-    "text_placeholder": "#2f7c57ff",
-    "text_accent": "#3dd68cff",
-    "text_danger": "#ff977dff",
-    "text_warning": "#ffa057ff",
-    "icon": "#71d083ff",
-    "icon_muted": "#2f7c57ff",
-    "icon_accent": "#33b074ff",
-    "element_foreground": "#0e1512ff",
-    "element_background": "#3dd68cff",
-    "element_hover": "#71d083ff",
-    "element_active": "#33b074ff",
-    "element_selected": "#30a46cff",
-    "element_disabled": "#3dd68c4d",
-    "secondary_foreground": "#b1f1cbff",
-    "secondary_background": "#132d21ff",
-    "secondary_hover": "#113b29ff",
-    "secondary_active": "#174933ff",
-    "secondary_selected": "#174933ff",
-    "secondary_disabled": "#3dd68c4d",
-    "danger_foreground": "#181111ff",
-    "danger_background": "#391714ff",
-    "danger_hover": "#5e1c16ff",
-    "danger_active": "#6e2920ff",
-    "danger_selected": "#6e2920ff",
-    "danger_disabled": "#ff977d4d",
-    "warning_foreground": "#17120eff",
-    "warning_background": "#331e0bff",
-    "warning_hover": "#562800ff",
-    "warning_active": "#66350cff",
-    "warning_selected": "#66350cff",
-    "warning_disabled": "#ffa0574d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#132d21ff",
-    "ghost_element_hover": "#b1f1cb0d",
-    "ghost_element_active": "#b1f1cb1a",
-    "ghost_element_selected": "#b1f1cb1a",
-    "ghost_element_disabled": "#b1f1cb05",
-    "tab_background": "#132d21ff",
-    "tab_foreground": "#71d083ff",
-    "tab_hover_background": "#b1f1cb0d",
-    "tab_active_background": "#0e1512ff",
-    "tab_active_foreground": "#b1f1cbff",
-    "scrollbar_thumb_background": "#b1f1cb1a",
-    "scrollbar_thumb_hover_background": "#b1f1cb26",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#00000000",
-    "drop_target_background": "#3dd68c1a",
-    "cursor": "#3dd68cff",
-    "selection": "#3dd68c40"
-  }
-}
@@ -1,144 +0,0 @@
-{
-  "id": "ocean",
-  "name": "Ocean",
-  "author": "Coop",
-  "url": "https://coopchat.xyz",
-  "light": {
-    "background": "#fafefeff",
-    "surface_background": "#f2fbfaff",
-    "elevated_surface_background": "#e6f7f7ff",
-    "panel_background": "#fafefeff",
-    "overlay": "#00333f1a",
-    "title_bar": "#e6f7f7ff",
-    "title_bar_inactive": "#fafefeff",
-    "window_border": "#cce5e9ff",
-    "border": "#cce5e9ff",
-    "border_variant": "#b8dde3ff",
-    "border_focused": "#00a2c7ff",
-    "border_selected": "#00a2c7ff",
-    "border_transparent": "#00000000",
-    "border_disabled": "#e0f0f2ff",
-    "ring": "#0797b9ff",
-    "text": "#0d3c48ff",
-    "text_muted": "#107d98ff",
-    "text_placeholder": "#60b3d7ff",
-    "text_accent": "#00a2c7ff",
-    "text_danger": "#e54d2eff",
-    "text_warning": "#f76b15ff",
-    "icon": "#107d98ff",
-    "icon_muted": "#60b3d7ff",
-    "icon_accent": "#0797b9ff",
-    "element_foreground": "#ffffffff",
-    "element_background": "#00a2c7ff",
-    "element_hover": "#0797b9ff",
-    "element_active": "#12667eff",
-    "element_selected": "#0d4a5cff",
-    "element_disabled": "#00a2c74d",
-    "secondary_foreground": "#0d4a5cff",
-    "secondary_background": "#ddf9f2ff",
-    "secondary_hover": "#c8f4e9ff",
-    "secondary_active": "#b3ecdeff",
-    "secondary_selected": "#b3ecdeff",
-    "secondary_disabled": "#00a2c74d",
-    "danger_foreground": "#ffffffff",
-    "danger_background": "#feebe7ff",
-    "danger_hover": "#ffcdc2ff",
-    "danger_active": "#fdbdafff",
-    "danger_selected": "#fdbdafff",
-    "danger_disabled": "#e54d2e4d",
-    "warning_foreground": "#ffffffff",
-    "warning_background": "#fff7edff",
-    "warning_hover": "#ffd19aff",
-    "warning_active": "#ffc182ff",
-    "warning_selected": "#ffc182ff",
-    "warning_disabled": "#f76b154d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#e6f7f7ff",
-    "ghost_element_hover": "#00333f0d",
-    "ghost_element_active": "#00333f1a",
-    "ghost_element_selected": "#00333f1a",
-    "ghost_element_disabled": "#00333f05",
-    "tab_background": "#e6f7f7ff",
-    "tab_foreground": "#107d98ff",
-    "tab_hover_background": "#00333f0d",
-    "tab_active_background": "#fafefeff",
-    "tab_active_foreground": "#0d3c48ff",
-    "scrollbar_thumb_background": "#00333f1a",
-    "scrollbar_thumb_hover_background": "#00333f26",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#00000000",
-    "drop_target_background": "#00a2c71a",
-    "cursor": "#00a2c7ff",
-    "selection": "#00a2c740"
-  },
-  "dark": {
-    "background": "#0b161aff",
-    "surface_background": "#101b20ff",
-    "elevated_surface_background": "#082c36ff",
-    "panel_background": "#0b161aff",
-    "overlay": "#c2f3ff1a",
-    "title_bar": "#082c36ff",
-    "title_bar_inactive": "#0b161aff",
-    "window_border": "#1b537bff",
-    "border": "#1b537bff",
-    "border_variant": "#154467ff",
-    "border_focused": "#00a2c7ff",
-    "border_selected": "#00a2c7ff",
-    "border_transparent": "#00000000",
-    "border_disabled": "#112840ff",
-    "ring": "#23afd0ff",
-    "text": "#b6ecf7ff",
-    "text_muted": "#4ccce6ff",
-    "text_placeholder": "#197caeff",
-    "text_accent": "#7ce2feff",
-    "text_danger": "#ff977dff",
-    "text_warning": "#ffa057ff",
-    "icon": "#4ccce6ff",
-    "icon_muted": "#197caeff",
-    "icon_accent": "#23afd0ff",
-    "element_foreground": "#0b161aff",
-    "element_background": "#7ce2feff",
-    "element_hover": "#a8eeffff",
-    "element_active": "#23afd0ff",
-    "element_selected": "#00a2c7ff",
-    "element_disabled": "#7ce2fe4d",
-    "secondary_foreground": "#adf0ddff",
-    "secondary_background": "#0d2d2aff",
-    "secondary_hover": "#023b37ff",
-    "secondary_active": "#084843ff",
-    "secondary_selected": "#084843ff",
-    "secondary_disabled": "#7ce2fe4d",
-    "danger_foreground": "#181111ff",
-    "danger_background": "#391714ff",
-    "danger_hover": "#5e1c16ff",
-    "danger_active": "#6e2920ff",
-    "danger_selected": "#6e2920ff",
-    "danger_disabled": "#ff977d4d",
-    "warning_foreground": "#17120eff",
-    "warning_background": "#331e0bff",
-    "warning_hover": "#562800ff",
-    "warning_active": "#66350cff",
-    "warning_selected": "#66350cff",
-    "warning_disabled": "#ffa0574d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#082c36ff",
-    "ghost_element_hover": "#c2f3ff0d",
-    "ghost_element_active": "#c2f3ff1a",
-    "ghost_element_selected": "#c2f3ff1a",
-    "ghost_element_disabled": "#c2f3ff05",
-    "tab_background": "#082c36ff",
-    "tab_foreground": "#4ccce6ff",
-    "tab_hover_background": "#c2f3ff0d",
-    "tab_active_background": "#0b161aff",
-    "tab_active_foreground": "#b6ecf7ff",
-    "scrollbar_thumb_background": "#c2f3ff1a",
-    "scrollbar_thumb_hover_background": "#c2f3ff26",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#00000000",
-    "drop_target_background": "#7ce2fe1a",
-    "cursor": "#7ce2feff",
-    "selection": "#7ce2fe40"
-  }
-}
@@ -7,7 +7,6 @@ use rust_embed::RustEmbed;
 #[include = "fonts/**/*"]
 #[include = "brand/**/*"]
 #[include = "icons/**/*"]
-#[include = "themes/**/*"]
 #[exclude = "*.DS_Store"]
 pub struct Assets;

@@ -904,7 +904,7 @@ impl ChatPanel {
                                .h_10()
                                .justify_center()
                                .text_sm()
-                                .bg(cx.theme().elevated_surface_background)
+                                .bg(cx.theme().raised)
                                .rounded(cx.theme().radius)
                                .child("Message isn't traced yet"),
                        )
@@ -919,7 +919,7 @@ impl ChatPanel {
                                        .h_7()
                                        .px_2()
                                        .gap_2()
-                                        .bg(cx.theme().elevated_surface_background)
+                                        .bg(cx.theme().raised)
                                        .rounded(cx.theme().radius)
                                        .text_sm()
                                        .child(div().size_1p5().rounded_full().bg(gpui::green()))
@@ -951,7 +951,7 @@ impl ChatPanel {
                                .h_7()
                                .px_2()
                                .gap_2()
-                                .bg(cx.theme().elevated_surface_background)
+                                .bg(cx.theme().raised)
                                .rounded(cx.theme().radius)
                                .text_sm()
                                .child(div().size_1p5().rounded_full().bg(gpui::green()))
@@ -975,7 +975,7 @@ impl ChatPanel {
                svg()
                    .path("brand/coop.svg")
                    .size_12()
-                    .text_color(cx.theme().ghost_element_background_alt),
+                    .text_color(cx.theme().raised),
            )
            .message(PRIVATE_NOTICE)
            .into_any_element()
@@ -991,13 +991,13 @@ impl ChatPanel {
            .justify_center()
            .text_center()
            .text_xs()
-            .text_color(cx.theme().text_placeholder)
+            .text_color(cx.theme().text_faint)
            .line_height(relative(1.3))
            .child(
                svg()
                    .path("brand/coop.svg")
                    .size_12()
-                    .text_color(cx.theme().ghost_element_active),
+                    .text_color(cx.theme().active),
            )
            .child(PRIVATE_NOTICE)
            .into_any_element()
@@ -1020,8 +1020,8 @@ impl ChatPanel {
                            .size_8()
                            .justify_center()
                            .rounded_full()
-                            .bg(cx.theme().warning_background)
-                            .text_color(cx.theme().warning_foreground)
+                            .bg(cx.theme().warning_muted)
+                            .text_color(cx.theme().warning)
                            .child(Icon::new(IconName::Warning).small()),
                    )
                    .child(
@@ -1155,13 +1155,13 @@ impl ChatPanel {
            })
            .overlay(
                div()
-                    .group_hover("", |this| this.bg(cx.theme().element_active))
+                    .group_hover("", |this| this.bg(cx.theme().hover))
                    .absolute()
                    .left_0()
                    .top_0()
                    .w(px(2.))
                    .h_full()
-                    .bg(cx.theme().border_transparent),
+                    .bg(gpui::transparent_black()),
            )
            .overlay(self.render_actions(&id, &pk, cx))
            .on_mouse_down(
@@ -1187,7 +1187,7 @@ impl ChatPanel {
            return div().child(
                img(media[0].clone())
                    .border_1()
-                    .border_color(cx.theme().border_variant)
+                    .border_color(cx.theme().border)
                    .h(px(250.))
                    .object_fit(ObjectFit::Cover)
                    .rounded(cx.theme().radius),
@@ -1215,7 +1215,7 @@ impl ChatPanel {
                                img(item.clone())
                                    .h_32()
                                    .border_1()
-                                    .border_color(cx.theme().border_variant)
+                                    .border_color(cx.theme().border)
                                    .rounded(cx.theme().radius),
                            ),
                    );
@@ -1244,7 +1244,7 @@ impl ChatPanel {
                    .w_full()
                    .px_2()
                    .border_l_2()
-                    .border_color(cx.theme().element_active)
+                    .border_color(cx.theme().accent.strong)
                    .text_sm()
                    .child(div().font_semibold().child(author.name()))
                    .child(
@@ -1254,7 +1254,7 @@ impl ChatPanel {
                            .line_clamp(1)
                            .child(message.preview()),
                    )
-                    .hover(|this| this.bg(cx.theme().elevated_surface_background))
+                    .hover(|this| this.bg(cx.theme().hover))
                    .on_click({
                        let id = *id;
                        cx.listener(move |this, _event, _window, _cx| {
@@ -1294,9 +1294,9 @@ impl ChatPanel {
                    .text_xs()
                    .border_1()
                    .when(has_reacted, |this| {
-                        this.text_color(cx.theme().secondary_foreground)
-                            .bg(cx.theme().secondary_background)
-                            .border_color(cx.theme().secondary_active)
+                        this.text_color(cx.theme().accent.text_on_wash)
+                            .bg(cx.theme().accent.wash)
+                            .border_color(cx.theme().accent.selection)
                    })
                    .when(!has_reacted, |this| this.border_color(cx.theme().border))
                    .child(emoji)
@@ -1330,7 +1330,7 @@ impl ChatPanel {
        div()
            .id(SharedString::from(id.to_hex()))
            .child(label)
-            .when(failed, |this| this.text_color(cx.theme().text_danger))
+            .when(failed, |this| this.text_color(cx.theme().danger))
            .when_some(reports, |this, reports| {
                this.when(!pending, |this| {
                    this.on_click(move |_e, window, cx| {
@@ -1386,8 +1386,8 @@ impl ChatPanel {
                        .w_full()
                        .text_sm()
                        .rounded(cx.theme().radius)
-                        .bg(cx.theme().warning_background)
-                        .text_color(cx.theme().warning_foreground)
+                        .bg(cx.theme().warning_muted)
+                        .text_color(cx.theme().warning)
                        .child(div().flex_1().w_full().text_center().child(error)),
                )
            })
@@ -1406,7 +1406,7 @@ impl ChatPanel {
                                        .p_1()
                                        .w_full()
                                        .rounded(cx.theme().radius)
-                                        .bg(cx.theme().danger_background)
+                                        .bg(cx.theme().danger_muted)
                                        .child(
                                            div()
                                                .text_xs()
@@ -1417,7 +1417,7 @@ impl ChatPanel {
                                        .child(
                                            div()
                                                .text_xs()
-                                                .text_color(cx.theme().danger_foreground)
+                                                .text_color(cx.theme().danger)
                                                .line_height(relative(1.25))
                                                .child(SharedString::from(msg.to_string())),
                                        ),
@@ -1436,7 +1436,7 @@ impl ChatPanel {
                                        .p_1()
                                        .w_full()
                                        .rounded(cx.theme().radius)
-                                        .bg(cx.theme().elevated_surface_background)
+                                        .bg(cx.theme().raised)
                                        .child(
                                            div()
                                                .text_xs()
@@ -1611,7 +1611,7 @@ impl ChatPanel {
                .child(
                    img(path.clone())
                        .border_1()
-                        .border_color(cx.theme().border_variant)
+                        .border_color(cx.theme().border)
                        .h(px(250.))
                        .object_fit(ObjectFit::Cover)
                        .rounded(cx.theme().radius),
@@ -1645,9 +1645,9 @@ impl ChatPanel {
            .gap_2()
            .p_2()
            .border_1()
-            .border_color(cx.theme().border_variant)
+            .border_color(cx.theme().border)
            .rounded(cx.theme().radius)
-            .child(Icon::new(IconName::Lock).text_color(cx.theme().icon_accent))
+            .child(Icon::new(IconName::Lock).text_color(cx.theme().accent.strong))
            .child(
                v_flex()
                    .min_w_0()
@@ -1657,7 +1657,7 @@ impl ChatPanel {
                    .child(
                        div()
                            .text_xs()
-                            .text_color(cx.theme().text_placeholder)
+                            .text_color(cx.theme().text_faint)
                            .child(label),
                    ),
            )
@@ -1700,8 +1700,8 @@ impl ChatPanel {
                            .justify_center()
                            .rounded(cx.theme().radius)
                            .border_1()
-                            .border_color(cx.theme().border_variant)
-                            .bg(cx.theme().surface_background)
+                            .border_color(cx.theme().border)
+                            .bg(cx.theme().shell)
                            .text_xs()
                            .text_center()
                            .child("Preview not available"),
@@ -1718,7 +1718,7 @@ impl ChatPanel {
                    .justify_center()
                    .rounded_full()
                    .border_1()
-                    .border_color(cx.theme().border_variant)
+                    .border_color(cx.theme().border)
                    .bg(gpui::green())
                    .child(Icon::new(IconName::Lock).size_2().text_color(gpui::white())),
            )
@@ -1753,7 +1753,7 @@ impl ChatPanel {
                .w_full()
                .pl_2()
                .border_l_2()
-                .border_color(cx.theme().element_active)
+                .border_color(cx.theme().accent.strong)
                .child(
                    div()
                        .flex()
@@ -1769,7 +1769,7 @@ impl ChatPanel {
                                .child("Replying to:")
                                .child(
                                    div()
-                                        .text_color(cx.theme().text_accent)
+                                        .text_color(cx.theme().accent.primary)
                                        .child(profile.name()),
                                ),
                        )
@@ -1994,7 +1994,7 @@ impl Render for ChatPanel {
                            div()
                                .px_1()
                                .text_xs()
-                                .text_color(cx.theme().text_warning)
+                                .text_color(cx.theme().warning)
                                .child(WARNING),
                        )
                    })
@@ -78,7 +78,7 @@ fn body(group: &WeakEntity<Group>, cx: &App) -> AnyElement {
                "Supported kinds",
                if items.is_empty() {
                    div()
-                        .text_color(cx.theme().text_placeholder)
+                        .text_color(cx.theme().text_faint)
                        .child("None")
                        .into_any_element()
                } else {
@@ -175,7 +175,7 @@ fn header(group: &Group, cx: &App) -> AnyElement {
                .child(
                    div()
                        .text_xs()
-                        .text_color(cx.theme().text_placeholder)
+                        .text_color(cx.theme().text_faint)
                        .truncate()
                        .child(SharedString::from(format!(
                            "{} · {}",
@@ -239,7 +239,7 @@ fn chip(label: impl Into<SharedString>, cx: &App) -> AnyElement {
        .px_1p5()
        .py_0p5()
        .rounded(cx.theme().radius)
-        .bg(cx.theme().element_background)
+        .bg(cx.theme().accent.wash)
        .text_xs()
        .child(label.into())
        .into_any_element()
@@ -622,7 +622,7 @@ impl GroupPanel {
            .child(
                Icon::new(IconName::Info)
                    .small()
-                    .text_color(cx.theme().icon_muted),
+                    .text_color(cx.theme().text_faint),
            )
            .child(div().flex_1().min_w_0().truncate().child(message))
            .child(
@@ -662,7 +662,7 @@ impl GroupPanel {
                    .px_1p5()
                    .py_0p5()
                    .rounded(cx.theme().radius)
-                    .bg(cx.theme().element_background)
+                    .bg(cx.theme().accent.wash)
                    .text_xs()
                    .text_color(cx.theme().text_muted)
                    .child(pin_label(group, pin))
@@ -924,7 +924,7 @@ impl GroupPanel {
                    .h_8()
                    .px_2()
                    .border_1()
-                    .border_color(cx.theme().border_variant)
+                    .border_color(cx.theme().border)
                    .rounded(cx.theme().radius)
                    .text_xs()
                    .text_color(cx.theme().text_muted)
@@ -1034,7 +1034,7 @@ impl Render for GroupPanel {
                                        .size_full()
                                        .justify_center()
                                        .text_sm()
-                                        .text_color(cx.theme().text_placeholder)
+                                        .text_color(cx.theme().text_faint)
                                        .child("No messages yet")
                                        .into_any_element(),
                                }),
@@ -141,7 +141,7 @@ pub(crate) fn render_activity(ix: usize, activity: &Activity, cx: &App) -> AnyEl
        .gap_2()
        .py_1()
        .px_3()
-        .hover(|this| this.bg(cx.theme().surface_background))
+        .hover(|this| this.bg(cx.theme().hover))
        .child(badge(activity, cx))
        .when(!hide_avatar, |this| {
            this.child(
@@ -164,7 +164,7 @@ pub(crate) fn render_activity(ix: usize, activity: &Activity, cx: &App) -> AnyEl
                .min_w_0()
                .truncate()
                .text_sm()
-                .text_color(cx.theme().text_placeholder)
+                .text_color(cx.theme().text_faint)
                .child(SharedString::from(action(activity))),
        )
        .child(
@@ -172,7 +172,7 @@ pub(crate) fn render_activity(ix: usize, activity: &Activity, cx: &App) -> AnyEl
                .flex_shrink_0()
                .ml_1()
                .text_xs()
-                .text_color(cx.theme().text_placeholder)
+                .text_color(cx.theme().text_faint)
                .child(activity.created_at.to_ago()),
        )
        .into_any_element()
@@ -180,11 +180,11 @@ pub(crate) fn render_activity(ix: usize, activity: &Activity, cx: &App) -> AnyEl

 fn badge(activity: &Activity, cx: &App) -> AnyElement {
    let (icon, color) = match activity.kind {
-        Kind::GroupJoinRequest => (IconName::Login, cx.theme().icon_accent),
-        Kind::GroupPutUser => (IconName::Login, cx.theme().icon_accent),
-        Kind::GroupLeaveRequest => (IconName::Logout, cx.theme().text_danger),
-        Kind::GroupRemoveUser => (IconName::Ban, cx.theme().text_danger),
-        _ => (IconName::Info, cx.theme().icon_muted),
+        Kind::GroupJoinRequest => (IconName::Login, cx.theme().accent.strong),
+        Kind::GroupPutUser => (IconName::Login, cx.theme().accent.strong),
+        Kind::GroupLeaveRequest => (IconName::Logout, cx.theme().danger),
+        Kind::GroupRemoveUser => (IconName::Ban, cx.theme().danger),
+        _ => (IconName::Info, cx.theme().text_faint),
    };

    h_flex()
@@ -211,7 +211,7 @@ fn media(media: &[SharedUri], cx: &App) -> AnyElement {
            .child(
                img(only.clone())
                    .border_1()
-                    .border_color(cx.theme().border_variant)
+                    .border_color(cx.theme().border)
                    .h(px(250.))
                    .object_fit(ObjectFit::Cover)
                    .rounded(cx.theme().radius),
@@ -231,7 +231,7 @@ fn media(media: &[SharedUri], cx: &App) -> AnyElement {
                img(item.clone())
                    .h_32()
                    .border_1()
-                    .border_color(cx.theme().border_variant)
+                    .border_color(cx.theme().border)
                    .rounded(cx.theme().radius),
            )
        }))
@@ -748,7 +748,7 @@ impl DeviceRegistry {
                                            .w_full()
                                            .px_2()
                                            .rounded(cx.theme().radius)
-                                            .bg(cx.theme().elevated_surface_background)
+                                            .bg(cx.theme().raised)
                                            .child(
                                                h_flex()
                                                    .gap_2()
@@ -778,7 +778,7 @@ impl DeviceRegistry {
                                            .w_full()
                                            .px_2()
                                            .rounded(cx.theme().radius)
-                                            .bg(cx.theme().elevated_surface_background)
+                                            .bg(cx.theme().raised)
                                            .child(code_label.clone()),
                                    ),
                            ),
@@ -1,12 +1,10 @@
-use std::rc::Rc;
-
 use anyhow::{Error, anyhow};
 use common::config_dir;
 use gpui::{App, AppContext, Context, Entity, Global, Subscription, Task, Window};
 use nostr_sdk::prelude::*;
 use serde::{Deserialize, Serialize};
 use smallvec::{SmallVec, smallvec};
-use theme::{Theme, ThemeFamily, ThemeMode};
+use theme::{AccentSelection, Appearance, SurfacePreference, Theme, ThemeSelection};

 pub fn init(cx: &mut App) {
    AppSettings::set_global(cx.new(AppSettings::new), cx)
@@ -53,7 +51,10 @@ macro_rules! setting_getters {
 }

 setting_accessors! {
-    pub theme_mode: ThemeMode,
+    pub appearance: Appearance,
+    pub accent_selection: AccentSelection,
+    pub surface_preference: SurfacePreference,
+    pub theme_selection: ThemeSelection,
    pub hide_avatar: bool,
    pub screening: bool,
    pub nip4e: bool,
@@ -119,11 +120,26 @@ impl RoomConfig {
 /// Settings
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct Settings {
-    /// Theme
-    pub theme: Option<String>,
+    /// The per-appearance theme variant selection
+    #[serde(default)]
+    pub theme_selection: ThemeSelection,

-    /// Theme mode
-    pub theme_mode: ThemeMode,
+    /// The active appearance; persisted under the legacy `theme_mode` key so
+    /// old settings files ("Light"/"Dark") keep loading
+    #[serde(
+        default,
+        rename = "theme_mode",
+        deserialize_with = "deserialize_appearance"
+    )]
+    pub appearance: Appearance,
+
+    /// The accent color override applied on top of the selected theme
+    #[serde(default)]
+    pub accent_selection: AccentSelection,
+
+    /// The preferred surface treatment
+    #[serde(default)]
+    pub surface_preference: SurfacePreference,

    /// Hide user avatars
    pub hide_avatar: bool,
@@ -152,8 +168,10 @@ pub struct Settings {
 impl Default for Settings {
    fn default() -> Self {
        Self {
-            theme: None,
-            theme_mode: ThemeMode::default(),
+            theme_selection: ThemeSelection::default(),
+            appearance: Appearance::default(),
+            accent_selection: AccentSelection::default(),
+            surface_preference: SurfacePreference::default(),
            hide_avatar: false,
            screening: true,
            nip4e: false,
@@ -165,6 +183,21 @@ impl Default for Settings {
    }
 }

+/// Accept the legacy "Light"/"Dark" capitalization alongside "light"/"dark".
+fn deserialize_appearance<'de, D>(deserializer: D) -> Result<Appearance, D::Error>
+where
+    D: serde::Deserializer<'de>,
+{
+    let value = String::deserialize(deserializer)?;
+    match value.to_lowercase().as_str() {
+        "light" => Ok(Appearance::Light),
+        "dark" => Ok(Appearance::Dark),
+        _ => Err(serde::de::Error::custom(format!(
+            "unknown appearance: {value}"
+        ))),
+    }
+}
+
 struct GlobalAppSettings(Entity<AppSettings>);

 impl Global for GlobalAppSettings {}
@@ -264,44 +297,71 @@ impl AppSettings {
        }
    }

-    /// Set theme
-    pub fn set_theme<T>(&mut self, theme: T, window: &mut Window, cx: &mut Context<Self>)
-    where
-        T: Into<String>,
-    {
-        // Update settings
+    /// Set the theme variant for the current appearance
+    pub fn set_theme_variant(&mut self, id: String, window: &mut Window, cx: &mut Context<Self>) {
        self.inner.update(cx, |this, cx| {
-            this.theme = Some(theme.into());
+            let mut selection = this.theme_selection.clone();
+            selection.set_variant(this.appearance, id);
+            this.theme_selection = selection;
            cx.notify();
        });

-        // Apply the new theme
        self.apply_theme(Some(window), cx);
    }

-    /// Reset theme
+    /// Reset the theme selection to the defaults
    pub fn reset_theme(&mut self, window: &mut Window, cx: &mut Context<Self>) {
        self.inner.update(cx, |this, cx| {
-            this.theme = None;
+            this.theme_selection = ThemeSelection::default();
+            cx.notify();
+        });
+        self.apply_theme(Some(window), cx);
+    }
+
+    /// Set the accent color override and re-resolve the theme
+    pub fn apply_accent(
+        &mut self,
+        selection: AccentSelection,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.inner.update(cx, |this, cx| {
+            this.accent_selection = selection;
+            cx.notify();
+        });
+        self.apply_theme(Some(window), cx);
+    }
+
+    /// Set the surface treatment preference
+    pub fn apply_surface(
+        &mut self,
+        preference: SurfacePreference,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.inner.update(cx, |this, cx| {
+            this.surface_preference = preference;
            cx.notify();
        });
        self.apply_theme(Some(window), cx);
    }

    /// Apply theme
-    pub fn apply_theme(&mut self, mut window: Option<&mut Window>, cx: &mut Context<Self>) {
-        if let Some(name) = self.inner.read(cx).theme.as_ref() {
-            let mode = self.inner.read(cx).theme_mode;
+    pub fn apply_theme(&mut self, window: Option<&mut Window>, cx: &mut Context<Self>) {
+        let (selection, accent, surface, appearance) = {
+            let settings = self.inner.read(cx);
+            (
+                settings.theme_selection.clone(),
+                settings.accent_selection,
+                settings.surface_preference,
+                settings.appearance,
+            )
+        };

-            if let Ok(new_theme) = ThemeFamily::from_assets(name) {
-                Theme::apply_theme(Rc::new(new_theme), window.as_deref_mut(), cx);
-                Theme::change(mode, window, cx);
-            } else {
-                log::info!("Failed to load theme: {name}");
-            }
-        } else {
-            Theme::apply_theme(Rc::new(ThemeFamily::default()), window, cx);
-        }
+        Theme::set_selection(selection, cx);
+        Theme::set_accent_selection(accent, cx);
+        Theme::set_surface_preference(surface, cx);
+        Theme::change(appearance, window, cx);
    }

    /// Check if decoupling encryption key is enabled
@@ -7,11 +7,8 @@ publish.workspace = true
 [dependencies]
 gpui.workspace = true
 gpui-base.workspace = true
-anyhow.workspace = true
 log.workspace = true
 serde.workspace = true
 serde_json.workspace = true
-schemars.workspace = true
-
-[dev-dependencies]
-tempfile = "3.10"
+sha2.workspace = true
+thiserror.workspace = true
@@ -1 +0,0 @@
-../../LICENSE
@@ -1 +0,0 @@
-CREDITS: [zed/theme](https://github.com/zed-industries/zed/tree/main/crates/theme)
@@ -1,583 +0,0 @@
-use gpui::{Hsla, Rgba, hsla};
-use schemars::JsonSchema;
-use serde::{Deserialize, Serialize};
-
-use crate::scale::{ColorScale, ColorScaleSet};
-
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Default, Deserialize, Serialize, JsonSchema)]
-pub struct ThemeColors {
-    // Surface colors
-    pub background: Hsla,
-    pub surface_background: Hsla,
-    pub elevated_surface_background: Hsla,
-    pub panel_background: Hsla,
-    pub overlay: Hsla,
-    pub title_bar: Hsla,
-    pub title_bar_inactive: Hsla,
-    pub window_border: Hsla,
-
-    // Border colors
-    pub border: Hsla,
-    pub border_variant: Hsla,
-    pub border_focused: Hsla,
-    pub border_selected: Hsla,
-    pub border_transparent: Hsla,
-    pub border_disabled: Hsla,
-    pub ring: Hsla,
-
-    // Text colors
-    pub text: Hsla,
-    pub text_muted: Hsla,
-    pub text_placeholder: Hsla,
-    pub text_accent: Hsla,
-    pub text_danger: Hsla,
-    pub text_warning: Hsla,
-
-    // Icon colors
-    pub icon: Hsla,
-    pub icon_muted: Hsla,
-    pub icon_accent: Hsla,
-
-    // Element colors
-    pub element_foreground: Hsla,
-    pub element_background: Hsla,
-    pub element_hover: Hsla,
-    pub element_active: Hsla,
-    pub element_selected: Hsla,
-    pub element_disabled: Hsla,
-
-    // Secondary element colors
-    pub secondary_foreground: Hsla,
-    pub secondary_background: Hsla,
-    pub secondary_hover: Hsla,
-    pub secondary_active: Hsla,
-    pub secondary_selected: Hsla,
-    pub secondary_disabled: Hsla,
-
-    // Danger element colors
-    pub danger_foreground: Hsla,
-    pub danger_background: Hsla,
-    pub danger_hover: Hsla,
-    pub danger_active: Hsla,
-    pub danger_selected: Hsla,
-    pub danger_disabled: Hsla,
-
-    // Warning element colors
-    pub warning_foreground: Hsla,
-    pub warning_background: Hsla,
-    pub warning_hover: Hsla,
-    pub warning_active: Hsla,
-    pub warning_selected: Hsla,
-    pub warning_disabled: Hsla,
-
-    // Ghost element colors
-    pub ghost_element_background: Hsla,
-    pub ghost_element_background_alt: Hsla,
-    pub ghost_element_hover: Hsla,
-    pub ghost_element_active: Hsla,
-    pub ghost_element_selected: Hsla,
-    pub ghost_element_disabled: Hsla,
-
-    // Tab colors
-    pub tab_background: Hsla,
-    pub tab_foreground: Hsla,
-    pub tab_hover_background: Hsla,
-    pub tab_active_background: Hsla,
-    pub tab_active_foreground: Hsla,
-
-    // Scrollbar colors
-    pub scrollbar_thumb_background: Hsla,
-    pub scrollbar_thumb_hover_background: Hsla,
-    pub scrollbar_thumb_border: Hsla,
-    pub scrollbar_track_background: Hsla,
-    pub scrollbar_track_border: Hsla,
-
-    // Interactive colors
-    pub drop_target_background: Hsla,
-    pub cursor: Hsla,
-    pub selection: Hsla,
-}
-
-/// The default colors for the theme.
-///
-/// Themes that do not specify all colors are refined off of these defaults.
-impl ThemeColors {
-    /// Returns the default colors for light themes.
-    ///
-    /// Themes that do not specify all colors are refined off of these defaults.
-    pub(crate) fn light() -> Self {
-        Self {
-            background: neutral().light().step_1(),
-            surface_background: neutral().light().step_2(),
-            elevated_surface_background: neutral().light().step_3(),
-            panel_background: neutral().light().step_1(),
-            overlay: neutral().light_alpha().step_3(),
-            title_bar: neutral().light().step_2(),
-            title_bar_inactive: neutral().light().step_1(),
-            window_border: hsl(240.0, 5.9, 78.0),
-
-            border: neutral().light().step_6(),
-            border_variant: neutral().light().step_4(),
-            border_focused: brand().light().step_7(),
-            border_selected: brand().light().step_7(),
-            border_transparent: gpui::transparent_black(),
-            border_disabled: neutral().light().step_3(),
-            ring: brand().light().step_8(),
-
-            text: neutral().light().step_12(),
-            text_muted: neutral().light().step_11(),
-            text_placeholder: neutral().light().step_10(),
-            text_accent: brand().light().step_9(),
-            text_danger: danger().light().step_9(),
-            text_warning: warning().light().step_9(),
-
-            icon: neutral().light().step_11(),
-            icon_muted: neutral().light().step_10(),
-            icon_accent: brand().light().step_11(),
-
-            element_foreground: brand().light().step_12(),
-            element_background: brand().light().step_9(),
-            element_hover: brand().light_alpha().step_10(),
-            element_active: brand().light().step_10(),
-            element_selected: brand().light().step_11(),
-            element_disabled: brand().light_alpha().step_3(),
-
-            secondary_foreground: brand().light().step_11(),
-            secondary_background: brand().light().step_3(),
-            secondary_hover: brand().light_alpha().step_4(),
-            secondary_active: brand().light().step_5(),
-            secondary_selected: brand().light().step_5(),
-            secondary_disabled: brand().light_alpha().step_3(),
-
-            danger_foreground: danger().light().step_12(),
-            danger_background: danger().light().step_3(),
-            danger_hover: danger().light_alpha().step_4(),
-            danger_active: danger().light().step_5(),
-            danger_selected: danger().light().step_5(),
-            danger_disabled: danger().light_alpha().step_3(),
-
-            warning_foreground: warning().light().step_12(),
-            warning_background: warning().light().step_3(),
-            warning_hover: warning().light_alpha().step_4(),
-            warning_active: warning().light().step_5(),
-            warning_selected: warning().light().step_5(),
-            warning_disabled: warning().light_alpha().step_3(),
-
-            ghost_element_background: gpui::transparent_black(),
-            ghost_element_background_alt: neutral().light().step_3(),
-            ghost_element_hover: neutral().light_alpha().step_4(),
-            ghost_element_active: neutral().light().step_5(),
-            ghost_element_selected: neutral().light().step_5(),
-            ghost_element_disabled: neutral().light_alpha().step_2(),
-
-            tab_background: neutral().light().step_3(),
-            tab_foreground: neutral().light().step_11(),
-            tab_hover_background: neutral().light_alpha().step_4(),
-            tab_active_background: neutral().light().step_1(),
-            tab_active_foreground: neutral().light().step_12(),
-
-            scrollbar_thumb_background: neutral().light_alpha().step_3(),
-            scrollbar_thumb_hover_background: neutral().light_alpha().step_4(),
-            scrollbar_thumb_border: gpui::transparent_black(),
-            scrollbar_track_background: gpui::transparent_black(),
-            scrollbar_track_border: gpui::transparent_black(),
-
-            drop_target_background: brand().light_alpha().step_2(),
-            cursor: hsl(200., 100., 50.),
-            selection: hsl(200., 100., 50.).alpha(0.25),
-        }
-    }
-
-    /// Returns the default colors for dark themes.
-    ///
-    /// Themes that do not specify all colors are refined off of these defaults.
-    pub(crate) fn dark() -> Self {
-        Self {
-            background: neutral().dark().step_1(),
-            surface_background: neutral().dark().step_2(),
-            elevated_surface_background: neutral().dark().step_3(),
-            panel_background: neutral().dark().step_1(),
-            overlay: neutral().dark_alpha().step_3(),
-            title_bar: neutral().dark().step_2(),
-            title_bar_inactive: neutral().dark().step_1(),
-            window_border: hsl(240.0, 3.7, 28.0),
-
-            border: neutral().dark().step_6(),
-            border_variant: neutral().dark().step_4(),
-            border_focused: brand().dark().step_7(),
-            border_selected: brand().dark().step_7(),
-            border_transparent: gpui::transparent_black(),
-            border_disabled: neutral().dark().step_3(),
-            ring: brand().dark().step_8(),
-
-            text: neutral().dark().step_12(),
-            text_muted: neutral().dark().step_11(),
-            text_placeholder: neutral().dark().step_10(),
-            text_accent: brand().dark().step_9(),
-            text_danger: danger().dark().step_9(),
-            text_warning: warning().dark().step_9(),
-
-            icon: neutral().dark().step_11(),
-            icon_muted: neutral().dark().step_10(),
-            icon_accent: brand().dark().step_11(),
-
-            element_foreground: brand().dark().step_1(),
-            element_background: brand().dark().step_9(),
-            element_hover: brand().dark_alpha().step_10(),
-            element_active: brand().dark().step_10(),
-            element_selected: brand().dark().step_11(),
-            element_disabled: brand().dark_alpha().step_3(),
-
-            secondary_foreground: brand().dark().step_12(),
-            secondary_background: brand().dark().step_3(),
-            secondary_hover: brand().dark_alpha().step_4(),
-            secondary_active: brand().dark().step_5(),
-            secondary_selected: brand().dark().step_5(),
-            secondary_disabled: brand().dark_alpha().step_3(),
-
-            danger_foreground: danger().dark().step_12(),
-            danger_background: danger().dark().step_3(),
-            danger_hover: danger().dark_alpha().step_4(),
-            danger_active: danger().dark().step_5(),
-            danger_selected: danger().dark().step_5(),
-            danger_disabled: danger().dark_alpha().step_3(),
-
-            warning_foreground: warning().dark().step_12(),
-            warning_background: warning().dark().step_3(),
-            warning_hover: warning().dark_alpha().step_4(),
-            warning_active: warning().dark().step_5(),
-            warning_selected: warning().dark().step_5(),
-            warning_disabled: warning().dark_alpha().step_3(),
-
-            ghost_element_background: gpui::transparent_black(),
-            ghost_element_background_alt: neutral().dark().step_3(),
-            ghost_element_hover: neutral().dark_alpha().step_4(),
-            ghost_element_active: neutral().dark().step_5(),
-            ghost_element_selected: neutral().dark().step_5(),
-            ghost_element_disabled: neutral().dark_alpha().step_2(),
-
-            tab_background: neutral().dark().step_3(),
-            tab_foreground: neutral().dark().step_11(),
-            tab_hover_background: neutral().dark_alpha().step_4(),
-            tab_active_background: neutral().dark().step_1(),
-            tab_active_foreground: neutral().dark().step_12(),
-
-            scrollbar_thumb_background: neutral().dark_alpha().step_3(),
-            scrollbar_thumb_hover_background: neutral().dark_alpha().step_4(),
-            scrollbar_thumb_border: gpui::transparent_black(),
-            scrollbar_track_background: gpui::transparent_black(),
-            scrollbar_track_border: gpui::transparent_black(),
-
-            drop_target_background: brand().dark_alpha().step_2(),
-            cursor: hsl(200., 100., 50.),
-            selection: hsl(200., 100., 50.).alpha(0.25),
-        }
-    }
-}
-
-fn neutral() -> ColorScaleSet {
-    gray()
-}
-
-fn brand() -> ColorScaleSet {
-    yellow()
-}
-
-fn danger() -> ColorScaleSet {
-    tomato()
-}
-
-fn warning() -> ColorScaleSet {
-    orange()
-}
-
-/// Make a [gpui::Hsla] color.
-///
-/// - h: 0..360.0
-/// - s: 0.0..100.0
-/// - l: 0.0..100.0
-pub(crate) fn hsl(h: f32, s: f32, l: f32) -> Hsla {
-    hsla(h / 360., s / 100.0, l / 100.0, 1.0)
-}
-
-type StaticColorScale = [&'static str; 12];
-
-struct StaticColorScaleSet {
-    light: StaticColorScale,
-    light_alpha: StaticColorScale,
-    dark: StaticColorScale,
-    dark_alpha: StaticColorScale,
-}
-
-impl TryFrom<StaticColorScaleSet> for ColorScaleSet {
-    type Error = anyhow::Error;
-
-    fn try_from(value: StaticColorScaleSet) -> Result<Self, Self::Error> {
-        fn to_color_scale(scale: StaticColorScale) -> Result<ColorScale, anyhow::Error> {
-            scale
-                .into_iter()
-                .map(|color| Rgba::try_from(color).map(Hsla::from))
-                .collect::<Result<Vec<_>, _>>()
-                .map(ColorScale::from_iter)
-        }
-
-        Ok(Self::new(
-            to_color_scale(value.light)?,
-            to_color_scale(value.light_alpha)?,
-            to_color_scale(value.dark)?,
-            to_color_scale(value.dark_alpha)?,
-        ))
-    }
-}
-
-pub(crate) fn gray() -> ColorScaleSet {
-    StaticColorScaleSet {
-        light: [
-            "#fcfcfcff",
-            "#f9f9f9ff",
-            "#f0f0f0ff",
-            "#e8e8e8ff",
-            "#e0e0e0ff",
-            "#d9d9d9ff",
-            "#cececeff",
-            "#bbbbbbff",
-            "#8d8d8dff",
-            "#838383ff",
-            "#646464ff",
-            "#202020ff",
-        ],
-        light_alpha: [
-            "#00000003",
-            "#00000006",
-            "#0000000f",
-            "#00000017",
-            "#0000001f",
-            "#00000026",
-            "#00000031",
-            "#00000044",
-            "#00000072",
-            "#0000007c",
-            "#0000009b",
-            "#000000df",
-        ],
-        dark: [
-            "#111111ff",
-            "#191919ff",
-            "#222222ff",
-            "#2a2a2aff",
-            "#313131ff",
-            "#3a3a3aff",
-            "#484848ff",
-            "#606060ff",
-            "#6e6e6eff",
-            "#7b7b7bff",
-            "#b4b4b4ff",
-            "#eeeeeeff",
-        ],
-        dark_alpha: [
-            "#00000000",
-            "#ffffff09",
-            "#ffffff12",
-            "#ffffff1b",
-            "#ffffff22",
-            "#ffffff2c",
-            "#ffffff3b",
-            "#ffffff55",
-            "#ffffff64",
-            "#ffffff72",
-            "#ffffffaf",
-            "#ffffffed",
-        ],
-    }
-    .try_into()
-    .unwrap()
-}
-
-pub(crate) fn yellow() -> ColorScaleSet {
-    StaticColorScaleSet {
-        light: [
-            "#fdfdf9ff",
-            "#fefce9ff",
-            "#fffab8ff",
-            "#fff394ff",
-            "#ffe770ff",
-            "#f3d768ff",
-            "#e4c767ff",
-            "#d5ae39ff",
-            "#ffe629ff",
-            "#ffdc00ff",
-            "#9e6c00ff",
-            "#473b1fff",
-        ],
-        light_alpha: [
-            "#aaaa0006",
-            "#f4dd0016",
-            "#ffee0047",
-            "#ffe3016b",
-            "#ffd5008f",
-            "#ebbc0097",
-            "#d2a10098",
-            "#c99700c6",
-            "#ffe100d6",
-            "#ffdc00ff",
-            "#9e6c00ff",
-            "#2e2000e0",
-        ],
-        dark: [
-            "#14120bff",
-            "#1b180fff",
-            "#2d2305ff",
-            "#362b00ff",
-            "#433500ff",
-            "#524202ff",
-            "#665417ff",
-            "#836a21ff",
-            "#ffe629ff",
-            "#ffff57ff",
-            "#f5e147ff",
-            "#f6eeb4ff",
-        ],
-        dark_alpha: [
-            "#d1510004",
-            "#f9b4000b",
-            "#ffaa001e",
-            "#fdb70028",
-            "#febb0036",
-            "#fec40046",
-            "#fdcb225c",
-            "#fdca327b",
-            "#ffe629ff",
-            "#ffff57ff",
-            "#fee949f5",
-            "#fef6baf6",
-        ],
-    }
-    .try_into()
-    .unwrap()
-}
-
-pub(crate) fn orange() -> ColorScaleSet {
-    StaticColorScaleSet {
-        light: [
-            "#fefcfbff",
-            "#fff7edff",
-            "#ffefd6ff",
-            "#ffdfb5ff",
-            "#ffd19aff",
-            "#ffc182ff",
-            "#f5ae73ff",
-            "#ec9455ff",
-            "#f76b15ff",
-            "#ef5f00ff",
-            "#cc4e00ff",
-            "#582d1dff",
-        ],
-        light_alpha: [
-            "#c0400004",
-            "#ff8e0012",
-            "#ff9c0029",
-            "#ff91014a",
-            "#ff8b0065",
-            "#ff81007d",
-            "#ed6c008c",
-            "#e35f00aa",
-            "#f65e00ea",
-            "#ef5f00ff",
-            "#cc4e00ff",
-            "#431200e2",
-        ],
-        dark: [
-            "#17120eff",
-            "#1e160fff",
-            "#331e0bff",
-            "#462100ff",
-            "#562800ff",
-            "#66350cff",
-            "#7e451dff",
-            "#a35829ff",
-            "#f76b15ff",
-            "#ff801fff",
-            "#ffa057ff",
-            "#ffe0c2ff",
-        ],
-        dark_alpha: [
-            "#ec360007",
-            "#fe6d000e",
-            "#fb6a0025",
-            "#ff590039",
-            "#ff61004a",
-            "#fd75045c",
-            "#ff832c75",
-            "#fe84389d",
-            "#fe6d15f7",
-            "#ff801fff",
-            "#ffa057ff",
-            "#ffe0c2ff",
-        ],
-    }
-    .try_into()
-    .unwrap()
-}
-
-pub(crate) fn tomato() -> ColorScaleSet {
-    StaticColorScaleSet {
-        light: [
-            "#fffcfcff",
-            "#fff8f7ff",
-            "#feebe7ff",
-            "#ffdcd3ff",
-            "#ffcdc2ff",
-            "#fdbdafff",
-            "#f5a898ff",
-            "#ec8e7bff",
-            "#e54d2eff",
-            "#dd4425ff",
-            "#d13415ff",
-            "#5c271fff",
-        ],
-        light_alpha: [
-            "#ff000003",
-            "#ff200008",
-            "#f52b0018",
-            "#ff35002c",
-            "#ff2e003d",
-            "#f92d0050",
-            "#e7280067",
-            "#db250084",
-            "#df2600d1",
-            "#d72400da",
-            "#cd2200ea",
-            "#460900e0",
-        ],
-        dark: [
-            "#181111ff",
-            "#1f1513ff",
-            "#391714ff",
-            "#4e1511ff",
-            "#5e1c16ff",
-            "#6e2920ff",
-            "#853a2dff",
-            "#ac4d39ff",
-            "#e54d2eff",
-            "#ec6142ff",
-            "#ff977dff",
-            "#fbd3cbff",
-        ],
-        dark_alpha: [
-            "#f1121208",
-            "#ff55330f",
-            "#ff35232b",
-            "#fd201142",
-            "#fe332153",
-            "#ff4f3864",
-            "#fd644a7d",
-            "#fe6d4ea7",
-            "#fe5431e4",
-            "#ff6847eb",
-            "#ff977dff",
-            "#ffd6cefb",
-        ],
-    }
-    .try_into()
-    .unwrap()
-}
@@ -3,7 +3,6 @@ use std::fmt::Debug;
 use gpui::Axis;
 use serde::{Deserialize, Serialize};

-/// A enum for defining the side of the element.
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
 pub enum Side {
    #[serde(rename = "left")]
@@ -13,20 +12,17 @@ pub enum Side {
 }

 impl Side {
-    /// Returns true if the side is left.
    #[inline]
    pub fn is_left(&self) -> bool {
        matches!(self, Self::Left)
    }

-    /// Returns true if the side is right.
    #[inline]
    pub fn is_right(&self) -> bool {
        matches!(self, Self::Right)
    }
 }

-/// A trait to extend the [`Axis`] enum with utility methods.
 pub trait AxisExt {
    #[allow(clippy::wrong_self_convention)]
    fn is_horizontal(self) -> bool;
@@ -46,18 +42,12 @@ impl AxisExt for Axis {
    }
 }

-/// A struct for defining the edges of an element.
-///
-/// A extend version of [`gpui::Edges`] to serialize/deserialize.
+/// [`gpui::Edges`] with serde support.
 #[derive(Debug, Clone, Default, Serialize, Deserialize, Eq, PartialEq)]
 #[repr(C)]
 pub struct Edges<T: Clone + Debug + Default + PartialEq> {
-    /// The size of the top edge.
    pub top: T,
-    /// The size of the right edge.
    pub right: T,
-    /// The size of the bottom edge.
    pub bottom: T,
-    /// The size of the left edge.
    pub left: T,
 }
@@ -1,70 +1,45 @@
-use std::ops::{Deref, DerefMut};
-use std::rc::Rc;
+use gpui::{App, Pixels, px};

-use gpui::{App, Global, Pixels, SharedString, Window, px};
-
-mod colors;
+mod builtins;
 mod geometry;
+mod model;
 mod notification;
 mod platform_kind;
-mod registry;
-mod scale;
+mod resolved;
+mod runtime;
 mod scrollbar_mode;
-mod theme;

-pub use colors::*;
 pub use geometry::*;
+pub use model::*;
 pub use notification::*;
 pub use platform_kind::PlatformKind;
-pub use registry::*;
-pub use scale::*;
+pub use resolved::{ResolvedAccentRoles, ResolvedColors};
+pub use runtime::Theme;
 pub use scrollbar_mode::*;
-pub use theme::*;

-/// Defines window border radius for platforms that use client side decorations.
 pub const CLIENT_SIDE_DECORATION_ROUNDING: Pixels = px(10.0);
-
-/// Defines window shadow size for platforms that use client side decorations.
 pub const CLIENT_SIDE_DECORATION_SHADOW: Pixels = px(10.0);
-
-/// Defines window border size for platforms that use client side decorations.
 pub const CLIENT_SIDE_DECORATION_BORDER: Pixels = px(1.0);
-
-/// Defines window titlebar height
 pub(crate) const TITLEBAR_HEIGHT: Pixels = px(36.0);
-
-/// Defines workspace tabbar height
 pub const TABBAR_HEIGHT: Pixels = px(36.0);
-
-/// Defines default sidebar width
 pub const SIDEBAR_WIDTH: Pixels = px(240.);

 pub fn init(cx: &mut App) {
-    registry::init(cx);
+    for issue in ThemeRegistry::builtin().validate() {
+        log::warn!("theme {}: {}", issue.variant_id, issue.message);
+    }

-    Theme::sync_system_appearance(None, cx);
+    Theme::change(Appearance::default(), None, cx);
    Theme::sync_scrollbar_appearance(cx);
 }

-/// Mirror the active coop theme into the `gpui-base` global theme.
-///
-/// Base paints a few things from its own tokens -- the focus ring, the wash
-/// behind selected text, scrollbars, and overlay backdrops -- so the two
-/// globals have to agree or those details drift away from the palette.
-///
-/// Only roles base can act on are projected. Radius, spacing, typography sizes,
-/// shadows, and scrollbar geometry keep their base defaults: coop has a single
-/// `radius`/`radius_lg`/`font_size` where base has six-point scales, so any
-/// mapping would be invented rather than derived.
-///
-/// This is a no-op before the coop theme global exists; [`Theme::change`] is the
-/// authoritative hook that keeps the projection current.
+/// Project the active theme onto the `gpui-base` global (focus ring, selection wash, scrollbars, backdrops).
 pub fn sync_base(cx: &mut App) {
    let Some(theme) = cx.try_global::<Theme>() else {
        return;
    };

-    let appearance = if theme.mode.is_dark() {
+    let appearance = if theme.appearance.is_dark() {
        gpui_base::ThemeAppearance::Dark
    } else {
        gpui_base::ThemeAppearance::Light
@@ -75,6 +50,7 @@ pub fn sync_base(cx: &mut App) {
        ScrollbarMode::Always => gpui_base::ScrollbarMode::Always,
    };
    let colors = theme.colors;
+    let accent = theme.accent;
    let font_family = theme.font_family.clone();

    let base = gpui_base::Theme::global_mut(cx);
@@ -85,22 +61,22 @@ pub fn sync_base(cx: &mut App) {
    let tokens = &mut base.tokens.colors;
    tokens.background = colors.background;
    tokens.foreground = colors.text;
-    tokens.surface = colors.surface_background;
+    tokens.surface = colors.shell;
    tokens.surface_foreground = colors.text;
-    tokens.primary = colors.element_background;
-    tokens.primary_foreground = colors.element_foreground;
-    tokens.secondary = colors.secondary_background;
-    tokens.secondary_foreground = colors.secondary_foreground;
-    tokens.muted = colors.ghost_element_background_alt;
+    tokens.primary = accent.primary;
+    tokens.primary_foreground = accent.on;
+    tokens.secondary = colors.raised;
+    tokens.secondary_foreground = colors.text;
+    tokens.muted = colors.hover;
    tokens.muted_foreground = colors.text_muted;
-    tokens.accent = colors.ghost_element_hover;
+    tokens.accent = accent.wash;
    tokens.accent_foreground = colors.text;
-    tokens.destructive = colors.danger_background;
-    tokens.destructive_foreground = colors.danger_foreground;
+    tokens.destructive = colors.danger;
+    tokens.destructive_foreground = accent.on_danger;
    tokens.border = colors.border;
-    tokens.input = colors.border;
-    tokens.ring = colors.ring;
-    tokens.selection = colors.selection;
+    tokens.input = colors.input;
+    tokens.ring = accent.strong;
+    tokens.selection = accent.selection;
 }

 pub trait ActiveTheme {
@@ -113,164 +89,3 @@ impl ActiveTheme for App {
        Theme::global(self)
    }
 }
-
-#[derive(Debug, Clone)]
-pub struct Theme {
-    /// Theme colors
-    pub colors: ThemeColors,
-
-    /// Theme family
-    pub theme: Rc<ThemeFamily>,
-
-    /// The appearance of the theme (light or dark).
-    pub mode: ThemeMode,
-
-    /// The font family for the application.
-    pub font_family: SharedString,
-
-    /// The root font size for the application, default is 15px.
-    pub font_size: Pixels,
-
-    /// Radius for the general elements.
-    pub radius: Pixels,
-
-    /// Radius for the large elements, e.g.: dialog, notification.
-    pub radius_lg: Pixels,
-
-    /// Enable shadow for the general elements. default is true
-    pub shadow: bool,
-
-    /// Show the scrollbar mode, default: scrolling
-    pub scrollbar_mode: ScrollbarMode,
-
-    /// Notification settings
-    pub notification: NotificationSettings,
-}
-
-impl Deref for Theme {
-    type Target = ThemeColors;
-
-    fn deref(&self) -> &Self::Target {
-        &self.colors
-    }
-}
-
-impl DerefMut for Theme {
-    fn deref_mut(&mut self) -> &mut Self::Target {
-        &mut self.colors
-    }
-}
-
-impl Global for Theme {}
-
-impl Theme {
-    /// Returns the global theme reference
-    pub fn global(cx: &App) -> &Theme {
-        cx.global::<Theme>()
-    }
-
-    /// Returns the global theme mutable reference
-    pub(crate) fn global_mut(cx: &mut App) -> &mut Theme {
-        cx.global_mut::<Theme>()
-    }
-
-    /// Returns true if the theme is dark.
-    pub fn is_dark(&self) -> bool {
-        self.mode.is_dark()
-    }
-
-    /// Sync the theme with the system appearance
-    pub fn sync_system_appearance(window: Option<&mut Window>, cx: &mut App) {
-        let appearance = window
-            .as_ref()
-            .map(|window| window.appearance())
-            .unwrap_or_else(|| cx.window_appearance());
-
-        Self::change(appearance, window, cx);
-    }
-
-    /// Sync the Scrollbar showing behavior with the system
-    pub fn sync_scrollbar_appearance(cx: &mut App) {
-        Theme::global_mut(cx).scrollbar_mode = if cx.should_auto_hide_scrollbars() {
-            ScrollbarMode::Scrolling
-        } else {
-            ScrollbarMode::Hover
-        };
-    }
-
-    /// Apply a new theme to the application.
-    pub fn apply_theme(new_theme: Rc<ThemeFamily>, window: Option<&mut Window>, cx: &mut App) {
-        let theme = cx.global_mut::<Theme>();
-        let mode = theme.mode;
-        // Update the theme
-        theme.theme = new_theme;
-        // Emit a theme change event
-        Self::change(mode, window, cx);
-    }
-
-    /// Change the app's appearance
-    pub fn change<M>(mode: M, window: Option<&mut Window>, cx: &mut App)
-    where
-        M: Into<ThemeMode>,
-    {
-        if !cx.has_global::<Theme>() {
-            let default_theme = ThemeFamily::default();
-            let theme = Theme::from(default_theme);
-
-            cx.set_global(theme);
-        }
-
-        let mode = mode.into();
-        let theme = cx.global_mut::<Theme>();
-
-        // Set the theme mode
-        theme.mode = mode;
-
-        // Set the theme colors
-        if mode.is_dark() {
-            theme.colors = *theme.theme.dark();
-        } else {
-            theme.colors = *theme.theme.light();
-        }
-
-        // Refresh the window if available
-        if let Some(window) = window {
-            window.refresh();
-        }
-
-        // Keep the base-layer projection in step with the coop palette
-        sync_base(cx);
-    }
-}
-
-impl From<ThemeFamily> for Theme {
-    fn from(family: ThemeFamily) -> Self {
-        let platform = PlatformKind::platform();
-        let mode = ThemeMode::default();
-
-        // Define the font family based on the platform.
-        let font_family = match platform {
-            PlatformKind::Linux => "Inter",
-            _ => ".SystemUIFont",
-        };
-
-        // Define the theme colors based on the appearance
-        let colors = match mode {
-            ThemeMode::Light => family.light(),
-            ThemeMode::Dark => family.dark(),
-        };
-
-        Theme {
-            font_size: px(15.),
-            font_family: font_family.into(),
-            radius: px(6.),
-            radius_lg: px(10.),
-            shadow: true,
-            scrollbar_mode: ScrollbarMode::default(),
-            notification: NotificationSettings::default(),
-            mode,
-            colors: *colors,
-            theme: Rc::new(family),
-        }
-    }
-}
@@ -0,0 +1,731 @@
+use std::collections::{BTreeMap, HashSet};
+use std::fmt;
+use std::str::FromStr;
+
+use serde::{Deserialize, Deserializer, Serialize, Serializer};
+
+use crate::builtins::builtin_registry;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub enum Appearance {
+    #[default]
+    Dark,
+    Light,
+}
+
+impl Appearance {
+    pub fn is_dark(self) -> bool {
+        matches!(self, Self::Dark)
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub enum SurfaceTreatment {
+    #[default]
+    Opaque,
+    Frosted,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub enum SurfacePreference {
+    #[default]
+    ThemeDefault,
+    Frosted,
+    Opaque,
+}
+
+impl SurfacePreference {
+    pub fn resolve(self, recommended: SurfaceTreatment) -> SurfaceTreatment {
+        match self {
+            Self::ThemeDefault => recommended,
+            Self::Frosted => SurfaceTreatment::Frosted,
+            Self::Opaque => SurfaceTreatment::Opaque,
+        }
+    }
+}
+
+/// A color serialized as `#rrggbb` or `#rrggbbaa`.
+#[derive(Clone, Copy, PartialEq, Eq, Hash)]
+pub struct Color {
+    pub r: u8,
+    pub g: u8,
+    pub b: u8,
+    pub a: u8,
+}
+
+impl Color {
+    pub const BLACK: Self = Self::rgb(0, 0, 0);
+    pub const WHITE: Self = Self::rgb(255, 255, 255);
+
+    pub const fn rgb(r: u8, g: u8, b: u8) -> Self {
+        Self { r, g, b, a: 255 }
+    }
+
+    pub const fn rgba(r: u8, g: u8, b: u8, a: u8) -> Self {
+        Self { r, g, b, a }
+    }
+
+    pub fn with_alpha(self, alpha: f32) -> Self {
+        Self {
+            a: (alpha.clamp(0.0, 1.0) * 255.0).round() as u8,
+            ..self
+        }
+    }
+
+    pub fn blend_over(self, background: Self) -> Self {
+        let alpha = self.a as f32 / 255.0;
+        let blend = |front: u8, back: u8| {
+            (front as f32 * alpha + back as f32 * (1.0 - alpha)).round() as u8
+        };
+        Self::rgb(
+            blend(self.r, background.r),
+            blend(self.g, background.g),
+            blend(self.b, background.b),
+        )
+    }
+
+    pub fn mix(self, other: Self, amount: f32) -> Self {
+        let amount = amount.clamp(0.0, 1.0);
+        let mix = |a: u8, b: u8| (a as f32 + (b as f32 - a as f32) * amount).round() as u8;
+        Self::rgba(
+            mix(self.r, other.r),
+            mix(self.g, other.g),
+            mix(self.b, other.b),
+            mix(self.a, other.a),
+        )
+    }
+
+    pub fn contrast(self, background: Self) -> f32 {
+        let foreground = if self.a == 255 {
+            self
+        } else {
+            self.blend_over(background)
+        };
+        let (a, b) = (foreground.luminance(), background.luminance());
+        (a.max(b) + 0.05) / (a.min(b) + 0.05)
+    }
+
+    pub fn best_on_color(self) -> Self {
+        // Dark surfaces carry white text even where black would contrast more.
+        if self.luminance() > 0.3 {
+            Self::BLACK
+        } else {
+            Self::WHITE
+        }
+    }
+
+    /// Move toward black or white until the requested contrast is met.
+    pub fn ensure_contrast(self, background: Self, minimum: f32) -> Self {
+        if self.contrast(background) >= minimum {
+            return self;
+        }
+        let target = if Self::BLACK.contrast(background) >= Self::WHITE.contrast(background) {
+            Self::BLACK
+        } else {
+            Self::WHITE
+        };
+        for step in 1..=20 {
+            let candidate = self.mix(target, step as f32 / 20.0);
+            if candidate.contrast(background) >= minimum {
+                return candidate;
+            }
+        }
+        target
+    }
+
+    fn luminance(self) -> f32 {
+        let linear = |channel: u8| {
+            let value = channel as f32 / 255.0;
+            if value <= 0.04045 {
+                value / 12.92
+            } else {
+                ((value + 0.055) / 1.055).powf(2.4)
+            }
+        };
+        0.2126 * linear(self.r) + 0.7152 * linear(self.g) + 0.0722 * linear(self.b)
+    }
+}
+
+impl fmt::Debug for Color {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}", self)
+    }
+}
+
+impl fmt::Display for Color {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        if self.a == 255 {
+            write!(f, "#{:02x}{:02x}{:02x}", self.r, self.g, self.b)
+        } else {
+            write!(
+                f,
+                "#{:02x}{:02x}{:02x}{:02x}",
+                self.r, self.g, self.b, self.a
+            )
+        }
+    }
+}
+
+impl FromStr for Color {
+    type Err = ColorParseError;
+
+    fn from_str(value: &str) -> Result<Self, Self::Err> {
+        let value = value.trim().strip_prefix('#').ok_or(ColorParseError)?;
+        let expand = |c: u8| (c << 4) | c;
+        let nibble = |c: u8| match c {
+            b'0'..=b'9' => Ok(c - b'0'),
+            b'a'..=b'f' => Ok(c - b'a' + 10),
+            b'A'..=b'F' => Ok(c - b'A' + 10),
+            _ => Err(ColorParseError),
+        };
+        let pair = |bytes: &[u8]| -> Result<u8, ColorParseError> {
+            Ok((nibble(bytes[0])? << 4) | nibble(bytes[1])?)
+        };
+        let bytes = value.as_bytes();
+        match bytes.len() {
+            3 => Ok(Self::rgb(
+                expand(nibble(bytes[0])?),
+                expand(nibble(bytes[1])?),
+                expand(nibble(bytes[2])?),
+            )),
+            4 => Ok(Self::rgba(
+                expand(nibble(bytes[0])?),
+                expand(nibble(bytes[1])?),
+                expand(nibble(bytes[2])?),
+                expand(nibble(bytes[3])?),
+            )),
+            6 => Ok(Self::rgb(
+                pair(&bytes[0..2])?,
+                pair(&bytes[2..4])?,
+                pair(&bytes[4..6])?,
+            )),
+            8 => Ok(Self::rgba(
+                pair(&bytes[0..2])?,
+                pair(&bytes[2..4])?,
+                pair(&bytes[4..6])?,
+                pair(&bytes[6..8])?,
+            )),
+            _ => Err(ColorParseError),
+        }
+    }
+}
+
+impl Serialize for Color {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(&self.to_string())
+    }
+}
+
+impl<'de> Deserialize<'de> for Color {
+    fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
+    where
+        D: Deserializer<'de>,
+    {
+        String::deserialize(deserializer)?
+            .parse()
+            .map_err(serde::de::Error::custom)
+    }
+}
+
+#[derive(Debug, Clone, Copy, thiserror::Error)]
+#[error("expected a CSS hex color (#rgb, #rgba, #rrggbb, or #rrggbbaa)")]
+pub struct ColorParseError;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub enum AccentPreset {
+    #[default]
+    #[serde(alias = "coop")]
+    Coop,
+    Orange,
+    Amber,
+    Green,
+    Cyan,
+    Blue,
+    Pink,
+}
+
+impl AccentPreset {
+    pub const ALL: [Self; 7] = [
+        Self::Coop,
+        Self::Orange,
+        Self::Amber,
+        Self::Green,
+        Self::Cyan,
+        Self::Blue,
+        Self::Pink,
+    ];
+
+    pub fn label(self) -> &'static str {
+        match self {
+            Self::Coop => "Coop",
+            Self::Orange => "Orange",
+            Self::Amber => "Amber",
+            Self::Green => "Green",
+            Self::Cyan => "Cyan",
+            Self::Blue => "Blue",
+            Self::Pink => "Pink",
+        }
+    }
+
+    pub fn color(self, appearance: Appearance) -> Color {
+        let (dark, light) = match self {
+            Self::Coop => ("#FFE629", "#FFE629"),
+            Self::Orange => ("#fb923c", "#c2410c"),
+            Self::Amber => ("#fbbf24", "#a16207"),
+            Self::Green => ("#4ade80", "#15803d"),
+            Self::Cyan => ("#22d3ee", "#0e7490"),
+            Self::Blue => ("#60a5fa", "#2563eb"),
+            Self::Pink => ("#f472b6", "#be185d"),
+        };
+        if appearance.is_dark() { dark } else { light }
+            .parse()
+            .expect("built-in accent colors are valid")
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub enum AccentSelection {
+    #[default]
+    ThemeDefault,
+    Preset(AccentPreset),
+}
+
+impl AccentSelection {
+    pub fn label(self) -> &'static str {
+        match self {
+            Self::ThemeDefault => "Theme default",
+            Self::Preset(preset) => preset.label(),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+pub struct AccentRoles {
+    pub primary: Color,
+    pub strong: Color,
+    pub wash: Color,
+    pub on: Color,
+    pub selection: Color,
+    pub caret: Color,
+    pub activity: Color,
+    pub glyph: [Color; 3],
+}
+
+impl AccentRoles {
+    pub fn derive(primary: Color, appearance: Appearance, background: Color) -> Self {
+        // Light mode keeps the raw brand accent for fills; `strong` backs strokes at 3:1.
+        let (primary, mut strong) = if appearance.is_dark() {
+            let primary = primary.ensure_contrast(background, 3.0);
+            (primary, primary)
+        } else {
+            (primary, primary.ensure_contrast(background, 3.0))
+        };
+        let on = primary.best_on_color();
+        // 3:1 pairing so white-on-dark accents don't force the fill darker.
+        if on.contrast(strong) < 3.0 {
+            strong = strong.ensure_contrast(on, 3.0);
+        }
+        let light = primary.mix(
+            if appearance.is_dark() {
+                Color::WHITE
+            } else {
+                background
+            },
+            if appearance.is_dark() { 0.28 } else { 0.18 },
+        );
+        let deep = primary.mix(Color::BLACK, if appearance.is_dark() { 0.18 } else { 0.26 });
+        Self {
+            primary,
+            strong,
+            wash: primary.with_alpha(if appearance.is_dark() { 0.22 } else { 0.12 }),
+            on,
+            selection: primary.with_alpha(if appearance.is_dark() { 0.35 } else { 0.24 }),
+            caret: primary,
+            activity: primary,
+            glyph: [light, primary, deep],
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ThemeSelection {
+    pub light: String,
+    pub dark: String,
+}
+
+impl Default for ThemeSelection {
+    fn default() -> Self {
+        Self {
+            light: "coop-light".into(),
+            dark: "coop-dark".into(),
+        }
+    }
+}
+
+impl ThemeSelection {
+    pub fn variant_id(&self, appearance: Appearance) -> &str {
+        if appearance.is_dark() {
+            &self.dark
+        } else {
+            &self.light
+        }
+    }
+
+    pub fn set_variant(&mut self, appearance: Appearance, id: impl Into<String>) {
+        if appearance.is_dark() {
+            self.dark = id.into();
+        } else {
+            self.light = id.into();
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ThemeSource {
+    pub format: String,
+    pub url: String,
+    pub revision: String,
+    pub license: String,
+    pub asset_hash: String,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ThemeColors {
+    pub background: Color,
+    pub shell: Color,
+    pub raised: Color,
+    pub card: Color,
+    pub dialog: Color,
+    pub overlay: Color,
+    pub hover: Color,
+    pub active: Color,
+    pub border: Color,
+    pub border_strong: Color,
+    pub text: Color,
+    pub text_muted: Color,
+    pub text_faint: Color,
+    pub solid: Color,
+    pub on_solid: Color,
+    pub danger: Color,
+    pub danger_muted: Color,
+    pub warning: Color,
+    pub warning_muted: Color,
+    pub success: Color,
+    pub success_muted: Color,
+    pub input: Color,
+    pub cursor: Color,
+    pub diff_add: Color,
+    pub diff_delete: Color,
+    pub diff_hunk: Color,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct TerminalPalette {
+    pub background: Color,
+    pub foreground: Color,
+    pub selection: Color,
+    pub ansi: [Color; 16],
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ThemeVariant {
+    pub id: String,
+    pub family_id: String,
+    pub name: String,
+    pub appearance: Appearance,
+    #[serde(alias = "surfaceTreatment")]
+    pub recommended_surface_treatment: SurfaceTreatment,
+    pub colors: ThemeColors,
+    pub accent: AccentRoles,
+    pub syntax: BTreeMap<String, Color>,
+    pub terminal: TerminalPalette,
+    pub source: ThemeSource,
+}
+
+impl ThemeVariant {
+    pub fn accent_for(&self, selection: AccentSelection) -> AccentRoles {
+        match selection {
+            AccentSelection::ThemeDefault => self.accent,
+            AccentSelection::Preset(preset) => AccentRoles::derive(
+                preset.color(self.appearance),
+                self.appearance,
+                self.colors.background,
+            ),
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ThemeFamily {
+    pub id: String,
+    pub name: String,
+    pub variants: Vec<ThemeVariant>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct ThemeRegistry {
+    pub families: Vec<ThemeFamily>,
+}
+
+impl ThemeRegistry {
+    pub fn builtin() -> &'static Self {
+        builtin_registry()
+    }
+
+    pub fn variant(&self, id: &str) -> Option<&ThemeVariant> {
+        self.families
+            .iter()
+            .flat_map(|family| &family.variants)
+            .find(|variant| variant.id == id)
+    }
+
+    pub fn resolve(&self, selection: &ThemeSelection, appearance: Appearance) -> &ThemeVariant {
+        self.variant(selection.variant_id(appearance))
+            .or_else(|| {
+                self.variant(if appearance.is_dark() {
+                    "coop-dark"
+                } else {
+                    "coop-light"
+                })
+            })
+            .expect("the built-in registry always contains both Coop variants")
+    }
+
+    pub fn validate(&self) -> Vec<ValidationIssue> {
+        let mut issues = Vec::new();
+        let mut ids = HashSet::new();
+        for family in &self.families {
+            for variant in &family.variants {
+                if variant.id.trim().is_empty() || !ids.insert(&variant.id) {
+                    issues.push(ValidationIssue::structural_error(
+                        &variant.id,
+                        "variant id must be unique",
+                    ));
+                }
+                validate_contrast(
+                    &mut issues,
+                    variant,
+                    "text",
+                    variant.colors.text,
+                    variant.colors.background,
+                    4.5,
+                );
+                validate_contrast(
+                    &mut issues,
+                    variant,
+                    "muted text",
+                    variant.colors.text_muted,
+                    variant.colors.background,
+                    4.5,
+                );
+                validate_contrast(
+                    &mut issues,
+                    variant,
+                    "accent-strong",
+                    variant.accent.strong,
+                    variant.colors.background,
+                    3.0,
+                );
+                validate_contrast(
+                    &mut issues,
+                    variant,
+                    "on-accent",
+                    variant.accent.on,
+                    variant.accent.strong,
+                    3.0,
+                );
+                validate_contrast(
+                    &mut issues,
+                    variant,
+                    "terminal foreground",
+                    variant.terminal.foreground,
+                    variant.terminal.background,
+                    4.5,
+                );
+                if variant.source.url.is_empty()
+                    || variant.source.revision.is_empty()
+                    || variant.source.license.is_empty()
+                    || variant.source.asset_hash.is_empty()
+                {
+                    issues.push(ValidationIssue::structural_error(
+                        &variant.id,
+                        "source provenance is incomplete",
+                    ));
+                }
+                for (index, color) in variant.terminal.ansi.iter().enumerate() {
+                    // Slots 0 and 8 are structural black/dim colors.
+                    if index % 8 == 0 {
+                        continue;
+                    }
+                    if color.contrast(variant.terminal.background) < 3.0 {
+                        issues.push(ValidationIssue::contrast_warning(
+                            &variant.id,
+                            format!("terminal ANSI slot {index} is below 3:1"),
+                        ));
+                    }
+                }
+            }
+        }
+        issues
+    }
+}
+
+fn validate_contrast(
+    issues: &mut Vec<ValidationIssue>,
+    variant: &ThemeVariant,
+    role: &str,
+    foreground: Color,
+    background: Color,
+    minimum: f32,
+) {
+    let actual = foreground.contrast(background);
+    if actual < minimum {
+        issues.push(ValidationIssue::contrast_error(
+            &variant.id,
+            format!("{role} contrast is {actual:.2}:1; expected {minimum:.1}:1"),
+        ));
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum ValidationSeverity {
+    Warning,
+    Error,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum ValidationCategory {
+    Structural,
+    Contrast,
+}
+
+#[derive(Debug, Clone)]
+pub struct ValidationIssue {
+    pub variant_id: String,
+    pub category: ValidationCategory,
+    pub severity: ValidationSeverity,
+    pub message: String,
+}
+
+impl ValidationIssue {
+    fn structural_error(variant_id: &str, message: impl Into<String>) -> Self {
+        Self {
+            variant_id: variant_id.into(),
+            category: ValidationCategory::Structural,
+            severity: ValidationSeverity::Error,
+            message: message.into(),
+        }
+    }
+
+    fn contrast_error(variant_id: &str, message: impl Into<String>) -> Self {
+        Self {
+            variant_id: variant_id.into(),
+            category: ValidationCategory::Contrast,
+            severity: ValidationSeverity::Error,
+            message: message.into(),
+        }
+    }
+
+    fn contrast_warning(variant_id: &str, message: impl Into<String>) -> Self {
+        Self {
+            variant_id: variant_id.into(),
+            category: ValidationCategory::Contrast,
+            severity: ValidationSeverity::Warning,
+            message: message.into(),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn colors_round_trip_all_supported_css_hex_lengths() {
+        for source in ["#abc", "#abcd", "#102030", "#10203040"] {
+            let color: Color = source.parse().unwrap();
+            let json = serde_json::to_string(&color).unwrap();
+            assert_eq!(serde_json::from_str::<Color>(&json).unwrap(), color);
+        }
+    }
+
+    #[test]
+    fn accent_overlay_meets_interaction_contrast() {
+        for appearance in [Appearance::Light, Appearance::Dark] {
+            let background = if appearance.is_dark() {
+                Color::rgb(6, 6, 6)
+            } else {
+                Color::WHITE
+            };
+            for preset in AccentPreset::ALL {
+                let roles = AccentRoles::derive(preset.color(appearance), appearance, background);
+                assert!(
+                    roles.strong.contrast(background) >= 3.0,
+                    "{appearance:?} {preset:?}"
+                );
+                assert!(
+                    roles.on.contrast(roles.strong) >= 3.0,
+                    "{appearance:?} {preset:?}"
+                );
+            }
+        }
+    }
+
+    #[test]
+    fn surface_preference_resolves_independently_from_theme_recommendation() {
+        assert_eq!(
+            SurfacePreference::ThemeDefault.resolve(SurfaceTreatment::Frosted),
+            SurfaceTreatment::Frosted
+        );
+        assert_eq!(
+            SurfacePreference::ThemeDefault.resolve(SurfaceTreatment::Opaque),
+            SurfaceTreatment::Opaque
+        );
+        for recommended in [SurfaceTreatment::Frosted, SurfaceTreatment::Opaque] {
+            assert_eq!(
+                SurfacePreference::Frosted.resolve(recommended),
+                SurfaceTreatment::Frosted
+            );
+            assert_eq!(
+                SurfacePreference::Opaque.resolve(recommended),
+                SurfaceTreatment::Opaque
+            );
+        }
+    }
+
+    #[test]
+    fn builtins_have_complete_provenance_and_no_validation_errors() {
+        let registry = ThemeRegistry::builtin();
+        assert_eq!(registry.families.len(), 19);
+        assert_eq!(
+            registry
+                .families
+                .iter()
+                .map(|family| family.variants.len())
+                .sum::<usize>(),
+            30
+        );
+        assert!(registry.variant("coop-light").is_some());
+        assert!(registry.variant("coop-dark").is_some());
+        let errors: Vec<_> = registry
+            .validate()
+            .into_iter()
+            .filter(|issue| issue.severity == ValidationSeverity::Error)
+            .collect();
+        assert!(errors.is_empty(), "{errors:#?}");
+    }
+}
@@ -2,14 +2,10 @@ use gpui::{Anchor, Pixels, px};

 use crate::{Edges, TITLEBAR_HEIGHT};

-/// The settings for notifications.
 #[derive(Debug, Clone)]
 pub struct NotificationSettings {
-    /// The placement of the notification, default: [`Anchor::TopRight`]
    pub placement: Anchor,
-    /// The margins of the notification with respect to the window edges.
    pub margins: Edges<Pixels>,
-    /// The maximum number of notifications to show at once, default: 10
    pub max_items: usize,
 }

@@ -1,70 +0,0 @@
-use std::collections::HashMap;
-use std::rc::Rc;
-use std::sync::Arc;
-
-use anyhow::{Context as AnyhowContext, Error};
-use gpui::{App, AppContext, AssetSource, Context, Entity, Global, SharedString};
-
-use crate::ThemeFamily;
-
-pub fn init(cx: &mut App) {
-    ThemeRegistry::set_global(cx.new(ThemeRegistry::new), cx);
-}
-
-struct GlobalThemeRegistry(Entity<ThemeRegistry>);
-
-impl Global for GlobalThemeRegistry {}
-
-pub struct ThemeRegistry {
-    /// Map of theme names to theme families
-    themes: HashMap<SharedString, Rc<ThemeFamily>>,
-}
-
-impl ThemeRegistry {
-    /// Retrieve the global theme registry state
-    pub fn global(cx: &App) -> Entity<Self> {
-        cx.global::<GlobalThemeRegistry>().0.clone()
-    }
-
-    /// Set the global theme registry instance
-    pub(crate) fn set_global(state: Entity<Self>, cx: &mut App) {
-        cx.set_global(GlobalThemeRegistry(state));
-    }
-
-    /// Create a new theme registry instance
-    pub(crate) fn new(cx: &mut Context<Self>) -> Self {
-        let mut themes = HashMap::new();
-        let asset = cx.asset_source();
-
-        if let Ok(paths) = asset.list("themes") {
-            for path in paths.into_iter() {
-                match Self::load(&path, asset) {
-                    Ok(theme) => {
-                        themes.insert(path, Rc::new(theme));
-                    }
-                    Err(e) => {
-                        log::error!("Failed to load theme: {path}. Error: {e}");
-                    }
-                }
-            }
-        }
-
-        Self { themes }
-    }
-
-    /// Load a theme from the asset source.
-    fn load(path: &str, asset: &Arc<dyn AssetSource>) -> Result<ThemeFamily, Error> {
-        // Load the theme file from the assets
-        let content = asset.load(path)?.context("Theme not found")?;
-
-        // Parse the JSON content into a Theme Family struct
-        let theme: ThemeFamily = serde_json::from_slice(&content)?;
-
-        Ok(theme)
-    }
-
-    /// Returns a reference to the map of themes.
-    pub fn themes(&self) -> &HashMap<SharedString, Rc<ThemeFamily>> {
-        &self.themes
-    }
-}
@@ -0,0 +1,113 @@
+use gpui::Hsla;
+
+use crate::model::{AccentRoles, Color, ThemeColors, ThemeVariant};
+
+fn hsla(color: Color) -> Hsla {
+    let packed = ((color.r as u32) << 24)
+        | ((color.g as u32) << 16)
+        | ((color.b as u32) << 8)
+        | color.a as u32;
+    Hsla::from(gpui::rgba(packed))
+}
+
+/// Accent roles resolved to [`Hsla`], with derived interaction states precomputed.
+#[derive(Debug, Clone, Copy)]
+pub struct ResolvedAccentRoles {
+    pub primary: Hsla,
+    /// Accent for strokes, icons, and text on the background; meets 3:1 contrast.
+    pub strong: Hsla,
+    pub wash: Hsla,
+    pub on: Hsla,
+    pub selection: Hsla,
+    pub hover: Hsla,
+    pub active: Hsla,
+    pub selected: Hsla,
+    /// Text guaranteed 4.5:1 readable on `wash`.
+    pub text_on_wash: Hsla,
+    /// Text guaranteed readable on the flat `danger` color.
+    pub on_danger: Hsla,
+}
+
+impl ResolvedAccentRoles {
+    pub fn resolve(accent: &AccentRoles, colors: &ThemeColors) -> Self {
+        let background = colors.background;
+        let wash_background = accent.wash.blend_over(background);
+        Self {
+            primary: hsla(accent.primary),
+            strong: hsla(accent.strong),
+            wash: hsla(accent.wash),
+            on: hsla(accent.on),
+            selection: hsla(accent.selection),
+            hover: hsla(accent.primary.mix(background, 0.12)),
+            active: hsla(accent.primary.mix(background, 0.2)),
+            selected: hsla(accent.primary.mix(background, 0.28)),
+            text_on_wash: hsla(accent.primary.ensure_contrast(wash_background, 4.5)),
+            on_danger: hsla(colors.danger.best_on_color()),
+        }
+    }
+}
+
+/// The `Hsla` snapshot components render from, rebuilt on every theme change.
+#[derive(Debug, Clone, Copy)]
+pub struct ResolvedColors {
+    pub background: Hsla,
+    pub shell: Hsla,
+    pub raised: Hsla,
+    pub card: Hsla,
+    pub dialog: Hsla,
+    pub overlay: Hsla,
+    pub hover: Hsla,
+    pub active: Hsla,
+    pub border: Hsla,
+    pub border_strong: Hsla,
+    pub text: Hsla,
+    pub text_muted: Hsla,
+    pub text_faint: Hsla,
+    pub solid: Hsla,
+    pub on_solid: Hsla,
+    pub danger: Hsla,
+    pub danger_muted: Hsla,
+    pub warning: Hsla,
+    pub warning_muted: Hsla,
+    pub success: Hsla,
+    pub success_muted: Hsla,
+    pub input: Hsla,
+    pub cursor: Hsla,
+    pub diff_add: Hsla,
+    pub diff_delete: Hsla,
+    pub diff_hunk: Hsla,
+}
+
+impl ResolvedColors {
+    pub fn resolve(variant: &ThemeVariant) -> Self {
+        let colors = &variant.colors;
+        Self {
+            background: hsla(colors.background),
+            shell: hsla(colors.shell),
+            raised: hsla(colors.raised),
+            card: hsla(colors.card),
+            dialog: hsla(colors.dialog),
+            overlay: hsla(colors.overlay),
+            hover: hsla(colors.hover),
+            active: hsla(colors.active),
+            border: hsla(colors.border),
+            border_strong: hsla(colors.border_strong),
+            text: hsla(colors.text),
+            text_muted: hsla(colors.text_muted),
+            text_faint: hsla(colors.text_faint),
+            solid: hsla(colors.solid),
+            on_solid: hsla(colors.on_solid),
+            danger: hsla(colors.danger),
+            danger_muted: hsla(colors.danger_muted),
+            warning: hsla(colors.warning),
+            warning_muted: hsla(colors.warning_muted),
+            success: hsla(colors.success),
+            success_muted: hsla(colors.success_muted),
+            input: hsla(colors.input),
+            cursor: hsla(colors.cursor),
+            diff_add: hsla(colors.diff_add),
+            diff_delete: hsla(colors.diff_delete),
+            diff_hunk: hsla(colors.diff_hunk),
+        }
+    }
+}
@@ -0,0 +1,156 @@
+use std::ops::Deref;
+use std::sync::Arc;
+
+use gpui::{App, Global, Pixels, SharedString, Window, px};
+
+use crate::model::{
+    AccentSelection, Appearance, SurfacePreference, SurfaceTreatment, ThemeRegistry,
+    ThemeSelection, ThemeVariant,
+};
+use crate::resolved::{ResolvedAccentRoles, ResolvedColors};
+use crate::{NotificationSettings, PlatformKind, ScrollbarMode, sync_base};
+
+#[derive(Debug, Clone)]
+pub struct Theme {
+    pub variant: Arc<ThemeVariant>,
+    pub appearance: Appearance,
+    /// Named `theme_selection` to avoid shadowing the `selection` color role via `Deref`.
+    pub theme_selection: ThemeSelection,
+    pub accent_selection: AccentSelection,
+    pub surface_preference: SurfacePreference,
+    pub surface: SurfaceTreatment,
+    pub accent: ResolvedAccentRoles,
+    pub colors: ResolvedColors,
+    pub font_family: SharedString,
+    pub font_size: Pixels,
+    pub radius: Pixels,
+    pub radius_lg: Pixels,
+    pub shadow: bool,
+    pub scrollbar_mode: ScrollbarMode,
+    pub notification: NotificationSettings,
+}
+
+impl Deref for Theme {
+    type Target = ResolvedColors;
+
+    fn deref(&self) -> &Self::Target {
+        &self.colors
+    }
+}
+
+impl Global for Theme {}
+
+impl Theme {
+    pub fn global(cx: &App) -> &Theme {
+        cx.global::<Theme>()
+    }
+
+    pub(crate) fn global_mut(cx: &mut App) -> &mut Theme {
+        cx.global_mut::<Theme>()
+    }
+
+    pub fn is_dark(&self) -> bool {
+        self.appearance.is_dark()
+    }
+
+    fn new() -> Self {
+        let appearance = Appearance::default();
+        let selection = ThemeSelection::default();
+
+        let font_family = match PlatformKind::platform() {
+            PlatformKind::Linux => "Inter",
+            _ => ".SystemUIFont",
+        };
+
+        let variant = ThemeRegistry::builtin()
+            .resolve(&selection, appearance)
+            .clone();
+
+        let accent = variant.accent_for(AccentSelection::default());
+        let surface = SurfacePreference::default().resolve(variant.recommended_surface_treatment);
+        let resolved_accent = ResolvedAccentRoles::resolve(&accent, &variant.colors);
+        let colors = ResolvedColors::resolve(&variant);
+
+        Self {
+            variant: Arc::new(variant),
+            appearance,
+            theme_selection: selection,
+            accent_selection: AccentSelection::default(),
+            surface_preference: SurfacePreference::default(),
+            surface,
+            accent: resolved_accent,
+            colors,
+            font_family: font_family.into(),
+            font_size: px(15.),
+            radius: px(6.),
+            radius_lg: px(10.),
+            shadow: true,
+            scrollbar_mode: ScrollbarMode::default(),
+            notification: NotificationSettings::default(),
+        }
+    }
+
+    pub fn sync_scrollbar_appearance(cx: &mut App) {
+        Theme::global_mut(cx).scrollbar_mode = if cx.should_auto_hide_scrollbars() {
+            ScrollbarMode::Scrolling
+        } else {
+            ScrollbarMode::Hover
+        };
+    }
+
+    pub fn set_selection(selection: ThemeSelection, cx: &mut App) {
+        Theme::global_mut(cx).theme_selection = selection;
+    }
+
+    pub fn set_accent_selection(selection: AccentSelection, cx: &mut App) {
+        Theme::global_mut(cx).accent_selection = selection;
+    }
+
+    pub fn set_surface_preference(preference: SurfacePreference, cx: &mut App) {
+        Theme::global_mut(cx).surface_preference = preference;
+    }
+
+    /// Switch appearance and re-resolve the selected variant, accent, and surface.
+    pub fn change<M>(appearance: M, window: Option<&mut Window>, cx: &mut App)
+    where
+        M: Into<Appearance>,
+    {
+        if !cx.has_global::<Theme>() {
+            cx.set_global(Theme::new());
+        }
+
+        let appearance = appearance.into();
+
+        let (selection, accent_selection, surface_preference) = {
+            let theme = cx.global_mut::<Theme>();
+            theme.appearance = appearance;
+            (
+                theme.theme_selection.clone(),
+                theme.accent_selection,
+                theme.surface_preference,
+            )
+        };
+
+        let variant = ThemeRegistry::builtin()
+            .resolve(&selection, appearance)
+            .clone();
+
+        let accent = variant.accent_for(accent_selection);
+        let surface = surface_preference.resolve(variant.recommended_surface_treatment);
+        let colors = ResolvedColors::resolve(&variant);
+
+        {
+            let theme = cx.global_mut::<Theme>();
+            theme.variant = Arc::new(variant.clone());
+            theme.accent = ResolvedAccentRoles::resolve(&accent, &variant.colors);
+            theme.surface = surface;
+            theme.colors = colors;
+        }
+
+        if let Some(window) = window {
+            window.refresh();
+        }
+
+        sync_base(cx);
+    }
+}
@@ -1,177 +0,0 @@
-use gpui::Hsla;
-
-/// A collection of colors that are used to style the UI.
-///
-/// Each step has a semantic meaning, and is used to style different parts of the UI.
-#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy)]
-pub struct ColorScaleStep(usize);
-
-impl ColorScaleStep {
-    pub const EIGHT: Self = Self(8);
-    pub const ELEVEN: Self = Self(11);
-    pub const FIVE: Self = Self(5);
-    pub const FOUR: Self = Self(4);
-    pub const NINE: Self = Self(9);
-    pub const ONE: Self = Self(1);
-    pub const SEVEN: Self = Self(7);
-    pub const SIX: Self = Self(6);
-    pub const TEN: Self = Self(10);
-    pub const THREE: Self = Self(3);
-    pub const TWELVE: Self = Self(12);
-    pub const TWO: Self = Self(2);
-}
-
-/// A scale of colors for a given [`ColorScaleSet`].
-///
-/// Each [`ColorScale`] contains exactly 12 colors. Refer to
-/// [`ColorScaleStep`] for a reference of what each step is used for.
-pub struct ColorScale(Vec<Hsla>);
-
-impl FromIterator<Hsla> for ColorScale {
-    fn from_iter<T: IntoIterator<Item = Hsla>>(iter: T) -> Self {
-        Self(Vec::from_iter(iter))
-    }
-}
-
-impl ColorScale {
-    /// Returns the specified step in the [`ColorScale`].
-    #[inline]
-    pub fn step(&self, step: ColorScaleStep) -> Hsla {
-        // Steps are one-based, so we need convert to the zero-based vec index.
-        self.0[step.0 - 1]
-    }
-
-    /// `Step 1` - Used for main application backgrounds.
-    ///
-    /// This step provides a neutral base for any overlaying components, ideal for applications' main backdrop or empty spaces such as canvas areas.
-    ///
-    #[inline]
-    pub fn step_1(&self) -> Hsla {
-        self.step(ColorScaleStep::ONE)
-    }
-
-    /// `Step 2` - Used for both main application backgrounds and subtle component backgrounds.
-    ///
-    /// Like `Step 1`, this step allows variations in background styles, from striped tables, sidebar backgrounds, to card backgrounds.
-    #[inline]
-    pub fn step_2(&self) -> Hsla {
-        self.step(ColorScaleStep::TWO)
-    }
-
-    /// `Step 3` - Used for UI component backgrounds in their normal states.
-    ///
-    /// This step maintains accessibility by guaranteeing a contrast ratio of 4.5:1 with steps 11 and 12 for text. It could also suit hover states for transparent components.
-    #[inline]
-    pub fn step_3(&self) -> Hsla {
-        self.step(ColorScaleStep::THREE)
-    }
-
-    /// `Step 4` - Used for UI component backgrounds in their hover states.
-    ///
-    /// Also suited for pressed or selected states of components with a transparent background.
-    #[inline]
-    pub fn step_4(&self) -> Hsla {
-        self.step(ColorScaleStep::FOUR)
-    }
-
-    /// `Step 5` - Used for UI component backgrounds in their pressed or selected states.
-    #[inline]
-    pub fn step_5(&self) -> Hsla {
-        self.step(ColorScaleStep::FIVE)
-    }
-
-    /// `Step 6` - Used for subtle borders on non-interactive components.
-    ///
-    /// Its usage spans from sidebars' borders, headers' dividers, cards' outlines, to alerts' edges and separators.
-    #[inline]
-    pub fn step_6(&self) -> Hsla {
-        self.step(ColorScaleStep::SIX)
-    }
-
-    /// `Step 7` - Used for subtle borders on interactive components.
-    ///
-    /// This step subtly delineates the boundary of elements users interact with.
-    #[inline]
-    pub fn step_7(&self) -> Hsla {
-        self.step(ColorScaleStep::SEVEN)
-    }
-
-    /// `Step 8` - Used for stronger borders on interactive components and focus rings.
-    ///
-    /// It strengthens the visibility and accessibility of active elements and their focus states.
-    #[inline]
-    pub fn step_8(&self) -> Hsla {
-        self.step(ColorScaleStep::EIGHT)
-    }
-
-    /// `Step 9` - Used for solid backgrounds.
-    ///
-    /// `Step 9` is the most saturated step, having the least mix of white or black.
-    ///
-    /// Due to its high chroma, `Step 9` is versatile and particularly useful for semantic colors such as
-    /// error, warning, and success indicators.
-    #[inline]
-    pub fn step_9(&self) -> Hsla {
-        self.step(ColorScaleStep::NINE)
-    }
-
-    /// `Step 10` - Used for hovered or active solid backgrounds, particularly when `Step 9` is their normal state.
-    ///
-    /// May also be used for extremely low contrast text. This should be used sparingly, as it may be difficult to read.
-    #[inline]
-    pub fn step_10(&self) -> Hsla {
-        self.step(ColorScaleStep::TEN)
-    }
-
-    /// `Step 11` - Used for text and icons requiring low contrast or less emphasis.
-    #[inline]
-    pub fn step_11(&self) -> Hsla {
-        self.step(ColorScaleStep::ELEVEN)
-    }
-
-    /// `Step 12` - Used for text and icons requiring high contrast or prominence.
-    #[inline]
-    pub fn step_12(&self) -> Hsla {
-        self.step(ColorScaleStep::TWELVE)
-    }
-}
-
-/// Provides groups of [`ColorScale`]s for light and dark themes, as well as transparent versions of each scale.
-pub struct ColorScaleSet {
-    light: ColorScale,
-    dark: ColorScale,
-    light_alpha: ColorScale,
-    dark_alpha: ColorScale,
-}
-
-impl ColorScaleSet {
-    pub(crate) fn new(
-        light: ColorScale,
-        light_alpha: ColorScale,
-        dark: ColorScale,
-        dark_alpha: ColorScale,
-    ) -> Self {
-        Self {
-            light,
-            light_alpha,
-            dark,
-            dark_alpha,
-        }
-    }
-
-    pub(crate) fn light(&self) -> &ColorScale {
-        &self.light
-    }
-
-    pub(crate) fn light_alpha(&self) -> &ColorScale {
-        &self.light_alpha
-    }
-
-    pub(crate) fn dark(&self) -> &ColorScale {
-        &self.dark
-    }
-
-    pub(crate) fn dark_alpha(&self) -> &ColorScale {
-        &self.dark_alpha
-    }
-}
@@ -1,7 +1,6 @@
-use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};

-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, Serialize, Deserialize, JsonSchema)]
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, Serialize, Deserialize)]
 pub enum ScrollbarMode {
    #[default]
    Scrolling,
@@ -1,359 +0,0 @@
-use std::path::Path;
-
-use gpui::{SharedString, WindowAppearance};
-use schemars::JsonSchema;
-use serde::{Deserialize, Serialize};
-
-use crate::ThemeColors;
-
-#[derive(Debug, Clone, Copy, Default, PartialEq, PartialOrd, Eq, Hash, Deserialize, Serialize)]
-pub enum ThemeMode {
-    #[default]
-    Light,
-    Dark,
-}
-
-impl ThemeMode {
-    pub fn is_dark(&self) -> bool {
-        matches!(self, Self::Dark)
-    }
-
-    /// Return theme name: `light`, `dark`.
-    pub fn name(&self) -> &'static str {
-        match self {
-            ThemeMode::Light => "Light",
-            ThemeMode::Dark => "Dark",
-        }
-    }
-}
-
-impl From<WindowAppearance> for ThemeMode {
-    fn from(appearance: WindowAppearance) -> Self {
-        match appearance {
-            WindowAppearance::Dark | WindowAppearance::VibrantDark => Self::Dark,
-            WindowAppearance::Light | WindowAppearance::VibrantLight => Self::Light,
-        }
-    }
-}
-
-/// Theme family
-#[derive(Clone, Debug, PartialEq, Deserialize, Serialize, JsonSchema)]
-pub struct ThemeFamily {
-    /// The unique identifier for the theme.
-    pub id: String,
-
-    /// The name of the theme.
-    pub name: SharedString,
-
-    /// The author of the theme.
-    pub author: SharedString,
-
-    /// The URL of the theme.
-    pub url: String,
-
-    /// The light colors for the theme.
-    pub light: ThemeColors,
-
-    /// The dark colors for the theme.
-    pub dark: ThemeColors,
-}
-
-impl Default for ThemeFamily {
-    fn default() -> Self {
-        ThemeFamily {
-            id: "coop".into(),
-            name: "Coop Default Theme".into(),
-            author: "Coop".into(),
-            url: "https://github.com/reyakov/coop".into(),
-            light: ThemeColors::light(),
-            dark: ThemeColors::dark(),
-        }
-    }
-}
-
-impl ThemeFamily {
-    /// Returns the light colors for the theme.
-    #[inline(always)]
-    pub fn light(&self) -> &ThemeColors {
-        &self.light
-    }
-
-    /// Returns the dark colors for the theme.
-    #[inline(always)]
-    pub fn dark(&self) -> &ThemeColors {
-        &self.dark
-    }
-
-    /// Load a theme family from a JSON file.
-    ///
-    /// # Arguments
-    ///
-    /// * `path` - Path to the JSON file containing the theme family. This can be
-    ///   an absolute path or a path relative to the current working directory.
-    ///
-    /// # Returns
-    ///
-    /// Returns `Ok(ThemeFamily)` if the file was successfully loaded and parsed,
-    /// or `Err(anyhow::Error)` if there was an error reading or parsing the file.
-    ///
-    /// # Errors
-    ///
-    /// This function will return an error if:
-    /// - The file cannot be read (permission issues, file doesn't exist, etc.)
-    /// - The file contains invalid JSON
-    /// - The JSON structure doesn't match the `ThemeFamily` schema
-    ///
-    /// # Example
-    ///
-    /// ```no_run
-    /// use theme::ThemeFamily;
-    ///
-    /// # fn main() -> anyhow::Result<()> {
-    /// // Load from a relative path
-    /// let theme = ThemeFamily::from_file("assets/themes/my-theme.json")?;
-    ///
-    /// // Load from an absolute path
-    /// let theme = ThemeFamily::from_file("/path/to/themes/my-theme.json")?;
-    /// # Ok(())
-    /// # }
-    /// ```
-    pub(crate) fn from_file<P: AsRef<Path>>(path: P) -> anyhow::Result<Self> {
-        let json_data = std::fs::read(path)?;
-        let theme_family = serde_json::from_slice(&json_data)?;
-
-        Ok(theme_family)
-    }
-
-    /// Load a theme family from a JSON file in the assets/themes directory.
-    ///
-    /// This function looks for the file at `assets/themes/{name}.json` relative
-    /// to the current working directory. This is useful for loading themes
-    /// from the standard theme directory in the project structure.
-    ///
-    /// # Arguments
-    ///
-    /// * `name` - Name of the theme file (without the .json extension)
-    ///
-    /// # Returns
-    ///
-    /// Returns `Ok(ThemeFamily)` if the file was successfully loaded and parsed,
-    /// or `Err(anyhow::Error)` if there was an error reading or parsing the file.
-    ///
-    /// # Errors
-    ///
-    /// This function will return an error if:
-    /// - The file cannot be read (permission issues, file doesn't exist, etc.)
-    /// - The file contains invalid JSON
-    /// - The JSON structure doesn't match the `ThemeFamily` schema
-    ///
-    /// # Example
-    ///
-    /// ```no_run
-    /// use theme::ThemeFamily;
-    ///
-    /// # fn main() -> anyhow::Result<()> {
-    /// // Assuming the file exists at `assets/themes/my-theme.json`
-    /// let theme = ThemeFamily::from_assets("themes/my-theme.json")?;
-    ///
-    /// println!("Loaded theme: {}", theme.name);
-    /// # Ok(())
-    /// # }
-    /// ```
-    pub fn from_assets(target: &str) -> anyhow::Result<Self> {
-        let path = format!("assets/{target}");
-        Self::from_file(path)
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use std::fs;
-
-    use tempfile::tempdir;
-
-    use super::*;
-
-    #[test]
-    fn test_from_file() {
-        // Create a temporary directory for our test
-        let dir = tempdir().unwrap();
-        let file_path = dir.path().join("test-theme.json");
-
-        // Create a minimal valid theme JSON with hex colors
-        // Using simple hex colors that Hsla can parse
-        // Note: We need to escape the # characters in the raw string
-        let json_data = r##"{
-            "id": "test-theme",
-            "name": "Test Theme",
-            "author": "Coop",
-            "url": "https://github.com/reyakov/coop",
-            "light": {
-                "background": "#ffffff",
-                "surface_background": "#fafafa",
-                "elevated_surface_background": "#f5f5f5",
-                "panel_background": "#ffffff",
-                "overlay": "#0000001a",
-                "title_bar": "#00000000",
-                "title_bar_inactive": "#ffffff",
-                "window_border": "#c7c7cf",
-                "border": "#dbdbdb",
-                "border_variant": "#d1d1d1",
-                "border_focused": "#3366cc",
-                "border_selected": "#3366cc",
-                "border_transparent": "#00000000",
-                "border_disabled": "#e6e6e6",
-                "ring": "#4d79d6",
-                "text": "#1a1a1a",
-                "text_muted": "#4d4d4d",
-                "text_placeholder": "#808080",
-                "text_accent": "#3366cc",
-                "icon": "#4d4d4d",
-                "icon_muted": "#808080",
-                "icon_accent": "#3366cc",
-                "element_foreground": "#ffffff",
-                "element_background": "#3366cc",
-                "element_hover": "#3366cce6",
-                "element_active": "#2e5cb8",
-                "element_selected": "#2952a3",
-                "element_disabled": "#3366cc4d",
-                "secondary_foreground": "#2952a3",
-                "secondary_background": "#e6ecf5",
-                "secondary_hover": "#3366cc1a",
-                "secondary_active": "#d9e2f0",
-                "secondary_selected": "#d9e2f0",
-                "secondary_disabled": "#3366cc4d",
-                "danger_foreground": "#ffffff",
-                "danger_background": "#f5e6e6",
-                "danger_hover": "#cc33331a",
-                "danger_active": "#f0d9d9",
-                "danger_selected": "#f0d9d9",
-                "danger_disabled": "#cc33334d",
-                "warning_foreground": "#1a1a1a",
-                "warning_background": "#f5f0e6",
-                "warning_hover": "#cc99331a",
-                "warning_active": "#f0ead9",
-                "warning_selected": "#f0ead9",
-                "warning_disabled": "#cc99334d",
-                "ghost_element_background": "#00000000",
-                "ghost_element_background_alt": "#e6e6e6",
-                "ghost_element_hover": "#0000001a",
-                "ghost_element_active": "#d9d9d9",
-                "ghost_element_selected": "#d9d9d9",
-                "ghost_element_disabled": "#0000000d",
-                "tab_inactive_background": "#e6e6e6",
-                "tab_hover_background": "#e0e0e0",
-                "tab_active_background": "#d9d9d9",
-                "scrollbar_thumb_background": "#00000033",
-                "scrollbar_thumb_hover_background": "#0000004d",
-                "scrollbar_thumb_border": "#00000000",
-                "scrollbar_track_background": "#00000000",
-                "scrollbar_track_border": "#d9d9d9",
-                "drop_target_background": "#3366cc1a",
-                "cursor": "#3399ff",
-                "selection": "#3399ff40"
-            },
-            "dark": {
-                "background": "#1a1a1a",
-                "surface_background": "#1f1f1f",
-                "elevated_surface_background": "#242424",
-                "panel_background": "#262626",
-                "overlay": "#ffffff1a",
-                "title_bar": "#00000000",
-                "title_bar_inactive": "#1a1a1a",
-                "window_border": "#404046",
-                "border": "#404040",
-                "border_variant": "#383838",
-                "border_focused": "#4d79d6",
-                "border_selected": "#4d79d6",
-                "border_transparent": "#00000000",
-                "border_disabled": "#2e2e2e",
-                "ring": "#668cdf",
-                "text": "#f2f2f2",
-                "text_muted": "#b3b3b3",
-                "text_placeholder": "#808080",
-                "text_accent": "#668cdf",
-                "icon": "#b3b3b3",
-                "icon_muted": "#808080",
-                "icon_accent": "#668cdf",
-                "element_foreground": "#ffffff",
-                "element_background": "#4d79d6",
-                "element_hover": "#4d79d6e6",
-                "element_active": "#456dc1",
-                "element_selected": "#3e62ac",
-                "element_disabled": "#4d79d64d",
-                "secondary_foreground": "#3e62ac",
-                "secondary_background": "#2a3652",
-                "secondary_hover": "#4d79d61a",
-                "secondary_active": "#303d5c",
-                "secondary_selected": "#303d5c",
-                "secondary_disabled": "#4d79d64d",
-                "danger_foreground": "#ffffff",
-                "danger_background": "#522a2a",
-                "danger_hover": "#d64d4d1a",
-                "danger_active": "#5c3030",
-                "danger_selected": "#5c3030",
-                "danger_disabled": "#d64d4d4d",
-                "warning_foreground": "#f2f2f2",
-                "warning_background": "#52482a",
-                "warning_hover": "#d6b34d1a",
-                "warning_active": "#5c5430",
-                "warning_selected": "#5c5430",
-                "warning_disabled": "#d6b34d4d",
-                "ghost_element_background": "#00000000",
-                "ghost_element_background_alt": "#2e2e2e",
-                "ghost_element_hover": "#ffffff1a",
-                "ghost_element_active": "#383838",
-                "ghost_element_selected": "#383838",
-                "ghost_element_disabled": "#ffffff0d",
-                "tab_inactive_background": "#2e2e2e",
-                "tab_hover_background": "#333333",
-                "tab_active_background": "#383838",
-                "scrollbar_thumb_background": "#ffffff33",
-                "scrollbar_thumb_hover_background": "#ffffff4d",
-                "scrollbar_thumb_border": "#00000000",
-                "scrollbar_track_background": "#00000000",
-                "scrollbar_track_border": "#383838",
-                "drop_target_background": "#4d79d61a",
-                "cursor": "#4db3ff",
-                "selection": "#4db3ff40"
-            }
-        }"##;
-
-        // Write the JSON to the file
-        fs::write(&file_path, json_data).unwrap();
-
-        // Test loading the theme from file
-        let theme = ThemeFamily::from_file(&file_path).unwrap();
-
-        // Verify the loaded theme
-        assert_eq!(theme.id, "test-theme");
-        assert_eq!(theme.name, "Test Theme");
-
-        // Clean up
-        dir.close().unwrap();
-    }
-
-    #[test]
-    fn test_from_file_nonexistent() {
-        // Test that loading a non-existent file returns an error
-        let result = ThemeFamily::from_file("non-existent-file.json");
-        assert!(result.is_err());
-    }
-
-    #[test]
-    fn test_from_file_invalid_json() {
-        // Create a temporary directory for our test
-        let dir = tempdir().unwrap();
-        let file_path = dir.path().join("invalid-theme.json");
-
-        // Write invalid JSON
-        fs::write(&file_path, "invalid json").unwrap();
-
-        // Test that loading invalid JSON returns an error
-        let result = ThemeFamily::from_file(&file_path);
-        assert!(result.is_err());
-
-        // Clean up
-        dir.close().unwrap();
-    }
-}
@@ -424,7 +424,7 @@ impl InteractiveElement for Avatar {
 }

 impl RenderOnce for Avatar {
-    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+    fn render(self, window: &mut Window, _cx: &mut App) -> impl IntoElement {
        let border_width = if self.border_color.is_some() {
            px(2.)
        } else {
@@ -444,7 +444,7 @@ impl RenderOnce for Avatar {
                    .rounded_full()
                    .object_fit(ObjectFit::Cover)
                    .grayscale(grayscale)
-                    .bg(cx.theme().ghost_element_background)
+                    .bg(gpui::transparent_black())
                    .with_fallback(move || generated_avatar(seed.as_deref(), image_size))
                    .into_any_element()
            }
@@ -24,10 +24,10 @@ pub struct ButtonCustomVariant {
 impl ButtonCustomVariant {
    pub fn new(_window: &Window, cx: &App) -> Self {
        Self {
-            color: cx.theme().element_background,
-            foreground: cx.theme().element_foreground,
-            hover: cx.theme().element_hover,
-            active: cx.theme().element_active,
+            color: cx.theme().accent.primary,
+            foreground: cx.theme().accent.on,
+            hover: cx.theme().accent.hover,
+            active: cx.theme().accent.active,
        }
    }

@@ -470,15 +470,15 @@ impl ButtonVariant {

    fn bg_color(&self, cx: &App) -> Hsla {
        match self {
-            ButtonVariant::Primary => cx.theme().element_background,
-            ButtonVariant::Secondary => cx.theme().secondary_background,
-            ButtonVariant::Danger => cx.theme().danger_background,
-            ButtonVariant::Warning => cx.theme().warning_background,
+            ButtonVariant::Primary => cx.theme().accent.primary,
+            ButtonVariant::Secondary => cx.theme().accent.wash,
+            ButtonVariant::Danger => cx.theme().danger,
+            ButtonVariant::Warning => cx.theme().warning,
            ButtonVariant::Ghost { alt } => {
                if *alt {
-                    cx.theme().ghost_element_background_alt
+                    cx.theme().raised
                } else {
-                    cx.theme().ghost_element_background
+                    gpui::transparent_black()
                }
            }
            ButtonVariant::Custom(colors) => colors.color,
@@ -488,11 +488,11 @@ impl ButtonVariant {

    fn text_color(&self, cx: &App) -> Hsla {
        match self {
-            ButtonVariant::Primary => cx.theme().element_foreground,
-            ButtonVariant::Secondary => cx.theme().secondary_foreground,
-            ButtonVariant::Danger => cx.theme().danger_foreground,
-            ButtonVariant::Warning => cx.theme().warning_foreground,
-            ButtonVariant::Transparent => cx.theme().text_placeholder,
+            ButtonVariant::Primary => cx.theme().accent.on,
+            ButtonVariant::Secondary => cx.theme().accent.text_on_wash,
+            ButtonVariant::Danger => cx.theme().accent.on_danger,
+            ButtonVariant::Warning => cx.theme().accent.on_danger,
+            ButtonVariant::Transparent => cx.theme().text_faint,
            ButtonVariant::Ghost { alt } => {
                if *alt {
                    cx.theme().text
@@ -506,19 +506,19 @@ impl ButtonVariant {

    fn hovered(&self, cx: &App) -> ButtonVariantStyle {
        let bg = match self {
-            ButtonVariant::Primary => cx.theme().element_hover,
-            ButtonVariant::Secondary => cx.theme().secondary_hover,
-            ButtonVariant::Danger => cx.theme().danger_hover,
-            ButtonVariant::Warning => cx.theme().warning_hover,
-            ButtonVariant::Ghost { .. } => cx.theme().ghost_element_hover,
+            ButtonVariant::Primary => cx.theme().accent.hover,
+            ButtonVariant::Secondary => cx.theme().accent.selection,
+            ButtonVariant::Danger => cx.theme().danger.opacity(0.15),
+            ButtonVariant::Warning => cx.theme().warning.opacity(0.15),
+            ButtonVariant::Ghost { .. } => cx.theme().hover,
            ButtonVariant::Transparent => gpui::transparent_black(),
            ButtonVariant::Custom(colors) => colors.hover,
        };

        let fg = match self {
-            ButtonVariant::Secondary => cx.theme().secondary_foreground,
+            ButtonVariant::Secondary => cx.theme().accent.text_on_wash,
            ButtonVariant::Ghost { .. } => cx.theme().text,
-            ButtonVariant::Transparent => cx.theme().text_placeholder,
+            ButtonVariant::Transparent => cx.theme().text_faint,
            _ => self.text_color(cx),
        };

@@ -527,18 +527,18 @@ impl ButtonVariant {

    fn active(&self, cx: &App) -> ButtonVariantStyle {
        let bg = match self {
-            ButtonVariant::Primary => cx.theme().element_active,
-            ButtonVariant::Secondary => cx.theme().secondary_active,
-            ButtonVariant::Danger => cx.theme().danger_active,
-            ButtonVariant::Warning => cx.theme().warning_active,
-            ButtonVariant::Ghost { .. } => cx.theme().ghost_element_active,
+            ButtonVariant::Primary => cx.theme().accent.active,
+            ButtonVariant::Secondary => cx.theme().accent.selection,
+            ButtonVariant::Danger => cx.theme().danger.opacity(0.25),
+            ButtonVariant::Warning => cx.theme().warning.opacity(0.25),
+            ButtonVariant::Ghost { .. } => cx.theme().active,
            ButtonVariant::Transparent => gpui::transparent_black(),
            ButtonVariant::Custom(colors) => colors.active,
        };

        let fg = match self {
-            ButtonVariant::Secondary => cx.theme().secondary_foreground,
-            ButtonVariant::Transparent => cx.theme().text_placeholder,
+            ButtonVariant::Secondary => cx.theme().accent.text_on_wash,
+            ButtonVariant::Transparent => cx.theme().text_faint,
            _ => self.text_color(cx),
        };

@@ -547,18 +547,18 @@ impl ButtonVariant {

    fn selected(&self, cx: &App) -> ButtonVariantStyle {
        let bg = match self {
-            ButtonVariant::Primary => cx.theme().element_selected,
-            ButtonVariant::Secondary => cx.theme().secondary_selected,
-            ButtonVariant::Danger => cx.theme().danger_selected,
-            ButtonVariant::Warning => cx.theme().warning_selected,
-            ButtonVariant::Ghost { .. } => cx.theme().ghost_element_selected,
+            ButtonVariant::Primary => cx.theme().accent.selected,
+            ButtonVariant::Secondary => cx.theme().accent.selection,
+            ButtonVariant::Danger => cx.theme().danger.opacity(0.25),
+            ButtonVariant::Warning => cx.theme().warning.opacity(0.25),
+            ButtonVariant::Ghost { .. } => cx.theme().active,
            ButtonVariant::Transparent => gpui::transparent_black(),
            ButtonVariant::Custom(colors) => colors.active,
        };

        let fg = match self {
-            ButtonVariant::Secondary => cx.theme().secondary_foreground,
-            ButtonVariant::Transparent => cx.theme().text_placeholder,
+            ButtonVariant::Secondary => cx.theme().accent.text_on_wash,
+            ButtonVariant::Transparent => cx.theme().text_faint,
            _ => self.text_color(cx),
        };

@@ -567,11 +567,11 @@ impl ButtonVariant {

    fn disabled(&self, cx: &App) -> ButtonVariantStyle {
        let bg = match self {
-            ButtonVariant::Danger => cx.theme().danger_disabled,
-            ButtonVariant::Warning => cx.theme().warning_disabled,
-            ButtonVariant::Ghost { .. } => cx.theme().ghost_element_disabled,
-            ButtonVariant::Secondary => cx.theme().secondary_disabled,
-            _ => cx.theme().element_disabled,
+            ButtonVariant::Danger => cx.theme().danger.opacity(0.12),
+            ButtonVariant::Warning => cx.theme().warning.opacity(0.12),
+            ButtonVariant::Ghost { .. } => cx.theme().border.opacity(0.4),
+            ButtonVariant::Secondary => cx.theme().accent.wash.opacity(0.5),
+            _ => cx.theme().accent.primary.opacity(0.3),
        };

        let fg = match self {
@@ -341,7 +341,7 @@ impl RenderOnce for Dialog {
            .id(layer_ix)
            .bg(cx.theme().background)
            .border_1()
-            .border_color(cx.theme().border.alpha(0.4))
+            .border_color(cx.theme().border)
            .rounded(radius)
            .when(cx.theme().shadow, |this| this.shadow_xl())
            .min_h_24()
@@ -381,10 +381,10 @@ impl RenderOnce for Dialog {
                                        .icon(IconName::CloseCircleFill)
                                        .custom(
                                            ButtonCustomVariant::new(window, cx)
-                                                .foreground(cx.theme().icon_muted)
-                                                .color(cx.theme().ghost_element_background)
-                                                .hover(cx.theme().ghost_element_background)
-                                                .active(cx.theme().ghost_element_background),
+                                                .foreground(cx.theme().text_faint)
+                                                .color(gpui::transparent_black())
+                                                .hover(gpui::transparent_black())
+                                                .active(gpui::transparent_black()),
                                        )
                                        .on_click(move |_, window, cx| {
                                            on_cancel(&ClickEvent::default(), window, cx);
@@ -446,7 +446,7 @@ impl TabGroupSkin {
            .flex_grow_1()
            .min_w_16()
            .when(droppable, |this| {
-                this.drag_over::<DragPanel>(|this, _, _, cx| this.bg(cx.theme().surface_background))
+                this.drag_over::<DragPanel>(|this, _, _, cx| this.bg(cx.theme().accent.selection))
                    .on_drop({
                        let group = TabGroupContext::clone(group);
                        move |drag: &DragPanel, window, cx| {
@@ -465,7 +465,7 @@ impl TabGroupSkin {
        let bar = TabBar::new("tab-bar")
            .track_scroll(&self.scroll_handle)
            .h(TABBAR_HEIGHT)
-            .bg(cx.theme().panel_background)
+            .bg(cx.theme().background)
            .when(needs_traffic_light_padding, |this| {
                this.pl(px(TRAFFIC_LIGHT_PADDING))
            })
@@ -567,7 +567,7 @@ impl TabGroupSkin {
            h_flex()
                .h(TABBAR_HEIGHT)
                .w_full()
-                .bg(cx.theme().panel_background)
+                .bg(cx.theme().background)
                .child(bar.flex_1())
                .child(window_controls())
                .into_any_element()
@@ -717,7 +717,7 @@ impl TabGroupRenderer for TabGroupSkin {
            .child(
                div()
                    .size_full()
-                    .bg(cx.theme().panel_background)
+                    .bg(cx.theme().background)
                    .overflow_hidden()
                    .child(panel.cached(StyleRefinement::default().v_flex().size_full())),
            )
@@ -760,8 +760,8 @@ impl TabGroupRenderer for TabGroupSkin {
                .h(height)
                .rounded(cx.theme().radius_lg)
                .border_1()
-                .border_color(cx.theme().element_disabled)
-                .bg(cx.theme().drop_target_background)
+                .border_color(cx.theme().accent.strong.opacity(0.3))
+                .bg(cx.theme().accent.selection)
                .into_any_element(),
        )
    }
@@ -106,7 +106,7 @@ impl RenderOnce for GroupBox {
    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
        let (bg, has_paddings) = match self.variant {
            GroupBoxVariant::Normal => (None, false),
-            GroupBoxVariant::Fill => (Some(cx.theme().surface_background), true),
+            GroupBoxVariant::Fill => (Some(cx.theme().shell), true),
        };

        v_flex()
@@ -291,7 +291,7 @@ impl From<Icon> for AnyElement {

 impl Render for Icon {
    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
-        let text_color = self.text_color.unwrap_or_else(|| cx.theme().icon);
+        let text_color = self.text_color.unwrap_or_else(|| cx.theme().text_muted);
        let text_size = window.text_style().font_size.to_pixels(window.rem_size());
        let has_base_size = self.style.size.width.is_some() || self.style.size.height.is_some();

@@ -11,5 +11,5 @@ pub(crate) fn clear_button(cx: &App) -> Button {
        .ghost()
        .xsmall()
        .tab_stop(false)
-        .text_color(cx.theme().icon_muted)
+        .text_color(cx.theme().text_faint)
 }
@@ -16,9 +16,9 @@ use crate::{IconName, Selectable, Sizable, Size, StyleSized, StyledExt, h_flex,
 /// The background of an input frame, which reads muted while the input is disabled.
 fn input_background(disabled: bool, cx: &App) -> Hsla {
    if disabled {
-        cx.theme().surface_background
+        cx.theme().shell
    } else {
-        cx.theme().elevated_surface_background
+        cx.theme().input
    }
 }

@@ -32,9 +32,9 @@ fn input_editor_style(cx: &App) -> InputEditorStyle {
    InputEditorStyle {
        foreground: theme.text,
        muted_foreground: theme.text_muted,
-        background: theme.elevated_surface_background,
+        background: theme.input,
        border: theme.border,
-        selection: theme.selection,
+        selection: theme.accent.selection,
        caret: theme.cursor,
        ..InputEditorStyle::default()
    }
@@ -199,7 +199,7 @@ impl RenderOnce for Kbd {
            .border_1()
            .border_color(cx.theme().border)
            .text_color(cx.theme().text_muted)
-            .bg(cx.theme().surface_background)
+            .bg(cx.theme().shell)
            .py_0p5()
            .px_1()
            .min_w_5()
@@ -69,8 +69,8 @@ impl RenderedText {
                TextViewStyle::default()
                    .with_foreground(theme.text)
                    .with_muted_foreground(theme.text_muted)
-                    .with_link(theme.text_accent)
-                    .with_code_background(theme.elevated_surface_background)
+                    .with_link(theme.accent.strong)
+                    .with_code_background(theme.raised)
                    .with_border(theme.border)
                    .with_code_block(code_block)
                    .with_dark(theme.is_dark()),
@@ -104,12 +104,12 @@ impl RenderOnce for MenuItemElement {
            })
            .when(!self.disabled, |this| {
                this.group_hover(self.group_name, |this| {
-                    this.bg(cx.theme().secondary_background)
-                        .text_color(cx.theme().secondary_foreground)
+                    this.bg(cx.theme().accent.wash)
+                        .text_color(cx.theme().accent.text_on_wash)
                })
                .when(self.selected, |this| {
-                    this.bg(cx.theme().secondary_background)
-                        .text_color(cx.theme().secondary_foreground)
+                    this.bg(cx.theme().accent.selection)
+                        .text_color(cx.theme().accent.text_on_wash)
                })
                .when_some(self.on_click, |this, on_click| {
                    this.on_mouse_down(MouseButton::Left, move |_, _, cx| {
@@ -192,7 +192,7 @@ impl RenderOnce for MessageRow {
                                    h_flex()
                                        .gap_2()
                                        .text_sm()
-                                        .text_color(cx.theme().text_placeholder)
+                                        .text_color(cx.theme().text_faint)
                                        .when_some(author, |this, author| {
                                            this.child(div().font_semibold().child(author))
                                        })
@@ -212,7 +212,7 @@ impl RenderOnce for MessageRow {
            .when_some(on_double_click, |this, listener| {
                this.on_double_click(listener)
            })
-            .hover(|this| this.bg(cx.theme().surface_background))
+            .hover(|this| this.bg(cx.theme().shell))
            .into_any_element()
    }
 }
@@ -315,7 +315,7 @@ impl RenderOnce for WelcomeMessage {
                        this.child(
                            div()
                                .text_xs()
-                                .text_color(cx.theme().text_placeholder)
+                                .text_color(cx.theme().text_faint)
                                .child(message),
                        )
                    }),
@@ -126,10 +126,8 @@ impl RenderOnce for Nav {
                )
                .when(clickable, |this| {
                    this.cursor_pointer()
-                        .hover(|this| this.bg(cx.theme().ghost_element_hover))
-                        .when(self.selected, |this| {
-                            this.bg(cx.theme().ghost_element_active)
-                        })
+                        .hover(|this| this.bg(cx.theme().hover))
+                        .when(self.selected, |this| this.bg(cx.theme().active))
                })
                .when_some(self.on_click, |this, handler| {
                    this.on_click(move |event, window, cx| handler(event, window, cx))
@@ -119,10 +119,8 @@ impl RenderOnce for NavItem {
            })
            .when(clickable, |this| {
                this.cursor_pointer()
-                    .hover(|this| this.bg(cx.theme().ghost_element_hover))
-                    .when(self.selected, |this| {
-                        this.bg(cx.theme().ghost_element_active)
-                    })
+                    .hover(|this| this.bg(cx.theme().hover))
+                    .when(self.selected, |this| this.bg(cx.theme().active))
            })
            .when_some(self.on_click, |this, handler| {
                this.on_click(move |event, window, cx| handler(event, window, cx))
@@ -43,16 +43,16 @@ impl NotificationKind {
        match self {
            Self::Info => Icon::new(IconName::Info)
                .with_size(Size::Medium)
-                .text_color(cx.theme().icon),
+                .text_color(cx.theme().text_muted),
            Self::Success => Icon::new(IconName::CheckCircle)
                .with_size(Size::Medium)
-                .text_color(cx.theme().icon_accent),
+                .text_color(cx.theme().accent.strong),
            Self::Warning => Icon::new(IconName::Warning)
                .with_size(Size::Medium)
-                .text_color(cx.theme().text_warning),
+                .text_color(cx.theme().warning),
            Self::Error => Icon::new(IconName::CloseCircle)
                .with_size(Size::Medium)
-                .text_color(cx.theme().danger_foreground),
+                .text_color(cx.theme().danger),
        }
    }
 }
@@ -300,12 +300,12 @@ impl Render for Notification {
        };

        let background = match self.kind {
-            Some(NotificationKind::Error) => cx.theme().danger_background,
-            _ => cx.theme().surface_background,
+            Some(NotificationKind::Error) => cx.theme().danger_muted,
+            _ => cx.theme().shell,
        };

        let text_color = match self.kind {
-            Some(NotificationKind::Error) => cx.theme().danger_foreground,
+            Some(NotificationKind::Error) => cx.theme().danger,
            _ => cx.theme().text,
        };

@@ -12,7 +12,7 @@ pub(crate) fn resize_handle_appearance() -> ResizeHandleRenderer {
    Rc::new(
        |context: &ResizeHandleContext, _: &mut Window, cx: &mut App| {
            let color = if context.is_active() {
-                cx.theme().border_selected
+                cx.theme().accent.strong
            } else {
                cx.theme().border
            };
@@ -20,7 +20,7 @@ pub(crate) fn resize_handle_appearance() -> ResizeHandleRenderer {

            Some(
                div()
-                    .bg(cx.theme().border_variant)
+                    .bg(cx.theme().border)
                    .group_hover("handle", move |this| this.bg(color))
                    .when(axis.is_horizontal(), |this| this.h_full().w(HANDLE_SIZE))
                    .when(axis.is_vertical(), |this| this.w_full().h(HANDLE_SIZE))
@@ -381,7 +381,7 @@ impl Render for Root {
                    })
                    .size_full()
                    .font_family(font_family)
-                    .bg(cx.theme().surface_background)
+                    .bg(cx.theme().shell)
                    .text_color(cx.theme().text)
                    .child(TextSelectionLayer)
                    .child(self.view.clone()),
@@ -57,14 +57,14 @@ fn scrollbar<H: ScrollbarHandle + Clone>(
        styles
            .track(|track| {
                track
-                    .bg(theme.scrollbar_track_background)
-                    .border_color(theme.scrollbar_thumb_border)
+                    .bg(gpui::transparent_black())
+                    .border_color(gpui::transparent_black())
                    .width(px(10.))
            })
-            .track_hover(|track| track.bg(theme.scrollbar_thumb_background).width(px(10.)))
+            .track_hover(|track| track.bg(theme.border.opacity(0.7)).width(px(10.)))
            .thumb(|thumb| {
                thumb
-                    .bg(theme.scrollbar_thumb_background)
+                    .bg(theme.border.opacity(0.7))
                    .width(thumb_width)
                    .inset(px(1.))
                    .radius(thumb_radius)
@@ -72,14 +72,14 @@ fn scrollbar<H: ScrollbarHandle + Clone>(
            })
            .thumb_hover(|thumb| {
                thumb
-                    .bg(theme.scrollbar_thumb_hover_background)
+                    .bg(theme.border_strong)
                    .width(px(8.))
                    .inset(px(1.))
                    .radius(px(4.))
            })
            .thumb_active(|thumb| {
                thumb
-                    .bg(theme.scrollbar_thumb_hover_background)
+                    .bg(theme.border_strong)
                    .width(px(8.))
                    .inset(px(1.))
                    .radius(px(4.))
@@ -15,7 +15,7 @@ pub fn v_flex() -> Div {

 /// Returns a `Div` as divider.
 pub fn divider(cx: &App) -> Div {
-    div().my_1().w_full().h_px().bg(cx.theme().border_variant)
+    div().my_1().w_full().h_px().bg(cx.theme().border)
 }

 macro_rules! font_weight {
@@ -85,8 +85,8 @@ impl RenderOnce for Switch {
        let on_click = self.on_click.clone();

        let (bg, toggle_bg) = match checked {
-            true => (cx.theme().element_background, white()),
-            false => (cx.theme().elevated_surface_background, white()),
+            true => (cx.theme().accent.primary, white()),
+            false => (cx.theme().raised, white()),
        };

        let (bg, toggle_bg) = match self.disabled {
@@ -155,7 +155,7 @@ impl RenderOnce for Switch {
                                .flex()
                                .items_center()
                                .border(inset)
-                                .border_color(cx.theme().border_transparent)
+                                .border_color(gpui::transparent_black())
                                .bg(bg)
                                .when(!self.disabled, |this| this.cursor_pointer())
                                .child(
@@ -193,9 +193,9 @@ impl RenderOnce for Tab {
        let foreground = if disabled {
            cx.theme().text_muted
        } else if selected {
-            cx.theme().tab_active_foreground
+            cx.theme().text
        } else {
-            cx.theme().tab_foreground
+            cx.theme().text_muted
        };

        let content = h_flex()
@@ -227,11 +227,11 @@ impl RenderOnce for Tab {
                    .h_6()
                    .rounded(cx.theme().radius)
                    .when(selected && !disabled, |this| {
-                        this.bg(cx.theme().tab_active_background)
+                        this.bg(cx.theme().background)
                            .when(cx.theme().shadow, |this| this.shadow_sm())
                    })
                    .when(!selected && !disabled, |this| {
-                        this.hover(|this| this.bg(cx.theme().tab_hover_background))
+                        this.hover(|this| this.bg(cx.theme().hover))
                    })
            })
            .when(!segmented, |this| {
@@ -243,14 +243,9 @@ impl RenderOnce for Tab {
                    .text_sm()
                    .rounded(cx.theme().radius)
                    .overflow_hidden()
-                    .when(selected && !disabled, |this| {
-                        this.bg(cx.theme().tab_background)
-                    })
+                    .when(selected && !disabled, |this| this.bg(cx.theme().shell))
                    .when(!selected && !disabled, |this| {
-                        this.hover(|this| {
-                            this.bg(cx.theme().tab_hover_background)
-                                .text_color(cx.theme().tab_active_foreground)
-                        })
+                        this.hover(|this| this.bg(cx.theme().hover).text_color(cx.theme().text))
                    })
            })
            .when_some(prefix, |this, prefix| this.child(prefix))
@@ -124,9 +124,7 @@ impl RenderOnce for TabBar {
            .min_w_0()
            .refine_style(&self.style)
            .when(segmented, |this| {
-                this.bg(cx.theme().tab_background)
-                    .p_0p5()
-                    .rounded(cx.theme().radius)
+                this.bg(cx.theme().shell).p_0p5().rounded(cx.theme().radius)
            })
            .when_some(self.prefix, |this, prefix| this.child(prefix))
            .child(
@@ -79,7 +79,7 @@ impl ControlIcon {
    #[inline]
    fn hover_fg(&self, cx: &App) -> Hsla {
        if self.is_close() {
-            cx.theme().danger_foreground
+            cx.theme().danger
        } else {
            cx.theme().text
        }
@@ -88,18 +88,18 @@ impl ControlIcon {
    #[inline]
    fn hover_bg(&self, cx: &App) -> Hsla {
        if self.is_close() {
-            cx.theme().danger_background
+            cx.theme().danger_muted
        } else {
-            cx.theme().ghost_element_hover
+            cx.theme().hover
        }
    }

    #[inline]
    fn active_bg(&self, cx: &mut App) -> Hsla {
        if self.is_close() {
-            cx.theme().danger_active
+            cx.theme().danger.opacity(0.25)
        } else {
-            cx.theme().ghost_element_active
+            cx.theme().active
        }
    }
 }
@@ -25,7 +25,7 @@ impl Render for Tooltip {
                .p_1p5()
                .border_1()
                .border_color(cx.theme().border)
-                .bg(cx.theme().surface_background)
+                .bg(cx.theme().shell)
                .when(cx.theme().shadow, |this| this.shadow_sm())
                .rounded(cx.theme().radius)
                .text_xs()
@@ -255,7 +255,7 @@ impl Render for ImportIdentity {
                        this.child(
                            div()
                                .text_xs()
-                                .text_color(cx.theme().text_warning)
+                                .text_color(cx.theme().warning)
                                .child(div().child(BUNKER_WARN)),
                        )
                    })
@@ -263,7 +263,7 @@ impl Render for ImportIdentity {
                        this.child(
                            div()
                                .text_xs()
-                                .text_color(cx.theme().text_warning)
+                                .text_color(cx.theme().warning)
                                .child(div().child(KEY_WARN)),
                        )
                    }),
@@ -297,7 +297,7 @@ impl Render for ImportIdentity {
                    div()
                        .text_xs()
                        .text_center()
-                        .text_color(cx.theme().text_danger)
+                        .text_color(cx.theme().danger)
                        .child(error.clone()),
                )
            })
@@ -380,9 +380,9 @@ impl NewChat {
                    .gap_1()
                    .p_0p5()
                    .rounded_full()
-                    .bg(cx.theme().ghost_element_background_alt)
+                    .bg(cx.theme().raised)
                    .text_size(px(10.))
-                    .hover(|this| this.bg(cx.theme().ghost_element_hover))
+                    .hover(|this| this.bg(cx.theme().hover))
                    .child(
                        Avatar::from_source(profile.avatar())
                            .seed(profile.avatar_seed())
@@ -430,14 +430,14 @@ impl Render for NewChat {
                    this.child(
                        div()
                            .text_xs()
-                            .text_color(cx.theme().text_danger)
+                            .text_color(cx.theme().danger)
                            .child(error),
                    )
                } else {
                    this.child(
                        div()
                            .text_xs()
-                            .text_color(cx.theme().text_placeholder)
+                            .text_color(cx.theme().text_faint)
                            .child(notice),
                    )
                }
@@ -366,7 +366,7 @@ impl Render for ProfileDialog {
                    .w_full()
                    .items_center()
                    .justify_center()
-                    .bg(cx.theme().surface_background)
+                    .bg(cx.theme().shell)
                    .child(Avatar::new(avatar).seed(profile.avatar_seed()).large())
                    .when(self.editing, |this| {
                        this.child(
@@ -392,7 +392,7 @@ impl Render for ProfileDialog {
                        .justify_center()
                        .gap_3()
                        .rounded(cx.theme().radius)
-                        .bg(cx.theme().surface_background)
+                        .bg(cx.theme().shell)
                        .text_sm()
                        .child(shorten_pkey)
                        .child(
@@ -154,7 +154,7 @@ impl RelayManager {
                    div()
                        .italic()
                        .text_xs()
-                        .text_color(cx.theme().text_danger)
+                        .text_color(cx.theme().danger)
                        .child(error.clone()),
                )
            })
@@ -225,7 +225,7 @@ impl RelayManager {
                    div()
                        .italic()
                        .text_xs()
-                        .text_color(cx.theme().text_danger)
+                        .text_color(cx.theme().danger)
                        .child(error.clone()),
                )
            })
@@ -647,7 +647,7 @@ fn relay_row(
        .px_2()
        .justify_between()
        .rounded(cx.theme().radius)
-        .bg(cx.theme().surface_background)
+        .bg(cx.theme().shell)
        .child(
            h_flex()
                .gap_1()
@@ -122,7 +122,7 @@ impl Render for RestoreEncryption {
                    div()
                        .text_xs()
                        .text_center()
-                        .text_color(cx.theme().text_danger)
+                        .text_color(cx.theme().danger)
                        .child(error.clone()),
                )
            })
@@ -294,7 +294,7 @@ impl Screening {
                                    .gap_1p5()
                                    .rounded(cx.theme().radius)
                                    .text_sm()
-                                    .hover(|this| this.bg(cx.theme().elevated_surface_background))
+                                    .hover(|this| this.bg(cx.theme().raised))
                                    .child(Avatar::new(profile.avatar()).small())
                                    .child(profile.name()),
                            );
@@ -353,7 +353,7 @@ impl Render for Screening {
                            .h_7()
                            .justify_center()
                            .rounded_full()
-                            .bg(cx.theme().elevated_surface_background)
+                            .bg(cx.theme().raised)
                            .text_sm()
                            .truncate()
                            .text_ellipsis()
@@ -533,9 +533,9 @@ fn status_badge(status: Option<bool>, cx: &App) -> Div {
            if let Some(status) = status {
                this.child(Icon::new(IconName::CheckCircle).small().text_color({
                    if status {
-                        cx.theme().icon_accent
+                        cx.theme().accent.strong
                    } else {
-                        cx.theme().icon_muted
+                        cx.theme().text_faint
                    }
                }))
            } else {
@@ -4,7 +4,7 @@ use gpui::{
    Window, div, px,
 };
 use settings::AppSettings;
-use theme::{ActiveTheme, Theme, ThemeMode};
+use theme::{AccentPreset, AccentSelection, ActiveTheme, Appearance, SurfacePreference, Theme};
 use ui::button::{Button, ButtonVariants};
 use ui::group_box::{GroupBox, GroupBoxVariants};
 use ui::input::{Input, InputState};
@@ -47,10 +47,10 @@ impl Preferences {
        }
    }

-    /// Set the theme mode (light or dark)
-    fn set_theme_mode(mode: ThemeMode, window: &mut Window, cx: &mut App) {
-        AppSettings::update_theme_mode(mode, cx);
-        Theme::change(mode, Some(window), cx);
+    /// Set the appearance (light or dark)
+    fn set_appearance(appearance: Appearance, window: &mut Window, cx: &mut App) {
+        AppSettings::update_appearance(appearance, cx);
+        Theme::change(appearance, Some(window), cx);
    }
 }

@@ -59,13 +59,17 @@ impl Render for Preferences {
        const SCREENING: &str = "Show an screening dialog to verify the unknown sender.";
        const AVATAR: &str = "Hide all avatar pictures to improve performance.";
        const MODE: &str = "Use the selected light or dark theme, or to follow the OS.";
+        const ACCENT: &str = "Override the accent color of the selected theme.";
+        const SURFACE: &str = "Preferred surface treatment. Frosted rendering is not applied yet.";
        const NIP4E: &str = "Use a dedicated key to encrypt and decrypt messages.";
        const RESET: &str = "Reset the theme to the default one.";

        let screening = AppSettings::get_screening(cx);
        let hide_avatar = AppSettings::get_hide_avatar(cx);
        let nip4e = AppSettings::get_nip4e(cx);
-        let theme_mode = AppSettings::get_theme_mode(cx);
+        let appearance = AppSettings::get_appearance(cx);
+        let accent_selection = AppSettings::get_accent_selection(cx);
+        let surface_preference = AppSettings::get_surface_preference(cx);

        v_flex()
            .gap_4()
@@ -114,23 +118,148 @@ impl Render for Preferences {
                            )
                            .child(
                                Button::new("theme-mode")
-                                    .label(theme_mode.name())
+                                    .label(if appearance.is_dark() {
+                                        "Dark"
+                                    } else {
+                                        "Light"
+                                    })
                                    .ghost_alt()
                                    .small()
                                    .dropdown_menu(|this, _window, _cx| {
                                        this.item(PopupMenuItem::new("Light").on_click(
                                            |_, window, cx| {
-                                                Self::set_theme_mode(ThemeMode::Light, window, cx);
+                                                Self::set_appearance(Appearance::Light, window, cx);
                                            },
                                        ))
                                        .item(
                                            PopupMenuItem::new("Dark").on_click(|_, window, cx| {
-                                                Self::set_theme_mode(ThemeMode::Dark, window, cx);
+                                                Self::set_appearance(Appearance::Dark, window, cx);
                                            }),
                                        )
                                    }),
                            ),
                    )
+                    .child(
+                        h_flex()
+                            .gap_3()
+                            .justify_between()
+                            .child(
+                                v_flex()
+                                    .child(div().text_sm().child(SharedString::from("Accent")))
+                                    .child(
+                                        div()
+                                            .text_xs()
+                                            .text_color(cx.theme().text_muted)
+                                            .child(SharedString::from(ACCENT)),
+                                    ),
+                            )
+                            .child(
+                                Button::new("accent")
+                                    .label(accent_selection.label())
+                                    .ghost_alt()
+                                    .small()
+                                    .dropdown_menu(|menu, _window, _cx| {
+                                        let menu =
+                                            menu.item(
+                                                PopupMenuItem::new(
+                                                    AccentSelection::ThemeDefault.label(),
+                                                )
+                                                .on_click(|_, window, cx| {
+                                                    AppSettings::global(cx).update(cx, |s, cx| {
+                                                        s.apply_accent(
+                                                            AccentSelection::ThemeDefault,
+                                                            window,
+                                                            cx,
+                                                        );
+                                                    });
+                                                }),
+                                            );
+
+                                        let mut menu = menu;
+                                        for preset in AccentPreset::ALL {
+                                            menu = menu.item(
+                                                PopupMenuItem::new(preset.label()).on_click({
+                                                    move |_, window, cx| {
+                                                        AppSettings::global(cx).update(
+                                                            cx,
+                                                            |s, cx| {
+                                                                s.apply_accent(
+                                                                    AccentSelection::Preset(preset),
+                                                                    window,
+                                                                    cx,
+                                                                );
+                                                            },
+                                                        );
+                                                    }
+                                                }),
+                                            );
+                                        }
+                                        menu
+                                    }),
+                            ),
+                    )
+                    .child(
+                        h_flex()
+                            .gap_3()
+                            .justify_between()
+                            .child(
+                                v_flex()
+                                    .child(div().text_sm().child(SharedString::from("Surface")))
+                                    .child(
+                                        div()
+                                            .text_xs()
+                                            .text_color(cx.theme().text_muted)
+                                            .child(SharedString::from(SURFACE)),
+                                    ),
+                            )
+                            .child(
+                                Button::new("surface")
+                                    .label(match surface_preference {
+                                        SurfacePreference::ThemeDefault => "Theme default",
+                                        SurfacePreference::Frosted => "Frosted",
+                                        SurfacePreference::Opaque => "Opaque",
+                                    })
+                                    .ghost_alt()
+                                    .small()
+                                    .dropdown_menu(|menu, _window, _cx| {
+                                        menu.item(PopupMenuItem::new("Theme default").on_click(
+                                            |_, window, cx| {
+                                                AppSettings::global(cx).update(cx, |s, cx| {
+                                                    s.apply_surface(
+                                                        SurfacePreference::ThemeDefault,
+                                                        window,
+                                                        cx,
+                                                    );
+                                                });
+                                            },
+                                        ))
+                                        .item(PopupMenuItem::new("Frosted").on_click(
+                                            |_, window, cx| {
+                                                AppSettings::global(cx).update(cx, |s, cx| {
+                                                    s.apply_surface(
+                                                        SurfacePreference::Frosted,
+                                                        window,
+                                                        cx,
+                                                    );
+                                                });
+                                            },
+                                        ))
+                                        .item(
+                                            PopupMenuItem::new("Opaque").on_click(
+                                                |_, window, cx| {
+                                                    AppSettings::global(cx).update(cx, |s, cx| {
+                                                        s.apply_surface(
+                                                            SurfacePreference::Opaque,
+                                                            window,
+                                                            cx,
+                                                        );
+                                                    });
+                                                },
+                                            ),
+                                        )
+                                    }),
+                            ),
+                    )
                    .child(
                        h_flex()
                            .gap_3()
@@ -199,7 +328,7 @@ impl Render for Preferences {
                                div()
                                    .text_size(px(10.))
                                    .italic()
-                                    .text_color(cx.theme().text_placeholder)
+                                    .text_color(cx.theme().text_faint)
                                    .child(SharedString::from("Only support blossom service")),
                            ),
                    ),
@@ -15,7 +15,7 @@ use nostr_sdk::prelude::*;
 use serde::Deserialize;
 use smallvec::{SmallVec, smallvec};
 use state::{NostrRegistry, StateEvent};
-use theme::{ActiveTheme, SIDEBAR_WIDTH, Theme, ThemeRegistry};
+use theme::{ActiveTheme, SIDEBAR_WIDTH, ThemeRegistry, ThemeVariant};
 use ui::button::{Button, ButtonVariants};
 use ui::dock::{self, DockArea, DockLayout, DockPlacement, Panel, PanelHandle};
 use ui::notification::{Notification, NotificationKind};
@@ -82,13 +82,6 @@ impl Workspace {

        let mut subscriptions = smallvec![];

-        subscriptions.push(
-            // Observe system appearance and update theme
-            cx.observe_window_appearance(window, |_this, window, cx| {
-                Theme::sync_system_appearance(Some(window), cx);
-            }),
-        );
-
        subscriptions.push(
            // Subscribe to the nostr events
            cx.subscribe_in(&nostr, window, move |_this, _state, event, window, cx| {
@@ -439,7 +432,7 @@ impl Workspace {
                        .child(
                            div()
                                .italic()
-                                .text_color(cx.theme().text_danger)
+                                .text_color(cx.theme().danger)
                                .child(SharedString::from(ENC_WARN)),
                        ),
                )
@@ -464,17 +457,45 @@ impl Workspace {
    }

    fn theme_selector(&mut self, window: &mut Window, cx: &mut Context<Self>) {
-        window.open_dialog(cx, move |this, _window, cx| {
-            let registry = ThemeRegistry::global(cx);
-            let themes = registry.read(cx).themes();
+        let appearance = cx.theme().appearance;
+        let registry = ThemeRegistry::builtin();
+        let groups: Vec<(String, Vec<ThemeVariant>)> = registry
+            .families
+            .iter()
+            .filter_map(|family| {
+                let variants: Vec<ThemeVariant> = family
+                    .variants
+                    .iter()
+                    .filter(|variant| variant.appearance == appearance)
+                    .cloned()
+                    .collect();
+                if variants.is_empty() {
+                    None
+                } else {
+                    Some((family.name.clone(), variants))
+                }
+            })
+            .collect();

+        window.open_dialog(cx, move |this, _window, cx| {
            this.width(px(520.))
                .show_close(true)
                .title("Select theme")
                .child(v_flex().gap_2().w_full().children({
-                    let mut items = vec![];
+                    let mut items: Vec<gpui::AnyElement> = vec![];

-                    for (ix, (path, theme)) in themes.iter().enumerate() {
+                    for (family_name, variants) in groups.iter() {
+                        items.push(
+                            div()
+                                .pt_2()
+                                .text_xs()
+                                .italic()
+                                .text_color(cx.theme().text_faint)
+                                .child(SharedString::from(family_name.clone()))
+                                .into_any_element(),
+                        );
+
+                        for (ix, variant) in variants.iter().enumerate() {
                            items.push(
                                h_flex()
                                    .id(ix)
@@ -484,20 +505,22 @@ impl Workspace {
                                    .w_full()
                                    .justify_between()
                                    .rounded(cx.theme().radius)
-                                .bg(cx.theme().ghost_element_background)
-                                .hover(|this| this.bg(cx.theme().ghost_element_hover))
+                                    .bg(gpui::transparent_black())
+                                    .hover(|this| this.bg(cx.theme().hover))
                                    .child(
                                        h_flex()
                                            .gap_1p5()
                                            .flex_1()
                                            .text_sm()
-                                        .child(theme.name.clone())
+                                            .child(SharedString::from(variant.name.clone()))
                                            .child(
                                                div()
                                                    .text_xs()
                                                    .italic()
-                                                .text_color(cx.theme().text_muted)
-                                                .child(theme.author.clone()),
+                                                    .text_color(cx.theme().text_faint)
+                                                    .child(SharedString::from(
+                                                        variant.source.license.clone(),
+                                                    )),
                                            ),
                                    )
                                    .child(
@@ -511,9 +534,9 @@ impl Workspace {
                                                    .ghost()
                                                    .small()
                                                    .on_click({
-                                                    let theme = theme.clone();
+                                                        let url = variant.source.url.clone();
                                                        move |_ev, _window, cx| {
-                                                        cx.open_url(&theme.url);
+                                                            cx.open_url(&url);
                                                        }
                                                    }),
                                            )
@@ -523,20 +546,25 @@ impl Workspace {
                                                    .primary()
                                                    .small()
                                                    .on_click({
-                                                    let path = path.clone();
+                                                        let id = variant.id.clone();
                                                        move |_ev, window, cx| {
                                                            let settings = AppSettings::global(cx);
-                                                        let path = path.clone();

                                                            settings.update(cx, |this, cx| {
-                                                            this.set_theme(path, window, cx);
+                                                                this.set_theme_variant(
+                                                                    id.clone(),
+                                                                    window,
+                                                                    cx,
+                                                                );
                                                            })
                                                        }
                                                    }),
                                            ),
-                                ),
+                                    )
+                                    .into_any_element(),
                            );
                        }
+                    }

                    items
                }))
@@ -295,7 +295,7 @@ impl BrowsePanel {
                    .max_w_64()
                    .px_1()
                    .rounded(cx.theme().radius)
-                    .bg(cx.theme().surface_background)
+                    .bg(cx.theme().shell)
                    .child(
                        Input::new(&self.input)
                            .appearance(false)
@@ -378,11 +378,11 @@ impl BrowsePanel {
            .rounded(cx.theme().radius)
            .cursor_pointer()
            .border_1()
-            .border_color(cx.theme().border_transparent)
-            .bg(cx.theme().surface_background)
+            .border_color(gpui::transparent_black())
+            .bg(cx.theme().shell)
            .hover(|this| {
-                this.bg(cx.theme().elevated_surface_background)
-                    .border_color(cx.theme().border_focused)
+                this.bg(cx.theme().raised)
+                    .border_color(cx.theme().accent.primary)
            })
            .child(
                v_flex()
@@ -414,7 +414,7 @@ impl BrowsePanel {
                                        div()
                                            .truncate()
                                            .text_xs()
-                                            .text_color(cx.theme().text_placeholder)
+                                            .text_color(cx.theme().text_faint)
                                            .child(relay),
                                    ),
                            ),
@@ -467,7 +467,7 @@ impl Panel for BrowsePanel {
            .child(
                Icon::new(IconName::Compass)
                    .small()
-                    .text_color(cx.theme().icon_muted),
+                    .text_color(cx.theme().text_faint),
            )
            .child(TITLE)
            .into_any_element()
@@ -234,7 +234,7 @@ impl ContactListPanel {
                    .px_2()
                    .justify_between()
                    .rounded(cx.theme().radius)
-                    .hover(|this| this.bg(cx.theme().ghost_element_hover))
+                    .hover(|this| this.bg(cx.theme().hover))
                    .child(
                        h_flex()
                            .gap_2()
@@ -343,7 +343,7 @@ impl Render for ContactListPanel {
                                    div()
                                        .italic()
                                        .text_xs()
-                                        .text_color(cx.theme().text_danger)
+                                        .text_color(cx.theme().danger)
                                        .child(error.clone()),
                                )
                            }),
@@ -91,7 +91,7 @@ impl Render for GreeterPanel {
                                svg()
                                    .path("brand/coop.svg")
                                    .size_12()
-                                    .text_color(cx.theme().icon_muted),
+                                    .text_color(cx.theme().text_faint),
                            )
                            .child(
                                v_flex()
@@ -35,7 +35,7 @@ impl Panel for InboxPanel {
            .child(
                Icon::new(IconName::Inbox)
                    .small()
-                    .text_color(cx.theme().icon_muted),
+                    .text_color(cx.theme().text_faint),
            )
            .child(self.name.clone())
            .into_any_element()
@@ -35,7 +35,7 @@ impl Panel for RequestsPanel {
            .child(
                Icon::new(IconName::Invite)
                    .small()
-                    .text_color(cx.theme().icon_muted),
+                    .text_color(cx.theme().text_faint),
            )
            .child(self.name.clone())
            .into_any_element()
@@ -437,7 +437,7 @@ impl Panel for SearchPanel {
            .child(
                Icon::new(IconName::Search)
                    .small()
-                    .text_color(cx.theme().icon_muted),
+                    .text_color(cx.theme().text_faint),
            )
            .child(self.name.clone())
            .into_any_element()
@@ -500,7 +500,7 @@ impl Render for SearchPanel {
                                .gap_1()
                                .flex_1()
                                .border_b_1()
-                                .border_color(cx.theme().border_variant)
+                                .border_color(cx.theme().border)
                                .child(
                                    h_flex()
                                        .gap_0p5()
@@ -230,10 +230,10 @@ impl Sidebar {

        Nav::new(label)
            .label(label)
-            .suffix(Icon::new(icon).small().text_color(cx.theme().icon_muted))
+            .suffix(Icon::new(icon).small().text_color(cx.theme().text_faint))
            .text_xs()
            .font_semibold()
-            .text_color(cx.theme().text_placeholder)
+            .text_color(cx.theme().text_faint)
            .on_click(cx.listener(move |this, _event, _window, cx| {
                match section {
                    GroupSection::Admins => this.admins_open = !this.admins_open,
@@ -277,7 +277,7 @@ impl Sidebar {
                    div()
                        .truncate()
                        .text_xs()
-                        .text_color(cx.theme().text_placeholder)
+                        .text_color(cx.theme().text_faint)
                        .child(SharedString::from(roles.join(", "))),
                )
            })
@@ -89,7 +89,7 @@ impl Sidebar {
                                                .text_color(cx.theme().text_muted)
                                                .text_center()
                                                .rounded(cx.theme().radius)
-                                                .bg(cx.theme().elevated_surface_background)
+                                                .bg(cx.theme().raised)
                                                .child(SharedString::from(
                                                    request_count.to_string(),
                                                )),
@@ -102,7 +102,7 @@ impl Sidebar {
                                )
                            })
                            .when(requests_open, |this| {
-                                this.bg(cx.theme().ghost_element_active)
+                                this.bg(cx.theme().active)
                            })
                            .on_click(cx.listener(|this, _event, _window, cx| {
                                this.toggle_requests(cx);
@@ -111,7 +111,7 @@ impl Sidebar {
                    .child(
                        NavItem::new("contacts", "Contacts", Icon::new(IconName::Book).small())
                            .when(contacts_open, |this| {
-                                this.bg(cx.theme().ghost_element_active)
+                                this.bg(cx.theme().active)
                            })
                            .on_click(cx.listener(|this, _event, window, cx| {
                                this.toggle_contacts(window, cx);
@@ -124,7 +124,7 @@ impl Sidebar {
                        .px_4()
                        .text_xs()
                        .font_semibold()
-                        .text_color(cx.theme().text_placeholder)
+                        .text_color(cx.theme().text_faint)
                        .child(list_title),
                )
            })
@@ -277,7 +277,7 @@ impl Render for Sidebar {
            .size_full()
            .relative()
            .gap_2()
-            .bg(cx.theme().surface_background)
+            .bg(cx.theme().shell)
            .when_some(current_user.as_ref(), |this, current_user| {
                this.child(title_bar_drag_handlers(
                    self.render_user(current_user, cx),
@@ -336,7 +336,7 @@ impl Render for Sidebar {
                                .text_xs()
                                .font_semibold()
                                .text_color(cx.theme().text_muted)
-                                .child(Indicator::new().small().color(cx.theme().icon_accent))
+                                .child(Indicator::new().small().color(cx.theme().accent.strong))
                                .child("Getting messages..."),
                        ),
                )
@@ -89,10 +89,10 @@ impl Sidebar {

                        Nav::new(label)
                            .label(label)
-                            .suffix(Icon::new(icon).small().text_color(cx.theme().icon_muted))
+                            .suffix(Icon::new(icon).small().text_color(cx.theme().text_faint))
                            .text_xs()
                            .font_semibold()
-                            .text_color(cx.theme().text_placeholder)
+                            .text_color(cx.theme().text_faint)
                            .on_click(cx.listener(move |this, _event, _window, cx| {
                                match section {
                                    ListSection::Pins => this.pins_open = !this.pins_open,
@@ -114,7 +114,7 @@ impl Sidebar {
                            .label(label)
                            .text_xs()
                            .font_semibold()
-                            .text_color(cx.theme().text_placeholder)
+                            .text_color(cx.theme().text_faint)
                            .into_any_element()
                    }
                    SidebarRow::Empty(text) => v_flex()
@@ -132,7 +132,7 @@ impl Sidebar {
                                .border_color(cx.theme().border)
                                .rounded(cx.theme().radius)
                                .text_xs()
-                                .text_color(cx.theme().text_placeholder)
+                                .text_color(cx.theme().text_faint)
                                .child(*text),
                        )
                        .into_any_element(),
@@ -162,7 +162,7 @@ impl Sidebar {
                                div()
                                    .font_normal()
                                    .text_xs()
-                                    .text_color(cx.theme().text_placeholder)
+                                    .text_color(cx.theme().text_faint)
                                    .child(created_at),
                            )
                            .on_click(move |_event, window, cx| {
@@ -279,7 +279,7 @@ impl Sidebar {
                                    div()
                                        .font_normal()
                                        .text_xs()
-                                        .text_color(cx.theme().text_placeholder)
+                                        .text_color(cx.theme().text_faint)
                                        .child(suffix),
                                )
                            })
@@ -353,7 +353,7 @@ impl Sidebar {
                                div()
                                    .font_normal()
                                    .text_xs()
-                                    .text_color(cx.theme().text_placeholder)
+                                    .text_color(cx.theme().text_faint)
                                    .child(detail),
                            )
                            .on_click(move |_event, window, cx| {
@@ -202,7 +202,7 @@ impl Sidebar {
                    .gap_1()
                    .w_full()
                    .rounded(cx.theme().radius)
-                    .bg(cx.theme().elevated_surface_background)
+                    .bg(cx.theme().raised)
                    .child(
                        Input::new(&self.find_input)
                            .appearance(false)
Author	SHA1	Message	Date
reya	16cd0ae903	update theme	2026-10-08 13:55:23 +07:00
reya	f54f5f35a8	Rebrand Zeron theme family as Coop	2026-10-08 09:58:23 +07:00
reya	4dfc9fd668	simplify theme crate to builtin-only registry	2026-10-08 09:25:24 +07:00
reya	af20a1b150	remove transitional scaffold roles from ResolvedColors	2026-10-08 09:00:58 +07:00
reya	02b9cc238f	add accent color and surface preferences to settings	2026-10-08 08:56:57 +07:00
reya	f4b435b160	wip	2026-10-08 08:51:11 +07:00
reya	2efb6ac5ca	wip	2026-10-08 08:42:44 +07:00
reya	069f031af9	port zeron theme domain model and builtins	2026-10-08 08:15:13 +07:00
reya	73bb7fd811	credit zeron theme as upstream source	2026-10-08 08:06:41 +07:00
reya	c59dcdbc0b	add plan	2026-10-08 07:58:56 +07:00
				`@@ -1 +0,0 @@`
				`CREDITS: [zed/theme](https://github.com/zed-industries/zed/tree/main/crates/theme)`