Update the theme values in real time when cycling through the presets

src/core/app.rs

@@ -3737,6 +3737,28 @@ impl App {
       }
     }
   }
+
+  /// Updates the colour RGB entries when switching through the presets in themes
+  pub fn sync_theme_color_settings(&mut self, theme: &crate::core::user_config::Theme) {
+    let mappings: [(&str, ratatui::style::Color); 11] = [
+      ("theme.active", theme.active),
+      ("theme.banner", theme.banner),
+      ("theme.hint", theme.hint),
+      ("theme.hovered", theme.hovered),
+      ("theme.selected", theme.selected),
+      ("theme.inactive", theme.inactive),
+      ("theme.text", theme.text),
+      ("theme.error_text", theme.error_text),
+      ("theme.playbar_background", theme.playbar_background),
+      ("theme.playbar_progress", theme.playbar_progress),
+      ("theme.highlighted_lyrics", theme.highlighted_lyrics),
+    ];
+    for setting in &mut self.settings_items {
+      if let Some((_, color)) = mappings.iter().find(|(id, _)| *id == setting.id) {
+        setting.value = SettingValue::Color(color_to_string(*color));
+      }
+    }
+  }
 }
 
 #[cfg(test)]

src/tui/handlers/settings.rs

@@ -403,6 +403,11 @@ fn enter_edit_mode(app: &mut App) {
       if let Some(setting_mut) = app.settings_items.get_mut(app.settings_selected_index) {
         setting_mut.value = SettingValue::Preset(next.name().to_string());
       }
+      let preview_theme = match next {
+        ThemePreset::Custom => app.user_config.custom_theme,
+        p => p.to_theme(),
+      };
+      app.sync_theme_color_settings(&preview_theme);
       return;
     }
 
@@ -439,47 +444,35 @@ fn cycle_next(current: &str, options: &[&str]) -> String {
 fn handle_preset_edit(key: Key, app: &mut App) {
   use crate::core::user_config::ThemePreset;
 
-  match key {
-    Key::Enter | Key::Char(' ') => {
-      // Cycle to next preset
-      if let Some(setting) = app.settings_items.get(app.settings_selected_index) {
-        if let SettingValue::Preset(ref preset_name) = setting.value {
-          let current = ThemePreset::from_name(preset_name);
-          let next = current.next();
-          if let Some(setting_mut) = app.settings_items.get_mut(app.settings_selected_index) {
-            setting_mut.value = SettingValue::Preset(next.name().to_string());
-          }
+  fn cycle(app: &mut App, forward: bool) {
+    if let Some(setting) = app.settings_items.get(app.settings_selected_index) {
+      if let SettingValue::Preset(ref preset_name) = setting.value {
+        let current = ThemePreset::from_name(preset_name);
+        let next = if forward { current.next() } else { current.prev() };
+        if let Some(setting_mut) = app.settings_items.get_mut(app.settings_selected_index) {
+          setting_mut.value = SettingValue::Preset(next.name().to_string());
         }
+        // Update theme item values when cycling through presets so that
+        // values can be previewed in real time
+        let preview_theme = match next {
+          ThemePreset::Custom => app.user_config.custom_theme,
+          p => p.to_theme(),
+        };
+        app.sync_theme_color_settings(&preview_theme);
       }
+    }
+  }
+
+  match key {
+    Key::Enter | Key::Char(' ') => {
+      cycle(app, true);
       app.settings_edit_mode = false;
     }
     Key::Esc => {
       app.settings_edit_mode = false;
     }
-    key if right_event(key) => {
-      // Next preset
-      if let Some(setting) = app.settings_items.get(app.settings_selected_index) {
-        if let SettingValue::Preset(ref preset_name) = setting.value {
-          let current = ThemePreset::from_name(preset_name);
-          let next = current.next();
-          if let Some(setting_mut) = app.settings_items.get_mut(app.settings_selected_index) {
-            setting_mut.value = SettingValue::Preset(next.name().to_string());
-          }
-        }
-      }
-    }
-    key if left_event(key) => {
-      // Previous preset
-      if let Some(setting) = app.settings_items.get(app.settings_selected_index) {
-        if let SettingValue::Preset(ref preset_name) = setting.value {
-          let current = ThemePreset::from_name(preset_name);
-          let prev = current.prev();
-          if let Some(setting_mut) = app.settings_items.get_mut(app.settings_selected_index) {
-            setting_mut.value = SettingValue::Preset(prev.name().to_string());
-          }
-        }
-      }
-    }
+    key if right_event(key) => cycle(app, true),
+    key if left_event(key) => cycle(app, false),
     _ => {}
   }
 }