fix(ui): set background color for UI components according to theme (#3658)

4 files changed, 51 insertions, 27 deletions

diff --git a/zellij-server/src/ui/components/nested_list.rs b/zellij-server/src/ui/components/nested_list.rs
index 9b60d574..370131e5 100644
--- a/zellij-server/src/ui/components/nested_list.rs
+++ b/zellij-server/src/ui/components/nested_list.rs
@@ -27,22 +27,32 @@ pub fn nested_list(
             break;
         }
         let mut reset_styles_for_item = RESET_STYLES;
-        if line_item.text.selected {
-            reset_styles_for_item.background = None;
-        };
+        reset_styles_for_item.background = None;
+        reset_styles_for_item.foreground = None;
         let padding = line_item.indentation_level * 2 + 1;
         let bulletin = if line_item.indentation_level % 2 == 0 {
             "> "
         } else {
             "- "
         };
-        let text_style = reset_styles_for_item.bold(Some(AnsiCode::On));
+        let text_style = if line_item.text.selected {
+            reset_styles_for_item
+                .bold(Some(AnsiCode::On))
+                .foreground(Some(style.colors.white.into()))
+                .background(Some(style.colors.bg.into()))
+        } else {
+            reset_styles_for_item
+                .bold(Some(AnsiCode::On))
+                .foreground(Some(style.colors.white.into()))
+                .background(Some(style.colors.black.into()))
+        };
         let (mut text, text_width) = stringify_text(
             &line_item.text,
             Some(padding + bulletin.len()),
             &coordinates,
             style,
             text_style,
+            line_item.text.selected,
         );
         text = pad_line(text, max_width, padding, text_width);
         let go_to_row_instruction = coordinates
@@ -55,23 +65,19 @@ pub fn nested_list(
                     "".to_owned()
                 }
             });
-        if line_item.text.selected {
-            let selected_background = RESET_STYLES.background(Some(style.colors.bg.into()));
-            stringified.push_str(&format!(
-                "{}{}{}{:padding$}{bulletin}{}{text}{}",
-                go_to_row_instruction,
-                selected_background,
-                reset_styles_for_item,
-                " ",
-                text_style,
-                RESET_STYLES
-            ));
+        let line_style = if line_item.text.selected {
+            RESET_STYLES
+                .foreground(Some(style.colors.white.into()))
+                .background(Some(style.colors.bg.into()))
         } else {
-            stringified.push_str(&format!(
-                "{}{}{:padding$}{bulletin}{}{text}{}",
-                go_to_row_instruction, reset_styles_for_item, " ", text_style, RESET_STYLES
-            ));
-        }
+            RESET_STYLES
+                .foreground(Some(style.colors.white.into()))
+                .background(Some(style.colors.black.into()))
+        };
+        stringified.push_str(&format!(
+            "{}{}{}{:padding$}{bulletin}{}{text}{}",
+            go_to_row_instruction, line_style, reset_styles_for_item, " ", text_style, RESET_STYLES
+        ));
     }
     stringified.as_bytes().to_vec()
 }
diff --git a/zellij-server/src/ui/components/table.rs b/zellij-server/src/ui/components/table.rs
index 4842f93e..1974f2d9 100644
--- a/zellij-server/src/ui/components/table.rs
+++ b/zellij-server/src/ui/components/table.rs
@@ -40,7 +40,8 @@ pub fn table(
             }
             // here we intentionally don't pass our coordinates even if we have them, because
             // these cells have already been padded and truncated
-            let (text, _text_width) = stringify_text(&cell, None, &None, style, text_style);
+            let (text, _text_width) =
+                stringify_text(&cell, None, &None, style, text_style, cell.selected);
             stringified.push_str(&format!("{}{}{} ", text_style, text, reset_styles_for_item));
         }
         let next_row_instruction = coordinates
diff --git a/zellij-server/src/ui/components/text.rs b/zellij-server/src/ui/components/text.rs
index cb94eebe..e546c10b 100644
--- a/zellij-server/src/ui/components/text.rs
+++ b/zellij-server/src/ui/components/text.rs
@@ -12,12 +12,21 @@ use unicode_width::UnicodeWidthChar;
 use zellij_utils::errors::prelude::*;
 
 pub fn text(content: Text, style: &Style, component_coordinates: Option<Coordinates>) -> Vec<u8> {
-    let mut text_style = RESET_STYLES.bold(Some(AnsiCode::On));
+    let mut text_style = RESET_STYLES
+        .bold(Some(AnsiCode::On))
+        .foreground(Some(style.colors.white.into()))
+        .background(Some(style.colors.black.into()));
     if content.selected {
         text_style = text_style.background(Some(style.colors.bg.into()));
     }
-    let (text, _text_width) =
-        stringify_text(&content, None, &component_coordinates, style, text_style);
+    let (text, _text_width) = stringify_text(
+        &content,
+        None,
+        &component_coordinates,
+        style,
+        text_style,
+        content.selected,
+    );
     match component_coordinates {
         Some(component_coordinates) => format!("{}{}{}", component_coordinates, text_style, text)
             .as_bytes()
@@ -32,6 +41,7 @@ pub fn stringify_text(
     coordinates: &Option<Coordinates>,
     style: &Style,
     text_style: CharacterStyles,
+    is_selected: bool,
 ) -> (String, usize) {
     let mut text_width = 0;
     let mut stringified = String::new();
@@ -47,7 +57,7 @@ pub fn stringify_text(
         text_width += character_width;
         if !text.indices.is_empty() {
             let character_with_styling =
-                color_index_character(character, i, &text, style, text_style);
+                color_index_character(character, i, &text, style, text_style, is_selected);
             stringified.push_str(&character_with_styling);
         } else {
             stringified.push(character);
@@ -62,10 +72,17 @@ pub fn color_index_character(
     text: &Text,
     style: &Style,
     base_text_style: CharacterStyles,
+    is_selected: bool,
 ) -> String {
     let character_style = text
         .style_of_index(index, style)
-        .map(|foreground_style| base_text_style.foreground(Some(foreground_style.into())))
+        .map(|foreground_style| {
+            let mut character_style = base_text_style.foreground(Some(foreground_style.into()));
+            if is_selected {
+                character_style = character_style.background(Some(style.colors.bg.into()));
+            };
+            character_style
+        })
         .unwrap_or(base_text_style);
     format!("{}{}{}", character_style, character, base_text_style)
 }
diff --git a/zellij-utils/assets/themes/catppuccin.kdl b/zellij-utils/assets/themes/catppuccin.kdl
index b8e70bbb..b0087851 100644
--- a/zellij-utils/assets/themes/catppuccin.kdl
+++ b/zellij-utils/assets/themes/catppuccin.kdl
@@ -4,7 +4,7 @@
 themes {
   catppuccin-latte {
     bg "#acb0be" // Surface2
-    fg "#acb0be" // Surface2
+    fg "#5c5f77" // Subtext1
     red "#d20f39"
     green "#40a02b"
     blue "#1e66f5"