feat(plugins): add configurable black background for ui components (#3681)

* feat(plugins): add transparent background for text and nested_list

* chore: fix formatting issue

* feat: invert flag behaviour

* feat: implement bg_black handling for table cells

* fix: order of selected and bg_black in protocol

* chore: rename from bg_black to opaque

* fix: explicit selected, if opaque and selected for text

* chore: fix formatting issues

* feat: opaque tab-bar

* feat: opaque session-manager bars

* feat: opaque ribbon in plugin manager

* feat: opaque one-line ui

* feat: opaque tab-bar in configuration plugin

2 files changed, 15 insertions, 3 deletions

diff --git a/default-plugins/configuration/src/main.rs b/default-plugins/configuration/src/main.rs
index 67c7577b..afc08bf5 100644
--- a/default-plugins/configuration/src/main.rs
+++ b/default-plugins/configuration/src/main.rs
@@ -71,6 +71,7 @@ struct State {
     ui_size: usize,
     current_screen: Screen,
     latest_mode_info: Option<ModeInfo>,
+    colors: Palette,
 }
 
 impl Default for State {
@@ -81,6 +82,7 @@ impl Default for State {
             ui_size: UI_SIZE,
             current_screen: Screen::default(),
             latest_mode_info: None,
+            colors: Palette::default(),
         }
     }
 }
@@ -114,6 +116,7 @@ impl ZellijPlugin for State {
         let mut should_render = false;
         match event {
             Event::ModeUpdate(mode_info) => {
+                self.colors = mode_info.style.colors;
                 if self.latest_mode_info.as_ref().and_then(|l| l.base_mode) != mode_info.base_mode {
                     // reset ui state
                     self.current_screen.reset_state(self.is_setup_wizard);
@@ -168,7 +171,7 @@ impl ZellijPlugin for State {
     fn render(&mut self, rows: usize, cols: usize) {
         let notification = self.notification.clone();
         if self.is_in_main_screen() {
-            top_tab_menu(cols, &self.current_screen);
+            top_tab_menu(cols, &self.current_screen, &self.colors);
         }
         match &mut self.current_screen {
             Screen::RebindLeaders(rebind_leaders_screen) => {
diff --git a/default-plugins/configuration/src/ui_components.rs b/default-plugins/configuration/src/ui_components.rs
index 3cbdf76c..d34488d4 100644
--- a/default-plugins/configuration/src/ui_components.rs
+++ b/default-plugins/configuration/src/ui_components.rs
@@ -1,7 +1,15 @@
 use crate::{Screen, WIDTH_BREAKPOINTS};
 use zellij_tile::prelude::*;
 
-pub fn top_tab_menu(cols: usize, current_screen: &Screen) {
+pub fn top_tab_menu(cols: usize, current_screen: &Screen, colors: &Palette) {
+    let background = match colors.theme_hue {
+        ThemeHue::Dark => colors.black,
+        ThemeHue::Light => colors.white,
+    };
+    let bg_color = match background {
+        PaletteColor::Rgb((r, g, b)) => format!("\u{1b}[48;2;{};{};{}m\u{1b}[0K", r, g, b),
+        PaletteColor::EightBit(color) => format!("\u{1b}[48;5;{}m\u{1b}[0K", color),
+    };
     let first_ribbon_text_long = "Rebind leader keys";
     let second_ribbon_text_long = "Change mode behavior";
     let first_ribbon_text_short = "Rebind keys";
@@ -25,8 +33,9 @@ pub fn top_tab_menu(cols: usize, current_screen: &Screen) {
     if second_ribbon_is_selected {
         second_ribbon = second_ribbon.selected();
     }
-    let switch_key = Text::new("<TAB>").color_range(3, ..);
+    let switch_key = Text::new("<TAB>").color_range(3, ..).opaque();
     print_text_with_coordinates(switch_key, 0, 0, None, None);
+    print!("\u{1b}[{};{}H{}", 0, starting_positions.0 - 1, bg_color);
     print_ribbon_with_coordinates(first_ribbon, starting_positions.0, 0, None, None);
     print_ribbon_with_coordinates(second_ribbon, starting_positions.1, 0, None, None);
 }