Add reset buttons to color editor modal for individual and bulk color resets

- Add "Reset This Color" button in color preview section for individual resets
- Add "Reset All Colors" button in modal footer for bulk palette reset
- Implement reset callbacks with database persistence via preferences API
- Reorganize color preview layout with flex column for better button placement
- Style reset buttons with appropriate warning colors and hover states
- Support both granular and comprehensive color customization workflows

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/app.rs

@@ -1,5 +1,5 @@
 use crate::components::{
-    CalendarContextMenu, CalendarManagementModal, ContextMenu, CreateEventModal, DeleteAction,
+    CalendarContextMenu, CalendarManagementModal, ColorEditorModal, ContextMenu, CreateEventModal, DeleteAction,
     EditAction, EventContextMenu, EventModal, EventCreationData,  
     MobileWarningModal, RouteHandler, Sidebar, Theme, ViewMode,
 };
@@ -15,43 +15,68 @@ use web_sys::MouseEvent;
 use yew::prelude::*;
 use yew_router::prelude::*;
 
-fn get_theme_event_colors() -> Vec<String> {
+fn get_default_event_colors() -> Vec<String> {
-    if let Some(window) = web_sys::window() {
+    vec![
-        if let Some(document) = window.document() {
+        "#3B82F6".to_string(), // Blue
-            if let Some(root) = document.document_element() {
+        "#10B981".to_string(), // Emerald
-                if let Ok(Some(computed_style)) = window.get_computed_style(&root) {
+        "#F59E0B".to_string(), // Amber
-                    if let Ok(colors_string) = computed_style.get_property_value("--event-colors") {
+        "#EF4444".to_string(), // Red
-                        if !colors_string.is_empty() {
+        "#8B5CF6".to_string(), // Violet
-                            return colors_string
+        "#06B6D4".to_string(), // Cyan
-                                .split(',')
+        "#84CC16".to_string(), // Lime
-                                .map(|color| color.trim().to_string())
+        "#F97316".to_string(), // Orange
-                                .filter(|color| !color.is_empty())
+        "#EC4899".to_string(), // Pink
-                                .collect();
+        "#6366F1".to_string(), // Indigo
+        "#14B8A6".to_string(), // Teal
+        "#F3B806".to_string(), // Yellow
+        "#8B5A2B".to_string(), // Brown
+        "#6B7280".to_string(), // Gray
+        "#DC2626".to_string(), // Dark Red
+        "#7C3AED".to_string(), // Purple
+    ]
+}
+
+fn get_event_colors_from_preferences() -> Vec<String> {
+    // Try to load custom colors from user preferences
+    if let Some(prefs) = crate::services::preferences::PreferencesService::load_cached() {
+        if let Some(colors_json) = prefs.calendar_colors {
+            // Try to parse the JSON structure
+            if let Ok(colors_data) = serde_json::from_str::<serde_json::Value>(&colors_json) {
+                // Check if it has a custom_palette field
+                if let Some(custom_palette) = colors_data.get("custom_palette") {
+                    if let Some(colors_array) = custom_palette.as_array() {
+                        let custom_colors: Vec<String> = colors_array
+                            .iter()
+                            .filter_map(|v| v.as_str().map(|s| s.to_string()))
+                            .collect();
+                        
+                        // Only use custom colors if we have a reasonable number
+                        if custom_colors.len() >= 8 {
+                            return custom_colors;
                         }
                     }
                 }
             }
         }
     }
+    
+    // Fall back to default colors
+    get_default_event_colors()
+}
 
-    vec![
+async fn save_custom_colors_to_preferences(colors: Vec<String>) -> Result<(), String> {
-        "#3B82F6".to_string(),
+    // Create the JSON structure for storing custom colors
-        "#10B981".to_string(),
+    let colors_json = serde_json::json!({
-        "#F59E0B".to_string(),
+        "custom_palette": colors
-        "#EF4444".to_string(),
+    });
-        "#8B5CF6".to_string(),
+    
-        "#06B6D4".to_string(),
+    // Convert to string for preferences storage
-        "#84CC16".to_string(),
+    let colors_string = serde_json::to_string(&colors_json)
-        "#F97316".to_string(),
+        .map_err(|e| format!("Failed to serialize colors: {}", e))?;
-        "#EC4899".to_string(),
+    
-        "#6366F1".to_string(),
+    // Update preferences via the preferences service
-        "#14B8A6".to_string(),
+    let preferences_service = crate::services::preferences::PreferencesService::new();
-        "#F3B806".to_string(),
+    preferences_service.update_preference("calendar_colors", serde_json::Value::String(colors_string)).await
-        "#8B5A2B".to_string(),
-        "#6B7280".to_string(),
-        "#DC2626".to_string(),
-        "#7C3AED".to_string(),
-    ]
 }
 
 #[function_component]
@@ -96,6 +121,8 @@ pub fn App() -> Html {
     let color_picker_open = use_state(|| -> Option<String> { None });
     let calendar_management_modal_open = use_state(|| false);
     let context_menu_open = use_state(|| false);
+    let color_editor_open = use_state(|| false);
+    let color_editor_data = use_state(|| -> Option<(usize, String)> { None }); // (index, current_color)
     let context_menu_pos = use_state(|| (0i32, 0i32));
     let context_menu_calendar_path = use_state(|| -> Option<String> { None });
     let event_context_menu_open = use_state(|| false);
@@ -155,7 +182,15 @@ pub fn App() -> Html {
         }
     });
 
-    let available_colors = use_state(|| get_theme_event_colors());
+    let available_colors = use_state(|| get_event_colors_from_preferences());
+    
+    // Refresh colors when preferences might have changed
+    let refresh_colors = {
+        let available_colors = available_colors.clone();
+        Callback::from(move |_| {
+            available_colors.set(get_event_colors_from_preferences());
+        })
+    };
 
     // Function to refresh calendar data without full page reload
     let refresh_calendar_data = {
@@ -163,12 +198,14 @@ pub fn App() -> Html {
         let auth_token = auth_token.clone();
         let external_calendars = external_calendars.clone();
         let external_calendar_events = external_calendar_events.clone();
+        let refresh_colors = refresh_colors.clone();
         
         Callback::from(move |_| {
             let user_info = user_info.clone();
             let auth_token = auth_token.clone();
             let external_calendars = external_calendars.clone();
             let external_calendar_events = external_calendar_events.clone();
+            let refresh_colors = refresh_colors.clone();
             
             wasm_bindgen_futures::spawn_local(async move {
                 // Refresh main calendar data if authenticated
@@ -211,6 +248,8 @@ pub fn App() -> Html {
                                 // Add timestamp to force re-render
                                 info.last_updated = (js_sys::Date::now() / 1000.0) as u64;
                                 user_info.set(Some(info));
+                                // Refresh colors after loading user preferences
+                                refresh_colors.emit(());
                             }
                             Err(err) => {
                                 web_sys::console::log_1(
@@ -283,6 +322,71 @@ pub fn App() -> Html {
         })
     };
 
+    let on_color_editor_open = {
+        let color_editor_open = color_editor_open.clone();
+        let color_editor_data = color_editor_data.clone();
+        Callback::from(move |(index, color): (usize, String)| {
+            color_editor_data.set(Some((index, color)));
+            color_editor_open.set(true);
+        })
+    };
+
+    let on_color_editor_close = {
+        let color_editor_open = color_editor_open.clone();
+        Callback::from(move |_| {
+            color_editor_open.set(false);
+        })
+    };
+
+    let on_color_editor_save = {
+        let available_colors = available_colors.clone();
+        let color_editor_open = color_editor_open.clone();
+        let refresh_colors = refresh_colors.clone();
+        Callback::from(move |(index, new_color): (usize, String)| {
+            // Update the colors array
+            let mut colors = (*available_colors).clone();
+            if index < colors.len() {
+                colors[index] = new_color;
+                available_colors.set(colors.clone());
+                
+                // Save to preferences asynchronously
+                let colors_for_save = colors.clone();
+                let refresh_colors = refresh_colors.clone();
+                wasm_bindgen_futures::spawn_local(async move {
+                    if let Err(e) = save_custom_colors_to_preferences(colors_for_save).await {
+                        web_sys::console::log_1(&format!("Failed to save custom colors: {}", e).into());
+                    } else {
+                        // Refresh colors to ensure UI is in sync
+                        refresh_colors.emit(());
+                    }
+                });
+            }
+            color_editor_open.set(false);
+        })
+    };
+
+    let on_color_editor_reset_all = {
+        let available_colors = available_colors.clone();
+        let refresh_colors = refresh_colors.clone();
+        Callback::from(move |_| {
+            // Reset to default colors
+            let default_colors = get_default_event_colors();
+            available_colors.set(default_colors.clone());
+            
+            // Save to preferences asynchronously
+            let colors_for_save = default_colors.clone();
+            let refresh_colors = refresh_colors.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                if let Err(e) = save_custom_colors_to_preferences(colors_for_save).await {
+                    web_sys::console::log_1(&format!("Failed to save default colors: {}", e).into());
+                } else {
+                    // Refresh colors to ensure UI is in sync
+                    refresh_colors.emit(());
+                }
+            });
+        })
+    };
+
     let on_view_change = {
         let current_view = current_view.clone();
         Callback::from(move |new_view: ViewMode| {
@@ -300,7 +404,6 @@ pub fn App() -> Html {
 
     let on_theme_change = {
         let current_theme = current_theme.clone();
-        let available_colors = available_colors.clone();
         Callback::from(move |new_theme: Theme| {
             // Save theme to localStorage
             let _ = LocalStorage::set("calendar_theme", new_theme.value());
@@ -315,8 +418,7 @@ pub fn App() -> Html {
             // Update state
             current_theme.set(new_theme);
 
-            // Update available colors after theme change
+            // Colors are now unified and don't change with themes
-            available_colors.set(get_theme_event_colors());
         })
     };
 
@@ -1386,6 +1488,7 @@ pub fn App() -> Html {
                                     on_theme_change={on_theme_change}
                                     current_style={(*current_style).clone()}
                                     on_style_change={on_style_change}
+                                    on_color_editor_open={on_color_editor_open}
                                 />
                                 <main class="app-main">
                                     <RouteHandler
@@ -1714,6 +1817,21 @@ pub fn App() -> Html {
                     is_open={*mobile_warning_open}
                     on_close={on_mobile_warning_close}
                 />
+
+                // Color editor modal
+                <ColorEditorModal
+                    is_open={*color_editor_open}
+                    current_color={color_editor_data.as_ref().map(|(_, color)| color.clone()).unwrap_or_default()}
+                    color_index={color_editor_data.as_ref().map(|(index, _)| *index).unwrap_or(0)}
+                    default_color={
+                        let default_colors = get_default_event_colors();
+                        let index = color_editor_data.as_ref().map(|(index, _)| *index).unwrap_or(0);
+                        default_colors.get(index).cloned().unwrap_or_else(|| "#3B82F6".to_string())
+                    }
+                    on_close={on_color_editor_close}
+                    on_save={on_color_editor_save}
+                    on_reset_all={on_color_editor_reset_all}
+                />
             </div>
             
             // Hidden print copy that gets shown only during printing

frontend/src/components/calendar_list_item.rs

@@ -9,6 +9,7 @@ pub struct CalendarListItemProps {
     pub on_color_change: Callback<(String, String)>, // (calendar_path, color)
     pub on_color_picker_toggle: Callback<String>,    // calendar_path
     pub available_colors: Vec<String>,
+    pub on_color_editor_open: Callback<(usize, String)>, // (index, current_color)
     pub on_context_menu: Callback<(MouseEvent, String)>, // (event, calendar_path)
     pub on_visibility_toggle: Callback<String>,      // calendar_path
 }
@@ -66,13 +67,25 @@ pub fn calendar_list_item(props: &CalendarListItemProps) -> Html {
                                                 on_color_change.emit((cal_path.clone(), color_str.clone()));
                                             });
 
+                                            let on_color_right_click = {
+                                                let on_color_editor_open = props.on_color_editor_open.clone();
+                                                let color_index = props.available_colors.iter().position(|c| c == color).unwrap_or(0);
+                                                let color_str = color.clone();
+                                                Callback::from(move |e: MouseEvent| {
+                                                    e.prevent_default();
+                                                    e.stop_propagation();
+                                                    on_color_editor_open.emit((color_index, color_str.clone()));
+                                                })
+                                            };
+
                                             let is_selected = props.calendar.color == *color;
                                             let class_name = if is_selected { "color-option selected" } else { "color-option" };
 
                                             html! {
                                                 <div class={class_name}
                                                      style={format!("background-color: {}", color)}
-                                                     onclick={on_color_select}>
+                                                     onclick={on_color_select}
+                                                     oncontextmenu={on_color_right_click}>
                                                 </div>
                                             }
                                         }).collect::<Html>()

frontend/src/components/color_editor_modal.rs

@@ -0,0 +1,176 @@
+use yew::prelude::*;
+use web_sys::HtmlInputElement;
+use wasm_bindgen::JsCast;
+
+#[derive(Properties, PartialEq)]
+pub struct ColorEditorModalProps {
+    pub is_open: bool,
+    pub current_color: String,
+    pub color_index: usize,
+    pub default_color: String, // Default color for this index
+    pub on_close: Callback<()>,
+    pub on_save: Callback<(usize, String)>, // (index, new_color)
+    pub on_reset_all: Callback<()>, // Reset all colors to defaults
+}
+
+#[function_component(ColorEditorModal)]
+pub fn color_editor_modal(props: &ColorEditorModalProps) -> Html {
+    let selected_color = use_state(|| props.current_color.clone());
+    
+    // Reset selected color when modal opens with new color
+    {
+        let selected_color = selected_color.clone();
+        use_effect_with(props.current_color.clone(), move |current_color| {
+            selected_color.set(current_color.clone());
+        });
+    }
+
+    let on_color_input = {
+        let selected_color = selected_color.clone();
+        Callback::from(move |e: InputEvent| {
+            if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
+                selected_color.set(input.value());
+            }
+        })
+    };
+
+    let on_save_click = {
+        let selected_color = selected_color.clone();
+        let on_save = props.on_save.clone();
+        let color_index = props.color_index;
+        Callback::from(move |_| {
+            on_save.emit((color_index, (*selected_color).clone()));
+        })
+    };
+
+    let on_backdrop_click = {
+        let on_close = props.on_close.clone();
+        Callback::from(move |e: MouseEvent| {
+            // Only close if clicking the backdrop, not the modal content
+            if let Some(target) = e.target() {
+                if let Some(element) = target.dyn_ref::<web_sys::Element>() {
+                    if element.class_list().contains("color-editor-backdrop") {
+                        on_close.emit(());
+                    }
+                }
+            }
+        })
+    };
+
+    if !props.is_open {
+        return html! {};
+    }
+
+    // Predefined color suggestions
+    let suggested_colors = vec![
+        "#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4",
+        "#84CC16", "#F97316", "#EC4899", "#6366F1", "#14B8A6", "#F3B806",
+        "#8B5A2B", "#6B7280", "#DC2626", "#7C3AED", "#F87171", "#34D399",
+        "#FBBF24", "#A78BFA", "#60A5FA", "#2DD4BF", "#FB7185", "#FDBA74",
+    ];
+
+    html! {
+        <div class="color-editor-backdrop" onclick={on_backdrop_click}>
+            <div class="color-editor-modal">
+                <div class="color-editor-header">
+                    <h3>{"Edit Color"}</h3>
+                    <button class="close-button" onclick={Callback::from({
+                        let on_close = props.on_close.clone();
+                        move |_| on_close.emit(())
+                    })}>
+                        {"×"}
+                    </button>
+                </div>
+                
+                <div class="color-editor-content">
+                    <div class="current-color-preview">
+                        <div 
+                            class="color-preview-large"
+                            style={format!("background-color: {}", *selected_color)}
+                        ></div>
+                        <div class="color-preview-info">
+                            <span class="color-value">{&*selected_color}</span>
+                            <button class="reset-this-color-button" onclick={{
+                                let selected_color = selected_color.clone();
+                                let default_color = props.default_color.clone();
+                                Callback::from(move |_| {
+                                    selected_color.set(default_color.clone());
+                                })
+                            }}>
+                                {"Reset This Color"}
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="color-input-section">
+                        <label for="color-picker">{"Custom Color:"}</label>
+                        <div class="color-input-group">
+                            <input 
+                                type="color" 
+                                id="color-picker"
+                                value={(*selected_color).clone()}
+                                oninput={on_color_input.clone()}
+                            />
+                            <input 
+                                type="text" 
+                                class="color-text-input"
+                                value={(*selected_color).clone()}
+                                oninput={on_color_input}
+                                placeholder="#000000"
+                            />
+                        </div>
+                    </div>
+
+                    <div class="suggested-colors-section">
+                        <label>{"Suggested Colors:"}</label>
+                        <div class="suggested-colors-grid">
+                            {
+                                suggested_colors.iter().map(|color| {
+                                    let color = color.to_string();
+                                    let selected_color = selected_color.clone();
+                                    let onclick = {
+                                        let color = color.clone();
+                                        Callback::from(move |_| {
+                                            selected_color.set(color.clone());
+                                        })
+                                    };
+                                    
+                                    html! {
+                                        <div 
+                                            class="suggested-color"
+                                            style={format!("background-color: {}", color)}
+                                            onclick={onclick}
+                                            title={color.clone()}
+                                        ></div>
+                                    }
+                                }).collect::<Html>()
+                            }
+                        </div>
+                    </div>
+                </div>
+
+                <div class="color-editor-footer">
+                    <button class="cancel-button" onclick={Callback::from({
+                        let on_close = props.on_close.clone();
+                        move |_| on_close.emit(())
+                    })}>
+                        {"Cancel"}
+                    </button>
+                    <button class="reset-all-button" onclick={Callback::from({
+                        let on_reset_all = props.on_reset_all.clone();
+                        let on_close = props.on_close.clone();
+                        move |_| {
+                            on_reset_all.emit(());
+                            on_close.emit(());
+                        }
+                    })}>
+                        {"Reset All Colors"}
+                    </button>
+                    <button class="save-button" onclick={on_save_click}>
+                        {"Save"}
+                    </button>
+                </div>
+            </div>
+        </div>
+    }
+}

frontend/src/components/mod.rs

@@ -3,6 +3,7 @@ pub mod calendar_context_menu;
 pub mod calendar_management_modal;
 pub mod calendar_header;
 pub mod calendar_list_item;
+pub mod color_editor_modal;
 pub mod context_menu;
 pub mod create_calendar_modal;
 pub mod create_event_modal;
@@ -24,6 +25,7 @@ pub use calendar_context_menu::CalendarContextMenu;
 pub use calendar_management_modal::CalendarManagementModal;
 pub use calendar_header::CalendarHeader;
 pub use calendar_list_item::CalendarListItem;
+pub use color_editor_modal::ColorEditorModal;
 pub use context_menu::ContextMenu;
 pub use create_event_modal::CreateEventModal;
 // Re-export event form types for backwards compatibility

frontend/src/components/sidebar.rs

@@ -99,6 +99,7 @@ pub struct SidebarProps {
     pub on_color_change: Callback<(String, String)>,
     pub on_color_picker_toggle: Callback<String>,
     pub available_colors: Vec<String>,
+    pub on_color_editor_open: Callback<(usize, String)>, // (index, current_color)
     pub refreshing_calendar_id: Option<i32>,
     pub on_calendar_context_menu: Callback<(MouseEvent, String)>,
     pub on_calendar_visibility_toggle: Callback<String>,
@@ -209,6 +210,7 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                                                     on_color_change={props.on_color_change.clone()}
                                                     on_color_picker_toggle={props.on_color_picker_toggle.clone()}
                                                     available_colors={props.available_colors.clone()}
+                                                    on_color_editor_open={props.on_color_editor_open.clone()}
                                                     on_context_menu={props.on_calendar_context_menu.clone()}
                                                     on_visibility_toggle={props.on_calendar_visibility_toggle.clone()}
                                                 />
@@ -289,6 +291,17 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                                                                                 let on_color_select = Callback::from(move |_: MouseEvent| {
                                                                                     on_color_change.emit((external_id.clone(), color_str.clone()));
                                                                                 });
+
+                                                                                let on_color_right_click = {
+                                                                                    let on_color_editor_open = props.on_color_editor_open.clone();
+                                                                                    let color_index = props.available_colors.iter().position(|c| c == color).unwrap_or(0);
+                                                                                    let color_str = color.clone();
+                                                                                    Callback::from(move |e: MouseEvent| {
+                                                                                        e.prevent_default();
+                                                                                        e.stop_propagation();
+                                                                                        on_color_editor_open.emit((color_index, color_str.clone()));
+                                                                                    })
+                                                                                };
                                                                                 
                                                                                 let is_selected = cal.color == *color;
                                                                                 
@@ -298,6 +311,7 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                                                                                         class={if is_selected { "color-option selected" } else { "color-option" }}
                                                                                         style={format!("background-color: {}", color)}
                                                                                         onclick={on_color_select}
+                                                                                        oncontextmenu={on_color_right_click}
                                                                                     />
                                                                                 }
                                                                             }).collect::<Html>()

frontend/styles.css

@@ -4186,3 +4186,246 @@ body {
     z-index: 1;
 }
 
+/* Color Editor Modal */
+.color-editor-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.color-editor-modal {
+    background: var(--modal-background);
+    color: var(--modal-text);
+    border-radius: var(--border-radius-medium);
+    box-shadow: var(--shadow-lg);
+    max-width: 400px;
+    width: 95%;
+    max-height: 80vh;
+    overflow-y: auto;
+    position: relative;
+    animation: modalAppear 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.color-editor-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-md);
+    border-bottom: 1px solid var(--modal-header-border);
+    background: var(--modal-header-background);
+    border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+}
+
+.color-editor-header h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.close-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: var(--spacing-xs);
+    line-height: 1;
+    border-radius: var(--border-radius-small);
+    transition: var(--transition-fast);
+}
+
+.close-button:hover {
+    background: var(--background-tertiary);
+    color: var(--text-primary);
+}
+
+.color-editor-content {
+    padding: var(--spacing-md);
+}
+
+.current-color-preview {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+    padding: var(--spacing-md);
+    background: var(--background-tertiary);
+    border-radius: var(--border-radius-medium);
+}
+
+.color-preview-large {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--border-radius-medium);
+    border: 2px solid var(--border-secondary);
+    flex-shrink: 0;
+}
+
+.color-preview-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    flex: 1;
+}
+
+.color-value {
+    font-family: monospace;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.reset-this-color-button {
+    background: var(--background-secondary);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-secondary);
+    border-radius: var(--border-radius-small);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-weight: 500;
+    transition: var(--transition-fast);
+    align-self: flex-start;
+}
+
+.reset-this-color-button:hover {
+    background: var(--background-tertiary);
+    color: var(--text-primary);
+    border-color: var(--text-primary);
+}
+
+.color-input-section {
+    margin-bottom: var(--spacing-lg);
+}
+
+.color-input-section label {
+    display: block;
+    margin-bottom: var(--spacing-sm);
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.color-input-group {
+    display: flex;
+    gap: var(--spacing-sm);
+    align-items: center;
+}
+
+.color-input-group input[type="color"] {
+    width: 48px;
+    height: 40px;
+    border: 1px solid var(--border-secondary);
+    border-radius: var(--border-radius-small);
+    cursor: pointer;
+    background: none;
+    padding: 0;
+}
+
+.color-text-input {
+    flex: 1;
+    padding: var(--spacing-sm) var(--spacing-md);
+    border: 1px solid var(--border-secondary);
+    border-radius: var(--border-radius-small);
+    font-family: monospace;
+    font-size: 0.9rem;
+    background: var(--background-secondary);
+    color: var(--text-primary);
+    transition: var(--transition-fast);
+}
+
+.color-text-input:focus {
+    outline: none;
+    border-color: var(--info-color);
+    box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.2);
+}
+
+.suggested-colors-section label {
+    display: block;
+    margin-bottom: var(--spacing-sm);
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.suggested-colors-grid {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: var(--spacing-sm);
+}
+
+.suggested-color {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--border-radius-small);
+    border: 2px solid var(--border-secondary);
+    cursor: pointer;
+    transition: var(--transition-fast);
+}
+
+.suggested-color:hover {
+    transform: scale(1.1);
+    border-color: var(--text-primary);
+}
+
+.color-editor-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+    border-top: 1px solid var(--modal-header-border);
+    background: var(--background-tertiary);
+    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
+}
+
+.cancel-button, .reset-all-button, .save-button {
+    padding: var(--spacing-sm) var(--spacing-md);
+    border: 1px solid var(--border-secondary);
+    border-radius: var(--border-radius-small);
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: var(--transition-fast);
+}
+
+.cancel-button {
+    background: var(--background-secondary);
+    color: var(--text-secondary);
+}
+
+.cancel-button:hover {
+    background: var(--background-tertiary);
+    color: var(--text-primary);
+}
+
+.reset-all-button {
+    background: var(--warning-color);
+    color: white;
+    border-color: var(--warning-color);
+    margin-left: auto;
+    margin-right: var(--spacing-sm);
+}
+
+.reset-all-button:hover {
+    background: #e0a800;
+    border-color: #e0a800;
+}
+
+.save-button {
+    background: var(--info-color);
+    color: white;
+    border-color: var(--info-color);
+}
+
+.save-button:hover {
+    background: #138496;
+    border-color: #138496;
+}
+