feat(ui): add configurable Iced themes

2026-07-28 09:33:12 +03:00
1 parent 73545520c8
commit 4bf14baea4
@@ -18,6 +18,8 @@ use crate::ui::window::plot::PlotDialogState;
 pub struct AppConfig {
    /// Input modes, backup, plugin lists, viewport background colours, …
    pub settings: UserSettings,
+    /// Iced theme selection and the six base colours used by a custom theme.
+    pub theme: UiThemeConfig,
    /// Recent-files list + retained count.
    pub recent: RecentConfig,
    /// Last selected section on the tabbed Start page.
@@ -35,6 +37,7 @@ impl Default for AppConfig {
    fn default() -> Self {
        Self {
            settings: UserSettings::default(),
+            theme: UiThemeConfig::default(),
            recent: RecentConfig::default(),
            start: StartConfig::default(),
            statusbar: StatusBarConfig::default(),
@@ -44,6 +47,136 @@ impl Default for AppConfig {
    }
 }

+#[derive(Clone, PartialEq, Serialize, Deserialize)]
+#[serde(default)]
+pub struct UiThemeConfig {
+    pub name: String,
+    pub palette: UiThemePalette,
+}
+
+impl Default for UiThemeConfig {
+    fn default() -> Self {
+        let theme = iced::Theme::Dark;
+        Self {
+            name: theme.to_string(),
+            palette: UiThemePalette::from_iced(theme.palette()),
+        }
+    }
+}
+
+impl UiThemeConfig {
+    pub fn to_iced(&self) -> iced::Theme {
+        if self.name == "Custom" {
+            iced::Theme::custom("Custom", self.palette.to_iced())
+        } else {
+            builtin_theme(&self.name).unwrap_or(iced::Theme::Dark)
+        }
+    }
+}
+
+#[derive(Clone, Copy, PartialEq, Serialize, Deserialize)]
+#[serde(default)]
+pub struct UiThemePalette {
+    pub background: [u8; 3],
+    pub text: [u8; 3],
+    pub primary: [u8; 3],
+    pub success: [u8; 3],
+    pub warning: [u8; 3],
+    pub danger: [u8; 3],
+}
+
+impl Default for UiThemePalette {
+    fn default() -> Self {
+        Self::from_iced(iced::Theme::Dark.palette())
+    }
+}
+
+impl UiThemePalette {
+    pub fn from_iced(palette: iced::theme::Palette) -> Self {
+        Self {
+            background: color_to_rgb(palette.background),
+            text: color_to_rgb(palette.text),
+            primary: color_to_rgb(palette.primary),
+            success: color_to_rgb(palette.success),
+            warning: color_to_rgb(palette.warning),
+            danger: color_to_rgb(palette.danger),
+        }
+    }
+
+    pub fn to_iced(self) -> iced::theme::Palette {
+        iced::theme::Palette {
+            background: rgb_to_color(self.background),
+            text: rgb_to_color(self.text),
+            primary: rgb_to_color(self.primary),
+            success: rgb_to_color(self.success),
+            warning: rgb_to_color(self.warning),
+            danger: rgb_to_color(self.danger),
+        }
+    }
+
+    pub fn hex_values(self) -> [String; 6] {
+        [
+            rgb_to_hex(self.background),
+            rgb_to_hex(self.text),
+            rgb_to_hex(self.primary),
+            rgb_to_hex(self.success),
+            rgb_to_hex(self.warning),
+            rgb_to_hex(self.danger),
+        ]
+    }
+
+    pub fn set_hex(&mut self, index: usize, value: &str) -> bool {
+        let Some(rgb) = parse_hex(value) else {
+            return false;
+        };
+        match index {
+            0 => self.background = rgb,
+            1 => self.text = rgb,
+            2 => self.primary = rgb,
+            3 => self.success = rgb,
+            4 => self.warning = rgb,
+            5 => self.danger = rgb,
+            _ => return false,
+        }
+        true
+    }
+}
+
+pub fn builtin_theme(name: &str) -> Option<iced::Theme> {
+    iced::Theme::ALL
+        .iter()
+        .find(|theme| theme.to_string() == name)
+        .cloned()
+}
+
+fn color_to_rgb(color: iced::Color) -> [u8; 3] {
+    [
+        (color.r * 255.0).round() as u8,
+        (color.g * 255.0).round() as u8,
+        (color.b * 255.0).round() as u8,
+    ]
+}
+
+fn rgb_to_color(rgb: [u8; 3]) -> iced::Color {
+    iced::Color::from_rgb8(rgb[0], rgb[1], rgb[2])
+}
+
+fn rgb_to_hex(rgb: [u8; 3]) -> String {
+    format!("#{:02X}{:02X}{:02X}", rgb[0], rgb[1], rgb[2])
+}
+
+fn parse_hex(value: &str) -> Option<[u8; 3]> {
+    let value = value.trim().strip_prefix('#').unwrap_or(value.trim());
+    if value.len() != 6 {
+        return None;
+    }
+    Some([
+        u8::from_str_radix(&value[0..2], 16).ok()?,
+        u8::from_str_radix(&value[2..4], 16).ok()?,
+        u8::from_str_radix(&value[4..6], 16).ok()?,
+    ])
+}
+
 #[derive(Clone, PartialEq, Serialize, Deserialize)]
 #[serde(default)]
 pub struct RecentConfig {
@@ -1,7 +1,7 @@
 mod alias;
 #[cfg(not(target_arch = "wasm32"))]
 mod automation;
-mod config;
+pub(crate) mod config;
 #[cfg(not(target_arch = "wasm32"))]
 pub use automation::{export_headless, serve};
 mod command_driver;
@@ -688,6 +688,8 @@ pub(super) struct OpenCADStudio {

    // ── Color Scheme ──────────────────────────────────────────────────────
    active_theme: Theme,
+    ui_theme: config::UiThemeConfig,
+    theme_color_inputs: [String; 6],

    // ── Keyboard Shortcut Editor ──────────────────────────────────────────
    /// User-defined function-key overrides: "F3" → command string.
@@ -1474,6 +1476,10 @@ pub enum Message {
    OptionsOpen,
    /// Set the default type/version used when first saving a new drawing.
    DefaultSaveFormatChanged(String),
+    /// Select one of Iced's built-in themes or the editable Custom theme.
+    OptionsThemeChanged(String),
+    /// Edit one of Custom theme's six base colours as #RRGGBB.
+    OptionsThemeColorChanged(usize, String),
    ClearScene,
    SetWireframe(bool),
    /// Set the active tab's render mode (one of acadrust's seven visual
@@ -2626,6 +2632,8 @@ impl OpenCADStudio {
            active_plot_style: None,
            // Color scheme (default: dark CAD-style)
            active_theme: Theme::Dark,
+            ui_theme: config::UiThemeConfig::default(),
+            theme_color_inputs: config::UiThemePalette::default().hex_values(),
            // Keyboard shortcuts
            shortcut_overrides: rustc_hash::FxHashMap::default(),
            // Command aliases (populated from ocad.pgp just after construction)
@@ -320,6 +320,7 @@ impl OpenCADStudio {
    pub(in crate::app) fn current_config(&self) -> crate::app::config::AppConfig {
        crate::app::config::AppConfig {
            settings: self.current_settings(),
+            theme: self.ui_theme.clone(),
            recent: crate::app::config::RecentConfig {
                files: self
                    .recent_files
@@ -342,6 +343,9 @@ impl OpenCADStudio {
    /// Distribute a loaded config into live app state (called once at startup).
    pub(in crate::app) fn apply_config(&mut self, cfg: crate::app::config::AppConfig) {
        self.apply_settings(&cfg.settings);
+        self.ui_theme = cfg.theme.clone();
+        self.active_theme = self.ui_theme.to_iced();
+        self.theme_color_inputs = self.ui_theme.palette.hex_values();
        self.recent_files = cfg
            .recent
            .files
@@ -3551,7 +3551,12 @@ impl OpenCADStudio {
            }

            Message::SetTheme(theme) => {
+                self.ui_theme.name = theme.to_string();
+                self.ui_theme.palette =
+                    crate::app::config::UiThemePalette::from_iced(theme.palette());
+                self.theme_color_inputs = self.ui_theme.palette.hex_values();
                self.active_theme = theme;
+                self.persist_settings_if_changed();
                Task::none()
            }

@@ -3620,6 +3625,37 @@ impl OpenCADStudio {
            Message::DefaultSaveFormatChanged(format) => {
                self.default_save_format =
                    crate::io::canonical_save_format(&format).to_string();
+                self.persist_settings_if_changed();
+                Task::none()
+            }
+
+            Message::OptionsThemeChanged(name) => {
+                self.ui_theme.name = name;
+                if let Some(theme) =
+                    crate::app::config::builtin_theme(&self.ui_theme.name)
+                {
+                    self.ui_theme.palette =
+                        crate::app::config::UiThemePalette::from_iced(theme.palette());
+                    self.theme_color_inputs = self.ui_theme.palette.hex_values();
+                    self.active_theme = theme;
+                } else {
+                    self.ui_theme.name = "Custom".to_string();
+                    self.active_theme = self.ui_theme.to_iced();
+                }
+                self.persist_settings_if_changed();
+                Task::none()
+            }
+
+            Message::OptionsThemeColorChanged(index, value) => {
+                if index >= self.theme_color_inputs.len() {
+                    return Task::none();
+                }
+                self.theme_color_inputs[index] = value.clone();
+                if self.ui_theme.palette.set_hex(index, &value) {
+                    self.ui_theme.name = "Custom".to_string();
+                    self.active_theme = self.ui_theme.to_iced();
+                    self.persist_settings_if_changed();
+                }
                Task::none()
            }

@@ -4,7 +4,7 @@ use super::super::Message;
 use iced::widget::{
    button, container, mouse_area, row,
 };
-use iced::{Background, Border, Color, Element, Theme};
+use iced::{Background, Border, Element, Theme};

 pub(super) fn viewport_controls<'a>(
    render_mode: acadrust::entities::ViewportRenderMode,
@@ -23,64 +23,58 @@ pub(super) fn viewport_controls<'a>(
        RenderModeChoice(M::FlatShadedWithEdges),
        RenderModeChoice(M::GouraudShadedWithEdges),
    ];
-    let light = Color { r: 0.85, g: 0.85, b: 0.85, a: 1.0 };
-    let accent = Color { r: 0.45, g: 0.70, b: 1.0, a: 1.0 };
-    let green = Color { r: 0.36, g: 0.80, b: 0.45, a: 1.0 };
-    let red = Color { r: 0.92, g: 0.38, b: 0.38, a: 1.0 };
-
-    // Fixed-colour icon button (close = red); colour stays on hover.
-    let tinted_btn = move |bytes: &'static [u8], color: Color, msg: Message| {
-        button(crate::ui::icons::tinted(bytes, 15.0, color))
+    let danger_btn = move |bytes: &'static [u8], msg: Message| {
+        button(crate::ui::icons::themed_danger(bytes, 15.0))
            .on_press(msg)
            .padding([4, 6])
-            .style(move |_: &Theme, status| iced::widget::button::Style {
-                background: Some(Background::Color(match status {
+            .style(move |theme: &Theme, status| iced::widget::button::Style {
+                background: matches!(
+                    status,
                    iced::widget::button::Status::Hovered
-                    | iced::widget::button::Status::Pressed => Color {
-                        r: 0.25,
-                        g: 0.25,
-                        b: 0.25,
-                        a: 0.9,
-                    },
-                    _ => Color::TRANSPARENT,
-                })),
+                        | iced::widget::button::Status::Pressed
+                )
+                .then_some(Background::Color(
+                    theme.extended_palette().danger.weak.color
+                )),
                border: Border {
                    radius: 3.0.into(),
                    ..Default::default()
                },
-                text_color: color,
+                text_color: theme.extended_palette().danger.base.color,
                ..Default::default()
            })
    };

    // Borderless icon button; an `active` toggle gets an accent tint + fill.
    let icon_btn = move |bytes: &'static [u8], active: bool, msg: Message| {
-        let tint = if active { accent } else { light };
-        button(crate::ui::icons::tinted(bytes, 15.0, tint))
+        let icon = if active {
+            crate::ui::icons::themed_primary(bytes, 15.0)
+        } else {
+            crate::ui::icons::themed(bytes, 15.0)
+        };
+        button(icon)
            .on_press(msg)
            .padding([4, 6])
-            .style(move |_: &Theme, status| iced::widget::button::Style {
-                background: Some(Background::Color(match (active, status) {
-                    (_, iced::widget::button::Status::Hovered) => Color {
-                        r: 0.25,
-                        g: 0.25,
-                        b: 0.25,
-                        a: 0.9,
-                    },
-                    (true, _) => Color {
-                        r: 0.16,
-                        g: 0.22,
-                        b: 0.32,
-                        a: 0.9,
-                    },
-                    (false, _) => Color::TRANSPARENT,
-                })),
+            .style(move |theme: &Theme, status| {
+                let palette = theme.extended_palette();
+                let pair = match (active, status) {
+                    (_, iced::widget::button::Status::Hovered) => {
+                        Some(palette.background.strong)
+                    }
+                    (true, _) => Some(palette.primary.weak),
+                    (false, _) => None,
+                };
+                iced::widget::button::Style {
+                background: pair.map(|p| Background::Color(p.color)),
                border: Border {
                    radius: 3.0.into(),
                    ..Default::default()
                },
-                text_color: tint,
+                text_color: pair
+                    .map(|p| p.text)
+                    .unwrap_or(palette.background.base.text),
                ..Default::default()
+                }
            })
    };

@@ -92,27 +86,27 @@ pub(super) fn viewport_controls<'a>(
    )
    .text_size(11)
    .padding([4, 6])
-    .style(move |_: &Theme, _| iced::widget::pick_list::Style {
-        background: Background::Color(Color::TRANSPARENT),
+    .style(move |theme: &Theme, _| {
+        let text = theme.extended_palette().background.base.text;
+        iced::widget::pick_list::Style {
+        background: Background::Color(iced::Color::TRANSPARENT),
        border: Border {
            radius: 3.0.into(),
            ..Default::default()
        },
-        text_color: light,
-        placeholder_color: light,
-        handle_color: light,
+        text_color: text,
+        placeholder_color: text.scale_alpha(0.68),
+        handle_color: text,
+        }
    });

    // Thin vertical divider between control groups.
    let sep = || {
-        container(iced::widget::Space::new().width(1.0).height(16.0)).style(|_: &Theme| {
+        container(iced::widget::Space::new().width(1.0).height(16.0)).style(|theme: &Theme| {
            iced::widget::container::Style {
-                background: Some(Background::Color(Color {
-                    r: 0.45,
-                    g: 0.45,
-                    b: 0.45,
-                    a: 0.7,
-                })),
+                background: Some(Background::Color(
+                    theme.extended_palette().background.neutral.color.scale_alpha(0.7)
+                )),
                ..Default::default()
            }
        })
@@ -139,7 +133,7 @@ pub(super) fn viewport_controls<'a>(
        // would only fire on release). Placed just left of Close.
        if tile_count > 1 {
            let drag = mouse_area(
-                container(crate::ui::icons::tinted(crate::ui::icons::MOVE, 15.0, green))
+                container(crate::ui::icons::themed_success(crate::ui::icons::MOVE, 15.0))
                    .padding([4, 6])
                    .style(|_: &Theme| iced::widget::container::Style {
                        border: Border {
@@ -155,30 +149,25 @@ pub(super) fn viewport_controls<'a>(
                .push(sep())
                .push(drag)
                .push(sep())
-                .push(tinted_btn(crate::ui::icons::CLOSE, red, Message::CloseModelViewport));
+                .push(danger_btn(crate::ui::icons::CLOSE, Message::CloseModelViewport));
        }
    }

    container(bar)
        .padding(2)
-        .style(|_: &Theme| iced::widget::container::Style {
-            background: Some(Background::Color(Color {
-                r: 0.10,
-                g: 0.10,
-                b: 0.10,
-                a: 0.75,
-            })),
+        .style(|theme: &Theme| {
+            let palette = theme.extended_palette();
+            iced::widget::container::Style {
+            background: Some(Background::Color(
+                palette.background.weak.color.scale_alpha(0.92)
+            )),
            border: Border {
-                color: Color {
-                    r: 0.35,
-                    g: 0.35,
-                    b: 0.35,
-                    a: 1.0,
-                },
+                color: palette.background.neutral.color,
                width: 1.0,
                radius: 4.0.into(),
            },
            ..Default::default()
+            }
        })
        .into()
 }
@@ -1,6 +1,6 @@
 use super::super::{Message, OpenCADStudio};
 use iced::widget::{button, column, container, pick_list, row, text, Space};
-use iced::{Background, Border, Color, Element, Fill, Theme};
+use iced::{Background, Element, Fill, Theme};

 impl OpenCADStudio {
    /// Title shown in the active modal's title bar, left of the move/close
@@ -63,9 +63,13 @@ impl OpenCADStudio {
                sized(crate::ui::window::alias_editor::view_window(&self.alias_editor_rows), 480, 520)
            }
            super::super::ModalKind::Options => sized(
-                crate::ui::window::options::view_window(&self.default_save_format),
-                480,
-                190,
+                crate::ui::window::options::view_window(
+                    &self.default_save_format,
+                    &self.ui_theme,
+                    &self.theme_color_inputs,
+                ),
+                520,
+                500,
            ),
            super::super::ModalKind::PluginManager => sized(
                crate::ui::window::plugin_manager::view_window(
@@ -712,125 +716,56 @@ impl OpenCADStudio {
    }
 }

+fn dialog_button(
+    label: &'static str,
+    message: Message,
+    style: fn(&Theme, button::Status) -> button::Style,
+) -> Element<'static, Message> {
+    button(text(label).size(13))
+        .on_press(message)
+        .style(style)
+        .padding([6, 18])
+        .into()
+}
+
+fn dialog_body_style(theme: &Theme) -> container::Style {
+    let palette = theme.extended_palette();
+    container::Style {
+        background: Some(Background::Color(palette.background.base.color)),
+        text_color: Some(palette.background.base.text),
+        ..Default::default()
+    }
+}
+
+fn dialog_muted_text_style(theme: &Theme) -> iced::widget::text::Style {
+    iced::widget::text::Style {
+        color: Some(theme.extended_palette().background.base.text.scale_alpha(0.68)),
+    }
+}
+
 /// Compact Save-As options dialog: pick the format/version and a default file
 /// name. The destination folder and overwrite confirmation come from the
 /// native OS save dialog (native) or the browser download (web) that follows.
 fn save_as_dialog_window<'a>(filename: &'a str, format: &'a str) -> Element<'a, Message> {
-    const BG: Color = Color {
-        r: 0.15,
-        g: 0.15,
-        b: 0.17,
-        a: 1.0,
-    };
-    const BORDER: Color = Color {
-        r: 0.32,
-        g: 0.32,
-        b: 0.36,
-        a: 1.0,
-    };
-    const TEXT: Color = Color {
-        r: 0.90,
-        g: 0.90,
-        b: 0.90,
-        a: 1.0,
-    };
-    const DIM: Color = Color {
-        r: 0.58,
-        g: 0.58,
-        b: 0.62,
-        a: 1.0,
-    };
-    const BTN_OK: Color = Color {
-        r: 0.20,
-        g: 0.46,
-        b: 0.80,
-        a: 1.0,
-    };
-    const BTN_HOV: Color = Color {
-        r: 0.26,
-        g: 0.55,
-        b: 0.92,
-        a: 1.0,
-    };
-    const BTN_GREY: Color = Color {
-        r: 0.26,
-        g: 0.26,
-        b: 0.29,
-        a: 1.0,
-    };
-    const BTN_GHOV: Color = Color {
-        r: 0.34,
-        g: 0.34,
-        b: 0.38,
-        a: 1.0,
-    };
-
-    let btn = |lbl: &'static str, msg: Message, base: Color, hov: Color| {
-        button(text(lbl).size(12).color(TEXT))
-            .on_press(msg)
-            .style(move |_: &Theme, st| button::Style {
-                background: Some(Background::Color(
-                    if matches!(st, button::Status::Hovered | button::Status::Pressed) {
-                        hov
-                    } else {
-                        base
-                    },
-                )),
-                text_color: TEXT,
-                border: Border {
-                    color: BORDER,
-                    width: 1.0,
-                    radius: 4.0.into(),
-                },
-                ..Default::default()
-            })
-            .padding([4, 12])
-    };
-
    let sel_fmt = crate::io::SAVE_FORMAT_OPTIONS
        .iter()
        .copied()
        .find(|&s| s == format);
-    let label = |s: &'static str| text(s).size(11).color(DIM);
+    let label = |s: &'static str| text(s).size(11).style(dialog_muted_text_style);

    let mut items: Vec<Element<'a, Message>> = Vec::new();
-    items.push(text("Save Drawing As").size(14).color(TEXT).into());
+    items.push(text("Save Drawing As").size(14).into());
    items.push(Space::new().height(12).into());

    // Web has no native file dialog, so the file name is typed here. On native
    // the OS save dialog collects the name, so this field is omitted.
    #[cfg(target_arch = "wasm32")]
    {
-        const INPUT_BG: Color = Color {
-            r: 0.10,
-            g: 0.10,
-            b: 0.12,
-            a: 1.0,
-        };
-        let input_sty =
-            |_: &Theme, _: iced::widget::text_input::Status| iced::widget::text_input::Style {
-                background: Background::Color(INPUT_BG),
-                border: Border {
-                    color: BORDER,
-                    width: 1.0,
-                    radius: 4.0.into(),
-                },
-                icon: TEXT,
-                placeholder: DIM,
-                value: TEXT,
-                selection: Color {
-                    r: 0.20,
-                    g: 0.46,
-                    b: 0.80,
-                    a: 0.45,
-                },
-            };
        items.push(
            row![
                label("File name:").width(70),
                iced::widget::text_input("drawing.dwg", filename)
                    .on_input(Message::SaveDialogFilenameChanged)
-                    .style(input_sty)
                    .size(13)
                    .padding([5, 8])
                    .width(Fill),
@@ -860,9 +795,9 @@ fn save_as_dialog_window<'a>(filename: &'a str, format: &'a str) -> Element<'a,
    items.push(
        row![
            Space::new().width(Fill),
-            btn("Save as...", Message::SaveDialogConfirm, BTN_OK, BTN_HOV),
+            dialog_button("Save as...", Message::SaveDialogConfirm, button::primary),
            Space::new().width(8),
-            btn("Cancel", Message::SaveDialogCancel, BTN_GREY, BTN_GHOV),
+            dialog_button("Cancel", Message::SaveDialogCancel, button::secondary),
        ]
        .into(),
    );
@@ -870,10 +805,7 @@ fn save_as_dialog_window<'a>(filename: &'a str, format: &'a str) -> Element<'a,
    let body = column(items).spacing(0);

    container(body)
-        .style(|_: &Theme| container::Style {
-            background: Some(Background::Color(BG)),
-            ..Default::default()
-        })
+        .style(dialog_body_style)
        .padding([14, 16])
        .width(Fill)
        .height(Fill)
@@ -881,89 +813,23 @@ fn save_as_dialog_window<'a>(filename: &'a str, format: &'a str) -> Element<'a,
 }

 fn unsaved_changes_dialog_window(name: &str) -> Element<'static, Message> {
-    const BG: Color = Color {
-        r: 0.18,
-        g: 0.18,
-        b: 0.20,
-        a: 1.0,
-    };
-    const BORDER_COL: Color = Color {
-        r: 0.38,
-        g: 0.38,
-        b: 0.42,
-        a: 1.0,
-    };
-    const TEXT_COL: Color = Color {
-        r: 0.90,
-        g: 0.90,
-        b: 0.90,
-        a: 1.0,
-    };
-    const BTN_SAVE: Color = Color {
-        r: 0.20,
-        g: 0.46,
-        b: 0.80,
-        a: 1.0,
-    };
-    const BTN_HOVER: Color = Color {
-        r: 0.26,
-        g: 0.55,
-        b: 0.92,
-        a: 1.0,
-    };
-    const BTN_DISC: Color = Color {
-        r: 0.28,
-        g: 0.28,
-        b: 0.30,
-        a: 1.0,
-    };
-    const BTN_DHOV: Color = Color {
-        r: 0.36,
-        g: 0.36,
-        b: 0.40,
-        a: 1.0,
-    };
-
    let body_text = format!("Do you want to save changes to \"{}\"?", name);

-    let btn = |label: &'static str, msg: Message, base: Color, hov: Color| {
-        button(text(label).size(13).color(TEXT_COL))
-            .on_press(msg)
-            .style(move |_: &Theme, status| button::Style {
-                background: Some(Background::Color(match status {
-                    button::Status::Hovered | button::Status::Pressed => hov,
-                    _ => base,
-                })),
-                text_color: TEXT_COL,
-                border: Border {
-                    color: BORDER_COL,
-                    width: 1.0,
-                    radius: 4.0.into(),
-                },
-                shadow: iced::Shadow::default(),
-                snap: false,
-            })
-            .padding([6, 18])
-    };
-
    container(
        column![
-            text(body_text).size(13).color(TEXT_COL),
+            text(body_text).size(13),
            iced::widget::Space::new().height(20),
            row![
-                btn("Save", Message::UnsavedDialogSave, BTN_SAVE, BTN_HOVER),
+                dialog_button("Save", Message::UnsavedDialogSave, button::primary),
                iced::widget::Space::new().width(8),
-                btn("Discard", Message::UnsavedDialogDiscard, BTN_DISC, BTN_DHOV),
+                dialog_button("Discard", Message::UnsavedDialogDiscard, button::danger),
                iced::widget::Space::new().width(8),
-                btn("Cancel", Message::UnsavedDialogCancel, BTN_DISC, BTN_DHOV),
+                dialog_button("Cancel", Message::UnsavedDialogCancel, button::secondary),
            ],
        ]
        .spacing(0),
    )
-    .style(move |_: &Theme| container::Style {
-        background: Some(Background::Color(BG)),
-        ..Default::default()
-    })
+    .style(dialog_body_style)
    .center(Fill)
    .padding([24, 28])
    .into()
@@ -971,55 +837,6 @@ fn unsaved_changes_dialog_window(name: &str) -> Element<'static, Message> {

 #[cfg(not(target_arch = "wasm32"))]
 fn file_in_use_dialog_window(path: &str, error: &str) -> Element<'static, Message> {
-    const BG: Color = Color {
-        r: 0.18,
-        g: 0.18,
-        b: 0.20,
-        a: 1.0,
-    };
-    const BORDER_COL: Color = Color {
-        r: 0.38,
-        g: 0.38,
-        b: 0.42,
-        a: 1.0,
-    };
-    const TEXT_COL: Color = Color {
-        r: 0.90,
-        g: 0.90,
-        b: 0.90,
-        a: 1.0,
-    };
-    const DIM_COL: Color = Color {
-        r: 0.62,
-        g: 0.62,
-        b: 0.66,
-        a: 1.0,
-    };
-    const BTN_PRIMARY: Color = Color {
-        r: 0.20,
-        g: 0.46,
-        b: 0.80,
-        a: 1.0,
-    };
-    const BTN_PRIMARY_HOVER: Color = Color {
-        r: 0.26,
-        g: 0.55,
-        b: 0.92,
-        a: 1.0,
-    };
-    const BTN_SECONDARY: Color = Color {
-        r: 0.28,
-        g: 0.28,
-        b: 0.30,
-        a: 1.0,
-    };
-    const BTN_SECONDARY_HOVER: Color = Color {
-        r: 0.36,
-        g: 0.36,
-        b: 0.40,
-        a: 1.0,
-    };
-
    let file_name = std::path::Path::new(path)
        .file_name()
        .map(|name| name.to_string_lossy().into_owned())
@@ -1027,70 +844,45 @@ fn file_in_use_dialog_window(path: &str, error: &str) -> Element<'static, Messag
    let heading = format!("\"{file_name}\" could not be saved.");
    let path_line = format!("Path: {path}");
    let details = format!("Details: {error}");
-    let btn = |label: &'static str, msg: Message, base: Color, hover: Color| {
-        button(text(label).size(13).color(TEXT_COL))
-            .on_press(msg)
-            .style(move |_: &Theme, status| button::Style {
-                background: Some(Background::Color(match status {
-                    button::Status::Hovered | button::Status::Pressed => hover,
-                    _ => base,
-                })),
-                text_color: TEXT_COL,
-                border: Border {
-                    color: BORDER_COL,
-                    width: 1.0,
-                    radius: 4.0.into(),
-                },
-                ..Default::default()
-            })
-            .padding([6, 18])
-    };

    container(
        column![
-            text(heading).size(14).color(TEXT_COL),
+            text(heading).size(14),
            Space::new().height(8),
            text(
                "The file is open or being used by another application. \
                 Close it there and retry, or save this drawing under a different name."
            )
            .size(13)
-            .color(TEXT_COL)
            .width(Fill),
            Space::new().height(12),
-            text(path_line).size(11).color(DIM_COL).width(Fill),
+            text(path_line).size(11).style(dialog_muted_text_style).width(Fill),
            Space::new().height(4),
-            text(details).size(11).color(DIM_COL).width(Fill),
+            text(details).size(11).style(dialog_muted_text_style).width(Fill),
            Space::new().height(18),
            row![
-                btn(
+                dialog_button(
                    "Retry",
                    Message::SaveFileInUseRetry,
-                    BTN_PRIMARY,
-                    BTN_PRIMARY_HOVER
+                    button::primary
                ),
                Space::new().width(8),
-                btn(
+                dialog_button(
                    "Save As",
                    Message::SaveFileInUseSaveAs,
-                    BTN_SECONDARY,
-                    BTN_SECONDARY_HOVER
+                    button::secondary
                ),
                Space::new().width(8),
-                btn(
+                dialog_button(
                    "Cancel",
                    Message::SaveFileInUseCancel,
-                    BTN_SECONDARY,
-                    BTN_SECONDARY_HOVER
+                    button::secondary
                ),
            ],
        ]
        .spacing(0),
    )
-    .style(|_: &Theme| container::Style {
-        background: Some(Background::Color(BG)),
-        ..Default::default()
-    })
+    .style(dialog_body_style)
    .padding([18, 20])
    .width(Fill)
    .height(Fill)
@@ -1099,142 +891,55 @@ fn file_in_use_dialog_window(path: &str, error: &str) -> Element<'static, Messag

 #[cfg(not(target_arch = "wasm32"))]
 fn external_change_dialog_window(path: &str) -> Element<'static, Message> {
-    const BG: Color = Color {
-        r: 0.18,
-        g: 0.18,
-        b: 0.20,
-        a: 1.0,
-    };
-    const BORDER_COL: Color = Color {
-        r: 0.38,
-        g: 0.38,
-        b: 0.42,
-        a: 1.0,
-    };
-    const TEXT_COL: Color = Color {
-        r: 0.90,
-        g: 0.90,
-        b: 0.90,
-        a: 1.0,
-    };
-    const DIM_COL: Color = Color {
-        r: 0.62,
-        g: 0.62,
-        b: 0.66,
-        a: 1.0,
-    };
-    const BTN_PRIMARY: Color = Color {
-        r: 0.20,
-        g: 0.46,
-        b: 0.80,
-        a: 1.0,
-    };
-    const BTN_PRIMARY_HOVER: Color = Color {
-        r: 0.26,
-        g: 0.55,
-        b: 0.92,
-        a: 1.0,
-    };
-    const BTN_SECONDARY: Color = Color {
-        r: 0.28,
-        g: 0.28,
-        b: 0.30,
-        a: 1.0,
-    };
-    const BTN_SECONDARY_HOVER: Color = Color {
-        r: 0.36,
-        g: 0.36,
-        b: 0.40,
-        a: 1.0,
-    };
-    const BTN_DANGER: Color = Color {
-        r: 0.62,
-        g: 0.31,
-        b: 0.14,
-        a: 1.0,
-    };
-    const BTN_DANGER_HOVER: Color = Color {
-        r: 0.78,
-        g: 0.39,
-        b: 0.17,
-        a: 1.0,
-    };
-
    let file_name = std::path::Path::new(path)
        .file_name()
        .map(|name| name.to_string_lossy().into_owned())
        .unwrap_or_else(|| "Drawing".to_string());
    let heading = format!("\"{file_name}\" was changed by another application.");
    let path_line = format!("Path: {path}");
-    let btn = |label: &'static str, msg: Message, base: Color, hover: Color| {
-        button(text(label).size(13).color(TEXT_COL))
-            .on_press(msg)
-            .style(move |_: &Theme, status| button::Style {
-                background: Some(Background::Color(match status {
-                    button::Status::Hovered | button::Status::Pressed => hover,
-                    _ => base,
-                })),
-                text_color: TEXT_COL,
-                border: Border {
-                    color: BORDER_COL,
-                    width: 1.0,
-                    radius: 4.0.into(),
-                },
-                ..Default::default()
-            })
-            .padding([6, 14])
-    };

    container(
        column![
-            text(heading).size(14).color(TEXT_COL),
+            text(heading).size(14),
            Space::new().height(8),
            text(
                "Saving now could destroy those external changes. Reload the disk copy, \
                 save your local work elsewhere, or explicitly overwrite it."
            )
            .size(13)
-            .color(TEXT_COL)
            .width(Fill),
            Space::new().height(12),
-            text(path_line).size(11).color(DIM_COL).width(Fill),
+            text(path_line).size(11).style(dialog_muted_text_style).width(Fill),
            Space::new().height(18),
            row![
-                btn(
+                dialog_button(
                    "Reload from Disk",
                    Message::ExternalChangeReload,
-                    BTN_PRIMARY,
-                    BTN_PRIMARY_HOVER
+                    button::primary
                ),
                Space::new().width(8),
-                btn(
+                dialog_button(
                    "Save As",
                    Message::ExternalChangeSaveAs,
-                    BTN_SECONDARY,
-                    BTN_SECONDARY_HOVER
+                    button::secondary
                ),
                Space::new().width(8),
-                btn(
+                dialog_button(
                    "Overwrite",
                    Message::ExternalChangeOverwrite,
-                    BTN_DANGER,
-                    BTN_DANGER_HOVER
+                    button::danger
                ),
                Space::new().width(8),
-                btn(
+                dialog_button(
                    "Cancel",
                    Message::ExternalChangeCancel,
-                    BTN_SECONDARY,
-                    BTN_SECONDARY_HOVER
+                    button::secondary
                ),
            ],
        ]
        .spacing(0),
    )
-    .style(|_: &Theme| container::Style {
-        background: Some(Background::Color(BG)),
-        ..Default::default()
-    })
+    .style(dialog_body_style)
    .padding([18, 20])
    .width(Fill)
    .height(Fill)
@@ -1246,58 +951,31 @@ fn external_change_dialog_window(path: &str) -> Element<'static, Message> {
 /// bytes, so saving to a different version or to DXF would drop them. Offers to
 /// save in the source version (keep them) or proceed (drop them).
 fn aec_drop_dialog_window(count: usize, target: &str, src_version: &str) -> Element<'static, Message> {
-    const BG: Color = Color { r: 0.18, g: 0.18, b: 0.20, a: 1.0 };
-    const BORDER_COL: Color = Color { r: 0.38, g: 0.38, b: 0.42, a: 1.0 };
-    const TEXT_COL: Color = Color { r: 0.90, g: 0.90, b: 0.90, a: 1.0 };
-    const BTN_SAVE: Color = Color { r: 0.20, g: 0.46, b: 0.80, a: 1.0 };
-    const BTN_HOVER: Color = Color { r: 0.26, g: 0.55, b: 0.92, a: 1.0 };
-    const BTN_DISC: Color = Color { r: 0.28, g: 0.28, b: 0.30, a: 1.0 };
-    const BTN_DHOV: Color = Color { r: 0.36, g: 0.36, b: 0.40, a: 1.0 };
-
    let body_text = format!(
        "This drawing contains {count} AEC/Civil objects that \"{target}\" \
         cannot store, so they will not be saved.\n\n\
         To keep them, save in the source version ({src_version})."
    );

-    let btn = |label: &'static str, msg: Message, base: Color, hov: Color| {
-        button(text(label).size(13).color(TEXT_COL))
-            .on_press(msg)
-            .style(move |_: &Theme, status| button::Style {
-                background: Some(Background::Color(match status {
-                    button::Status::Hovered | button::Status::Pressed => hov,
-                    _ => base,
-                })),
-                text_color: TEXT_COL,
-                border: Border {
-                    color: BORDER_COL,
-                    width: 1.0,
-                    radius: 4.0.into(),
-                },
-                shadow: iced::Shadow::default(),
-                snap: false,
-            })
-            .padding([6, 14])
-    };
-
    container(
        column![
-            text(body_text).size(13).color(TEXT_COL),
+            text(body_text).size(13),
            iced::widget::Space::new().height(20),
            row![
-                btn("Save in source version", Message::AecDropSameVersion, BTN_SAVE, BTN_HOVER),
+                dialog_button(
+                    "Save in source version",
+                    Message::AecDropSameVersion,
+                    button::primary
+                ),
                iced::widget::Space::new().width(8),
-                btn("Save anyway", Message::AecDropProceed, BTN_DISC, BTN_DHOV),
+                dialog_button("Save anyway", Message::AecDropProceed, button::warning),
                iced::widget::Space::new().width(8),
-                btn("Back", Message::AecDropBack, BTN_DISC, BTN_DHOV),
+                dialog_button("Back", Message::AecDropBack, button::secondary),
            ],
        ]
        .spacing(0),
    )
-    .style(move |_: &Theme| container::Style {
-        background: Some(Background::Color(BG)),
-        ..Default::default()
-    })
+    .style(dialog_body_style)
    .center(Fill)
    .padding([24, 28])
    .into()
@@ -1308,14 +986,6 @@ fn aec_drop_dialog_window(count: usize, target: &str, src_version: &str) -> Elem
 /// Confirm deleting layer(s) that still have objects on them. "Delete Objects"
 /// erases them and removes the layers; "Cancel" leaves everything.
 fn layer_delete_warning_window(names: &[String], count: usize) -> Element<'static, Message> {
-    const BG: Color = Color { r: 0.18, g: 0.18, b: 0.20, a: 1.0 };
-    const BORDER_COL: Color = Color { r: 0.38, g: 0.38, b: 0.42, a: 1.0 };
-    const TEXT_COL: Color = Color { r: 0.90, g: 0.90, b: 0.90, a: 1.0 };
-    const BTN_DEL: Color = Color { r: 0.72, g: 0.26, b: 0.24, a: 1.0 };
-    const BTN_DEL_HOV: Color = Color { r: 0.84, g: 0.32, b: 0.30, a: 1.0 };
-    const BTN_CANCEL: Color = Color { r: 0.28, g: 0.28, b: 0.30, a: 1.0 };
-    const BTN_CANCEL_HOV: Color = Color { r: 0.36, g: 0.36, b: 0.40, a: 1.0 };
-
    let obj = if count == 1 { "object" } else { "objects" };
    let subject = if names.len() == 1 {
        format!("Layer \"{}\"", names[0])
@@ -1328,38 +998,23 @@ fn layer_delete_warning_window(names: &[String], count: usize) -> Element<'stati
        if count == 1 { "that object" } else { "those objects" }
    );

-    let btn = |label: &'static str, msg: Message, base: Color, hov: Color| {
-        button(text(label).size(13).color(TEXT_COL))
-            .on_press(msg)
-            .style(move |_: &Theme, status| button::Style {
-                background: Some(Background::Color(match status {
-                    button::Status::Hovered | button::Status::Pressed => hov,
-                    _ => base,
-                })),
-                text_color: TEXT_COL,
-                border: Border { color: BORDER_COL, width: 1.0, radius: 4.0.into() },
-                shadow: iced::Shadow::default(),
-                snap: false,
-            })
-            .padding([6, 18])
-    };
-
    container(
        column![
-            text(body_text).size(13).color(TEXT_COL),
+            text(body_text).size(13),
            iced::widget::Space::new().height(20),
            row![
-                btn("Delete Objects", Message::LayerDeleteConfirm, BTN_DEL, BTN_DEL_HOV),
+                dialog_button(
+                    "Delete Objects",
+                    Message::LayerDeleteConfirm,
+                    button::danger
+                ),
                iced::widget::Space::new().width(8),
-                btn("Cancel", Message::CloseModal, BTN_CANCEL, BTN_CANCEL_HOV),
+                dialog_button("Cancel", Message::CloseModal, button::secondary),
            ],
        ]
        .spacing(0),
    )
-    .style(move |_: &Theme| container::Style {
-        background: Some(Background::Color(BG)),
-        ..Default::default()
-    })
+    .style(dialog_body_style)
    .center(Fill)
    .padding([24, 28])
    .into()
@@ -1370,99 +1025,30 @@ fn layer_delete_warning_window(names: &[String], count: usize) -> Element<'stati
 /// just dismisses. Either answer flips the persisted `default_assoc_prompted`
 /// flag so the dialog never reappears.
 fn default_assoc_dialog_window() -> Element<'static, Message> {
-    const BG: Color = Color {
-        r: 0.18,
-        g: 0.18,
-        b: 0.20,
-        a: 1.0,
-    };
-    const BORDER_COL: Color = Color {
-        r: 0.38,
-        g: 0.38,
-        b: 0.42,
-        a: 1.0,
-    };
-    const TEXT_COL: Color = Color {
-        r: 0.90,
-        g: 0.90,
-        b: 0.90,
-        a: 1.0,
-    };
-    const DIM_COL: Color = Color {
-        r: 0.62,
-        g: 0.62,
-        b: 0.66,
-        a: 1.0,
-    };
-    const BTN_YES: Color = Color {
-        r: 0.20,
-        g: 0.46,
-        b: 0.80,
-        a: 1.0,
-    };
-    const BTN_YHOV: Color = Color {
-        r: 0.26,
-        g: 0.55,
-        b: 0.92,
-        a: 1.0,
-    };
-    const BTN_NO: Color = Color {
-        r: 0.28,
-        g: 0.28,
-        b: 0.30,
-        a: 1.0,
-    };
-    const BTN_NHOV: Color = Color {
-        r: 0.36,
-        g: 0.36,
-        b: 0.40,
-        a: 1.0,
-    };
-
-    let btn = |label: &'static str, msg: Message, base: Color, hov: Color| {
-        button(text(label).size(13).color(TEXT_COL))
-            .on_press(msg)
-            .style(move |_: &Theme, status| button::Style {
-                background: Some(Background::Color(match status {
-                    button::Status::Hovered | button::Status::Pressed => hov,
-                    _ => base,
-                })),
-                text_color: TEXT_COL,
-                border: Border {
-                    color: BORDER_COL,
-                    width: 1.0,
-                    radius: 4.0.into(),
-                },
-                shadow: iced::Shadow::default(),
-                snap: false,
-            })
-            .padding([6, 18])
-    };
-
    container(
        column![
            text("Make Open CAD Studio your default CAD app?")
-                .size(15)
-                .color(TEXT_COL),
+                .size(15),
            iced::widget::Space::new().height(10),
            text("Open .dwg and .dxf drawings in Open CAD Studio by default. You can change this later in your system settings.")
                .size(12)
-                .color(DIM_COL),
+                .style(dialog_muted_text_style),
            iced::widget::Space::new().height(22),
            row![
                iced::widget::Space::new().width(Fill),
-                btn("Not now", Message::AssocPromptNo, BTN_NO, BTN_NHOV),
+                dialog_button("Not now", Message::AssocPromptNo, button::secondary),
                iced::widget::Space::new().width(8),
-                btn("Yes, set as default", Message::AssocPromptYes, BTN_YES, BTN_YHOV),
+                dialog_button(
+                    "Yes, set as default",
+                    Message::AssocPromptYes,
+                    button::primary
+                ),
            ]
            .align_y(iced::Center),
        ]
        .spacing(0),
    )
-    .style(move |_: &Theme| container::Style {
-        background: Some(Background::Color(BG)),
-        ..Default::default()
-    })
+    .style(dialog_body_style)
    .center(Fill)
    .padding([24, 28])
    .into()
@@ -26,19 +26,6 @@ pub(super) fn text_inline_overlay(
    ed: &super::super::text_inline::TextInlineState,
    canvas: (f32, f32),
 ) -> Element<'_, Message> {
-    const PANEL_BG: Color = Color {
-        r: 0.16,
-        g: 0.16,
-        b: 0.16,
-        a: 0.98,
-    };
-    const BORDER: Color = Color {
-        r: 0.40,
-        g: 0.40,
-        b: 0.40,
-        a: 1.0,
-    };
-
    let field = text_input("Text", &ed.value)
        .id(iced::widget::Id::new(TEXT_INLINE_ID))
        .on_input(Message::TextInlineInput)
@@ -48,14 +35,17 @@ pub(super) fn text_inline_overlay(
        .width(iced::Length::Fixed(240.0));

    let panel = container(field)
-        .style(move |_: &Theme| container::Style {
-            background: Some(Background::Color(PANEL_BG)),
+        .style(move |theme: &Theme| {
+            let palette = theme.extended_palette();
+            container::Style {
+            background: Some(Background::Color(palette.background.weak.color)),
            border: Border {
-                color: BORDER,
+                color: palette.background.neutral.color,
                width: 1.0,
                radius: 5.0.into(),
            },
            ..Default::default()
+            }
        })
        .padding(4);

@@ -195,7 +185,7 @@ impl iced::widget::canvas::Program<Message> for MTextPreview {
        &self,
        _state: &MTextPreviewState,
        renderer: &iced::Renderer,
-        _theme: &Theme,
+        theme: &Theme,
        bounds: iced::Rectangle,
        _cursor: iced::mouse::Cursor,
    ) -> Vec<iced::widget::canvas::Geometry> {
@@ -221,12 +211,7 @@ impl iced::widget::canvas::Program<Message> for MTextPreview {
                    );
                    frame.fill(
                        &rect,
-                        Color {
-                            r: 0.20,
-                            g: 0.42,
-                            b: 0.72,
-                            a: 0.45,
-                        },
+                        theme.extended_palette().primary.base.color.scale_alpha(0.45),
                    );
                }
            }
@@ -262,12 +247,7 @@ impl iced::widget::canvas::Program<Message> for MTextPreview {
            frame.stroke(
                &path,
                Stroke::default()
-                    .with_color(Color {
-                        r: 0.95,
-                        g: 0.95,
-                        b: 0.55,
-                        a: 1.0,
-                    })
+                    .with_color(theme.extended_palette().warning.base.color)
                    .with_width(1.5),
            );
        } else if collapsed {
@@ -291,12 +271,7 @@ impl iced::widget::canvas::Program<Message> for MTextPreview {
                frame.stroke(
                    &path,
                    Stroke::default()
-                        .with_color(Color {
-                            r: 0.95,
-                            g: 0.95,
-                            b: 0.55,
-                            a: 1.0,
-                        })
+                        .with_color(theme.extended_palette().warning.base.color)
                        .with_width(1.5),
                );
            }
@@ -344,59 +319,34 @@ pub(super) fn mtext_editor_overlay<'a>(
    modal_resize: iced::Vector,
 ) -> Element<'a, Message> {
    use super::super::mtext_editor::{JustifyChoice, MTextFmt, ParaAlign};
-    use iced::widget::{canvas, svg};
+    use iced::widget::canvas;

-    const BORDER: Color = Color {
-        r: 0.40,
-        g: 0.40,
-        b: 0.40,
-        a: 1.0,
-    };
-    const TEXT_COL: Color = Color {
-        r: 0.88,
-        g: 0.88,
-        b: 0.88,
-        a: 1.0,
-    };
-    const FIELD_BG: Color = Color {
-        r: 0.12,
-        g: 0.12,
-        b: 0.12,
-        a: 1.0,
-    };
-
-    let btn_style = |_: &Theme, status: button::Status| button::Style {
-        background: Some(Background::Color(match status {
-            button::Status::Hovered | button::Status::Pressed => Color {
-                r: 0.28,
-                g: 0.40,
-                b: 0.55,
-                a: 1.0,
-            },
-            _ => Color {
-                r: 0.22,
-                g: 0.22,
-                b: 0.22,
-                a: 1.0,
-            },
-        })),
-        text_color: TEXT_COL,
+    let btn_style = |theme: &Theme, status: button::Status| {
+        let palette = theme.extended_palette();
+        let pair = match status {
+            button::Status::Hovered | button::Status::Pressed => palette.background.strong,
+            _ => palette.background.weak,
+        };
+        button::Style {
+        background: Some(Background::Color(pair.color)),
+        text_color: pair.text,
        border: Border {
-            color: BORDER,
+            color: palette.background.neutral.color,
            width: 1.0,
            radius: 3.0.into(),
        },
        shadow: iced::Shadow::default(),
        snap: false,
+        }
    };
    let icon_btn = move |bytes: &'static [u8], msg: Message| -> Element<'static, Message> {
-        button(svg(svg::Handle::from_memory(bytes)).width(18).height(18))
+        button(crate::ui::icons::themed(bytes, 18.0))
            .on_press(msg)
            .padding(3)
            .style(btn_style)
            .into()
    };
-    let lbl = |s: &'static str| text(s).size(11).color(TEXT_COL);
+    let lbl = |s: &'static str| text(s).size(11);
    let small_input = |placeholder: &'static str,
                       val: &str,
                       on: fn(String) -> Message,
@@ -640,14 +590,17 @@ pub(super) fn mtext_editor_overlay<'a>(
                .width(Fill)
                .height(Fill),
        )
-            .style(move |_: &Theme| container::Style {
-                background: Some(Background::Color(FIELD_BG)),
+            .style(move |theme: &Theme| {
+                let palette = theme.extended_palette();
+                container::Style {
+                background: Some(Background::Color(palette.background.base.color)),
                border: Border {
-                    color: BORDER,
+                    color: palette.background.neutral.color,
                    width: 1.0,
                    radius: 3.0.into(),
                },
                ..Default::default()
+                }
            })
            .padding(2)
            .width(Fill)
@@ -665,8 +618,10 @@ pub(super) fn mtext_editor_overlay<'a>(
        ]
        .align_y(iced::Alignment::Center),
    )
-    .style(|_: &Theme| container::Style {
-        background: Some(Background::Color(crate::ui::style::style_manager::TB)),
+    .style(|theme: &Theme| container::Style {
+        background: Some(Background::Color(
+            theme.extended_palette().background.weak.color
+        )),
        ..Default::default()
    })
    .width(Fill)
@@ -710,50 +665,10 @@ pub(super) fn viewport_context_menu_overlay(
    last_cmds: Vec<String>,
    draworder_open: bool,
 ) -> Element<'static, Message> {
-    const MENU_BG: Color = Color {
-        r: 0.17,
-        g: 0.17,
-        b: 0.17,
-        a: 1.0,
-    };
-    const MENU_BORDER: Color = Color {
-        r: 0.35,
-        g: 0.35,
-        b: 0.35,
-        a: 1.0,
-    };
-    const ITEM_HOVER: Color = Color {
-        r: 0.25,
-        g: 0.45,
-        b: 0.70,
-        a: 1.0,
-    };
-    const TEXT_COL: Color = Color {
-        r: 0.88,
-        g: 0.88,
-        b: 0.88,
-        a: 1.0,
-    };
-    const SEP_COL: Color = Color {
-        r: 0.30,
-        g: 0.30,
-        b: 0.30,
-        a: 1.0,
-    };
-
    let item = |label: String, msg: Message| -> Element<'static, Message> {
-        button(text(label).size(12).color(TEXT_COL))
+        button(text(label).size(12))
            .on_press(msg)
-            .style(|_: &Theme, status| button::Style {
-                background: Some(Background::Color(match status {
-                    button::Status::Hovered | button::Status::Pressed => ITEM_HOVER,
-                    _ => Color::TRANSPARENT,
-                })),
-                text_color: TEXT_COL,
-                border: Border::default(),
-                shadow: iced::Shadow::default(),
-                snap: false,
-            })
+            .style(button::subtle)
            .padding([4, 12])
            .width(Fill)
            .into()
@@ -761,8 +676,10 @@ pub(super) fn viewport_context_menu_overlay(

    let sep = || -> Element<'static, Message> {
        container(iced::widget::Space::new().width(Fill).height(1))
-            .style(move |_: &Theme| container::Style {
-                background: Some(Background::Color(SEP_COL)),
+            .style(|theme: &Theme| container::Style {
+                background: Some(Background::Color(
+                    theme.extended_palette().background.weak.color,
+                )),
                ..Default::default()
            })
            .width(Fill)
@@ -773,18 +690,9 @@ pub(super) fn viewport_context_menu_overlay(

    // Indented variant for sub-menu rows (e.g. Draw Order children).
    let subitem = |label: String, msg: Message| -> Element<'static, Message> {
-        button(text(label).size(12).color(TEXT_COL))
+        button(text(label).size(12))
            .on_press(msg)
-            .style(|_: &Theme, status| button::Style {
-                background: Some(Background::Color(match status {
-                    button::Status::Hovered | button::Status::Pressed => ITEM_HOVER,
-                    _ => Color::TRANSPARENT,
-                })),
-                text_color: TEXT_COL,
-                border: Border::default(),
-                shadow: iced::Shadow::default(),
-                snap: false,
-            })
+            .style(button::subtle)
            .padding(iced::Padding {
                top: 4.0,
                right: 12.0,
@@ -827,30 +735,21 @@ pub(super) fn viewport_context_menu_overlay(
            ));
            items.push(sep());
            let do_caret = if draworder_open {
-                crate::ui::icons::arrow_down(9.0, TEXT_COL)
+                crate::ui::icons::themed_arrow_down(9.0)
            } else {
-                crate::ui::icons::arrow_right(9.0, TEXT_COL)
+                crate::ui::icons::themed_arrow_right(9.0)
            };
            items.push(
                button(
                    row![
-                        text("Draw Order").size(12).color(TEXT_COL),
+                        text("Draw Order").size(12),
                        iced::widget::Space::new().width(Fill),
                        do_caret,
                    ]
                    .align_y(iced::Center),
                )
                .on_press(Message::DrawOrderSubmenuToggle)
-                .style(|_: &Theme, status| button::Style {
-                    background: Some(Background::Color(match status {
-                        button::Status::Hovered | button::Status::Pressed => ITEM_HOVER,
-                        _ => Color::TRANSPARENT,
-                    })),
-                    text_color: TEXT_COL,
-                    border: Border::default(),
-                    shadow: iced::Shadow::default(),
-                    snap: false,
-                })
+                .style(button::subtle)
                .padding([4, 12])
                .width(Fill)
                .into(),
@@ -909,15 +808,7 @@ pub(super) fn viewport_context_menu_overlay(
    let menu_col = column(items).spacing(0).width(iced::Length::Fixed(180.0));

    let menu = container(menu_col)
-        .style(move |_: &Theme| container::Style {
-            background: Some(Background::Color(MENU_BG)),
-            border: Border {
-                color: MENU_BORDER,
-                width: 1.0,
-                radius: 4.0.into(),
-            },
-            ..Default::default()
-        })
+        .style(container::bordered_box)
        .padding([4, 0])
        .width(iced::Length::Fixed(180.0));

@@ -928,18 +819,12 @@ pub(super) fn viewport_context_menu_overlay(
 /// snap ICONS only — the names show as hover tooltips. Picking one applies
 /// that snap to just the next point pick.
 pub(super) fn snap_override_overlay(pos: iced::Point) -> Element<'static, Message> {
-    const PANEL_BG: Color = Color { r: 0.16, g: 0.16, b: 0.16, a: 0.98 };
-    const PANEL_BORDER: Color = Color { r: 0.35, g: 0.35, b: 0.35, a: 1.0 };
-    const ICON_COLOR: Color = Color { r: 0.85, g: 0.85, b: 0.85, a: 1.0 };
-    const HOVER: Color = Color { r: 0.25, g: 0.45, b: 0.70, a: 1.0 };
-    const TIP_BG: Color = Color { r: 0.10, g: 0.10, b: 0.10, a: 0.98 };
    const COLS: usize = 4;

    let cell = |snap_type: crate::snap::SnapType, label: &'static str| -> Element<'static, Message> {
-        let icon = container(crate::ui::icons::tinted::<Message>(
+        let icon = container(crate::ui::icons::themed::<Message>(
            crate::ui::icons::osnap(snap_type),
            16.0,
-            ICON_COLOR,
        ))
        .width(26)
        .height(26)
@@ -947,26 +832,33 @@ pub(super) fn snap_override_overlay(pos: iced::Point) -> Element<'static, Messag
        .align_y(iced::Center);
        let btn = button(icon)
            .on_press(Message::SnapOverridePick(snap_type))
-            .style(|_: &Theme, status| button::Style {
-                background: Some(Background::Color(match status {
-                    button::Status::Hovered | button::Status::Pressed => HOVER,
-                    _ => Color::TRANSPARENT,
-                })),
+            .style(|theme: &Theme, status| button::Style {
+                background: matches!(
+                    status,
+                    button::Status::Hovered | button::Status::Pressed
+                )
+                .then_some(Background::Color(
+                    theme.extended_palette().primary.weak.color
+                )),
                border: Border::default(),
                ..Default::default()
            })
            .padding(2);
        iced::widget::tooltip(
            btn,
-            container(text(label).size(11).color(Color::WHITE))
-                .style(|_: &Theme| container::Style {
-                    background: Some(Background::Color(TIP_BG)),
+            container(text(label).size(11))
+                .style(|theme: &Theme| {
+                    let palette = theme.extended_palette();
+                    container::Style {
+                    background: Some(Background::Color(palette.background.strong.color)),
                    border: Border {
-                        color: PANEL_BORDER,
+                        color: palette.background.neutral.color,
                        width: 1.0,
                        radius: 2.0.into(),
                    },
+                    text_color: Some(palette.background.strong.text),
                    ..Default::default()
+                    }
                })
                .padding([2, 6]),
            iced::widget::tooltip::Position::Bottom,
@@ -984,14 +876,17 @@ pub(super) fn snap_override_overlay(pos: iced::Point) -> Element<'static, Messag
    }

    let panel = container(grid)
-        .style(|_: &Theme| container::Style {
-            background: Some(Background::Color(PANEL_BG)),
+        .style(|theme: &Theme| {
+            let palette = theme.extended_palette();
+            container::Style {
+            background: Some(Background::Color(palette.background.weak.color)),
            border: Border {
-                color: PANEL_BORDER,
+                color: palette.background.neutral.color,
                width: 1.0,
                radius: 4.0.into(),
            },
            ..Default::default()
+            }
        })
        .padding(4);

@@ -1024,49 +919,6 @@ pub(super) fn qselect_overlay<'a>(
    properties: &[(String, String)],
 ) -> Element<'a, Message> {
    use iced::widget::{checkbox, pick_list};
-    const BG: Color = Color {
-        r: 0.12,
-        g: 0.12,
-        b: 0.12,
-        a: 0.98,
-    };
-    const BORDER: Color = Color {
-        r: 0.35,
-        g: 0.35,
-        b: 0.35,
-        a: 1.0,
-    };
-    const TEXT: Color = Color {
-        r: 0.88,
-        g: 0.88,
-        b: 0.88,
-        a: 1.0,
-    };
-    const BTN_OK: Color = Color {
-        r: 0.22,
-        g: 0.42,
-        b: 0.68,
-        a: 1.0,
-    };
-    const BTN_OK_HOV: Color = Color {
-        r: 0.30,
-        g: 0.52,
-        b: 0.80,
-        a: 1.0,
-    };
-    const BTN_BG: Color = Color {
-        r: 0.22,
-        g: 0.22,
-        b: 0.22,
-        a: 1.0,
-    };
-    const BTN_HOV: Color = Color {
-        r: 0.30,
-        g: 0.30,
-        b: 0.30,
-        a: 1.0,
-    };
-
    let mut type_options: Vec<String> = vec![QSELECT_ANY_TYPE.to_string()];
    type_options.extend(types.iter().cloned());

@@ -1111,28 +963,33 @@ pub(super) fn qselect_overlay<'a>(
    let label = |s: &'static str| {
        text(s)
            .size(12)
-            .color(TEXT)
            .width(iced::Length::Fixed(90.0))
    };

-    let btn = |lbl: &'static str, msg: Message, base: Color, hov: Color| {
-        button(text(lbl).size(12).color(TEXT))
+    let btn = |lbl: &'static str, msg: Message, primary: bool| {
+        button(text(lbl).size(12))
            .on_press(msg)
-            .style(move |_: &Theme, st| button::Style {
-                background: Some(Background::Color(
-                    if matches!(st, button::Status::Hovered | button::Status::Pressed) {
-                        hov
-                    } else {
-                        base
-                    },
-                )),
-                text_color: TEXT,
+            .style(move |theme: &Theme, st| {
+                let palette = theme.extended_palette();
+                let pair = match (
+                    primary,
+                    matches!(st, button::Status::Hovered | button::Status::Pressed),
+                ) {
+                    (true, true) => palette.primary.strong,
+                    (true, false) => palette.primary.base,
+                    (false, true) => palette.background.strong,
+                    (false, false) => palette.background.weak,
+                };
+                button::Style {
+                background: Some(Background::Color(pair.color)),
+                text_color: pair.text,
                border: Border {
-                    color: BORDER,
+                    color: palette.background.neutral.color,
                    width: 1.0,
                    radius: 4.0.into(),
                },
                ..Default::default()
+                }
            })
            .padding([4, 14])
    };
@@ -1143,7 +1000,7 @@ pub(super) fn qselect_overlay<'a>(
    }

    let panel_body = column![
-        text("Quick Select").size(14).color(TEXT),
+        text("Quick Select").size(14),
        Space::new().height(10),
        row![
            label("Object type:"),
@@ -1198,15 +1055,15 @@ pub(super) fn qselect_overlay<'a>(
                .on_toggle(Message::QSelectSetAppend)
                .size(14),
            Space::new().width(6),
-            text("Append to current selection").size(12).color(TEXT),
+            text("Append to current selection").size(12),
        ]
        .align_y(iced::Alignment::Center),
        Space::new().height(14),
        row![
            Space::new().width(Fill),
-            btn("Cancel", Message::QSelectClose, BTN_BG, BTN_HOV),
+            btn("Cancel", Message::QSelectClose, false),
            Space::new().width(8),
-            btn("Apply", Message::QSelectApply, BTN_OK, BTN_OK_HOV),
+            btn("Apply", Message::QSelectApply, true),
        ]
        .align_y(iced::Alignment::Center),
    ]
@@ -1215,14 +1072,17 @@ pub(super) fn qselect_overlay<'a>(
    let panel = container(panel_body)
        .padding(16)
        .width(iced::Length::Fixed(400.0))
-        .style(|_: &Theme| container::Style {
-            background: Some(Background::Color(BG)),
+        .style(|theme: &Theme| {
+            let palette = theme.extended_palette();
+            container::Style {
+            background: Some(Background::Color(palette.background.weak.color)),
            border: Border {
-                color: BORDER,
+                color: palette.background.neutral.color,
                width: 1.0,
                radius: 6.0.into(),
            },
            ..Default::default()
+            }
        });

    // Outside-click catcher — fills the whole screen, sits below the
@@ -3,7 +3,7 @@ use crate::scene::{VIEWCUBE_PX, VIEWCUBE_REGION_PX};
 use iced::widget::{
    button, container, mouse_area, pick_list, stack, Space,
 };
-use iced::{Background, Border, Color, Element, Theme};
+use iced::{Background, Border, Element, Theme};

 // ── Render-mode picker ──────────────────────────────────────────────────────

@@ -30,16 +30,14 @@ fn vc_btn<'a>(content: Element<'a, Message>, size: f32, msg: Message) -> Element
    )
    .padding(0)
    .on_press(msg)
-    .style(|_: &Theme, status| iced::widget::button::Style {
-        background: Some(Background::Color(match status {
-            iced::widget::button::Status::Hovered | iced::widget::button::Status::Pressed => Color {
-                r: 0.45,
-                g: 0.62,
-                b: 0.95,
-                a: 0.30,
-            },
-            _ => Color::TRANSPARENT,
-        })),
+    .style(|theme: &Theme, status| iced::widget::button::Style {
+        background: matches!(
+            status,
+            iced::widget::button::Status::Hovered | iced::widget::button::Status::Pressed
+        )
+        .then_some(Background::Color(
+            theme.extended_palette().primary.weak.color
+        )),
        border: Border {
            radius: 3.0.into(),
            ..Default::default()
@@ -54,12 +52,6 @@ fn vc_btn<'a>(content: Element<'a, Message>, size: f32, msg: Message) -> Element
 pub(super) fn viewcube_nav_controls<'a>() -> Element<'a, Message> {
    use crate::scene::NudgeDir;
    use crate::ui::icons;
-    let tint = Color {
-        r: 0.86,
-        g: 0.89,
-        b: 0.96,
-        a: 1.0,
-    };
    let r = VIEWCUBE_REGION_PX;
    let c = r * 0.5;
    let cube_half = VIEWCUBE_PX as f32 * 0.36; // VIEWCUBE_PX * VIEWCUBE_SCALE
@@ -94,23 +86,23 @@ pub(super) fn viewcube_nav_controls<'a>() -> Element<'a, Message> {
        vc_place(
            3.0,
            3.0,
-            vc_btn(icons::home(13.0, tint), BTN, Message::ViewCubeHome)
+            vc_btn(icons::themed_home(13.0), BTN, Message::ViewCubeHome)
        ),
        vc_place(
            rax,
            ray,
-            vc_btn(icons::undo(12.0, tint), BTN, Message::ViewCubeRoll(false))
+            vc_btn(icons::themed_undo(12.0, true), BTN, Message::ViewCubeRoll(false))
        ),
        vc_place(
            rbx,
            rby,
-            vc_btn(icons::redo(12.0, tint), BTN, Message::ViewCubeRoll(true))
+            vc_btn(icons::themed_redo(12.0, true), BTN, Message::ViewCubeRoll(true))
        ),
        vc_place(
            tux,
            tuy,
            vc_btn(
-                icons::arrow_down(8.0, tint),
+                icons::themed_arrow_down(8.0),
                TRI,
                Message::ViewCubeNudge(NudgeDir::Up)
            )
@@ -119,7 +111,7 @@ pub(super) fn viewcube_nav_controls<'a>() -> Element<'a, Message> {
            tdx,
            tdy,
            vc_btn(
-                icons::arrow_up(8.0, tint),
+                icons::themed_arrow_up(8.0),
                TRI,
                Message::ViewCubeNudge(NudgeDir::Down)
            )
@@ -128,7 +120,7 @@ pub(super) fn viewcube_nav_controls<'a>() -> Element<'a, Message> {
            tlx,
            tly,
            vc_btn(
-                icons::arrow_right(8.0, tint),
+                icons::themed_arrow_right(8.0),
                TRI,
                Message::ViewCubeNudge(NudgeDir::Left)
            )
@@ -137,7 +129,7 @@ pub(super) fn viewcube_nav_controls<'a>() -> Element<'a, Message> {
            trx,
            try_,
            vc_btn(
-                icons::arrow_left(8.0, tint),
+                icons::themed_arrow_left(8.0),
                TRI,
                Message::ViewCubeNudge(NudgeDir::Right)
            )
@@ -155,12 +147,6 @@ pub(super) const UCS_PICKER_W: f32 = 84.0;

 /// The WCS / named-UCS selector shown under the cube.
 pub(super) fn viewcube_ucs_picker<'a>(current: String, names: Vec<String>) -> Element<'a, Message> {
-    let light = Color {
-        r: 0.85,
-        g: 0.87,
-        b: 0.93,
-        a: 1.0,
-    };
    let mut options = vec!["WCS".to_string()];
    options.extend(names);
    let selected = if current.is_empty() {
@@ -174,20 +160,20 @@ pub(super) fn viewcube_ucs_picker<'a>(current: String, names: Vec<String>) -> El
        // Fixed width so the caller can centre it under the cube centre with a
        // simple half-width offset (content-sized width would drift off-centre).
        .width(iced::Length::Fixed(UCS_PICKER_W))
-        .style(move |_: &Theme, _| iced::widget::pick_list::Style {
-            background: Background::Color(Color {
-                r: 0.16,
-                g: 0.17,
-                b: 0.20,
-                a: 0.92,
-            }),
+        .style(move |theme: &Theme, _| {
+            let palette = theme.extended_palette();
+            iced::widget::pick_list::Style {
+            background: Background::Color(palette.background.weak.color),
            border: Border {
                radius: 3.0.into(),
+                color: palette.background.neutral.color,
+                width: 1.0,
                ..Default::default()
            },
-            text_color: light,
-            placeholder_color: light,
-            handle_color: light,
+            text_color: palette.background.base.text,
+            placeholder_color: palette.background.base.text.scale_alpha(0.68),
+            handle_color: palette.background.base.text,
+            }
        })
        .into()
 }