feat(ui): tweak simplified UI (#1458)

* fix(ui): tweak simplified-ui tabs

* fix(ui): tweak simplified-ui status bar

* style(fmt): rustfmt

default-plugins/compact-bar/src/line.rs

@@ -207,7 +207,7 @@ fn tab_line_prefix(
     };
     if cols.saturating_sub(prefix_text_len) >= mode_part_len {
         parts.push(LinePart {
-            part: format!("{} ", mode_part_styled_text),
+            part: format!("{}", mode_part_styled_text),
             len: mode_part_len,
         })
     }

default-plugins/compact-bar/src/main.rs

@@ -75,6 +75,7 @@ impl ZellijPlugin for State {
         }
         let mut all_tabs: Vec<LinePart> = vec![];
         let mut active_tab_index = 0;
+        let mut is_alternate_tab = false;
         for t in &mut self.tabs {
             let mut tabname = t.name.clone();
             if t.active && self.mode_info.mode == InputMode::RenameTab {
@@ -88,11 +89,13 @@ impl ZellijPlugin for State {
             let tab = tab_style(
                 tabname,
                 t.active,
+                is_alternate_tab,
                 t.is_sync_panes_active,
                 self.mode_info.style.colors,
                 self.mode_info.capabilities,
                 t.other_focused_clients.as_slice(),
             );
+            is_alternate_tab = !is_alternate_tab;
             all_tabs.push(tab);
         }
         let tab_line = tab_line(

default-plugins/compact-bar/src/tab.rs

@@ -23,14 +23,28 @@ pub fn render_tab(
     separator: &str,
     focused_clients: &[ClientId],
     active: bool,
+    is_alternate_tab: bool,
 ) -> LinePart {
-    let background_color = if active { palette.green } else { palette.fg };
+    let separator_width = separator.width();
+    let alternate_tab_color = match palette.theme_hue {
+        // TODO: only do this if we don't have the arrow capabilities
+        ThemeHue::Dark => palette.white,
+        ThemeHue::Light => palette.black,
+    };
+    let background_color = if active {
+        palette.green
+    } else if is_alternate_tab {
+        alternate_tab_color
+    } else {
+        palette.fg
+    };
     let foreground_color = match palette.theme_hue {
         ThemeHue::Dark => palette.black,
         ThemeHue::Light => palette.white,
     };
     let left_separator = style!(foreground_color, background_color).paint(separator);
-    let mut tab_text_len = text.width() + 2 + separator.width() * 2; // 2 for left and right separators, 2 for the text padding
+    let mut tab_text_len =
+        text.width() + (separator_width * 2) + separator.width() * (separator_width * 2); // 2 for left and right separators, 2 for the text padding
 
     let tab_styled_text = style!(foreground_color, background_color)
         .bold()
@@ -70,6 +84,7 @@ pub fn render_tab(
 pub fn tab_style(
     text: String,
     is_active_tab: bool,
+    is_alternate_tab: bool,
     is_sync_panes_active: bool,
     palette: Palette,
     capabilities: PluginCapabilities,
@@ -80,5 +95,18 @@ pub fn tab_style(
     if is_sync_panes_active {
         tab_text.push_str(" (Sync)");
     }
-    render_tab(tab_text, palette, separator, focused_clients, is_active_tab)
+    // we only color alternate tabs differently if we can't use the arrow fonts to separate them
+    let is_alternate_tab = if !capabilities.arrow_fonts {
+        false
+    } else {
+        is_alternate_tab
+    };
+    render_tab(
+        tab_text,
+        palette,
+        separator,
+        focused_clients,
+        is_active_tab,
+        is_alternate_tab,
+    )
 }

default-plugins/status-bar/src/first_line.rs

@@ -28,6 +28,7 @@ enum CtrlKeyAction {
 
 enum CtrlKeyMode {
     Unselected,
+    UnselectedAlternate,
     Selected,
     Disabled,
 }
@@ -85,6 +86,40 @@ fn unselected_mode_shortcut(
     }
 }
 
+fn unselected_alternate_mode_shortcut(
+    letter: char,
+    text: &str,
+    palette: ColoredElements,
+    separator: &str,
+) -> LinePart {
+    let prefix_separator = palette
+        .unselected_alternate_prefix_separator
+        .paint(separator);
+    let char_left_separator = palette.unselected_alternate_char_left_separator.paint(" <");
+    let char_shortcut = palette
+        .unselected_alternate_char_shortcut
+        .paint(letter.to_string());
+    let char_right_separator = palette.unselected_alternate_char_right_separator.paint(">");
+    let styled_text = palette
+        .unselected_alternate_styled_text
+        .paint(format!("{} ", text));
+    let suffix_separator = palette
+        .unselected_alternate_suffix_separator
+        .paint(separator);
+    LinePart {
+        part: ANSIStrings(&[
+            prefix_separator,
+            char_left_separator,
+            char_shortcut,
+            char_right_separator,
+            styled_text,
+            suffix_separator,
+        ])
+        .to_string(),
+        len: text.chars().count() + 7, // 2 for the arrows, 3 for the char separators, 1 for the character, 1 for the text padding
+    }
+}
+
 fn selected_mode_shortcut(
     letter: char,
     text: &str,
@@ -165,6 +200,28 @@ fn unselected_mode_shortcut_single_letter(
     }
 }
 
+fn unselected_alternate_mode_shortcut_single_letter(
+    letter: char,
+    palette: ColoredElements,
+    separator: &str,
+) -> LinePart {
+    let char_shortcut_text = format!(" {} ", letter);
+    let len = char_shortcut_text.chars().count() + 4; // 2 for the arrows, 2 for the padding
+    let prefix_separator = palette
+        .unselected_alternate_single_letter_prefix_separator
+        .paint(separator);
+    let char_shortcut = palette
+        .unselected_alternate_single_letter_char_shortcut
+        .paint(char_shortcut_text);
+    let suffix_separator = palette
+        .unselected_alternate_single_letter_suffix_separator
+        .paint(separator);
+    LinePart {
+        part: ANSIStrings(&[prefix_separator, char_shortcut, suffix_separator]).to_string(),
+        len,
+    }
+}
+
 fn full_ctrl_key(key: &CtrlKeyShortcut, palette: ColoredElements, separator: &str) -> LinePart {
     let full_text = key.full_text();
     let letter_shortcut = key.letter_shortcut();
@@ -175,6 +232,12 @@ fn full_ctrl_key(key: &CtrlKeyShortcut, palette: ColoredElements, separator: &st
             palette,
             separator,
         ),
+        CtrlKeyMode::UnselectedAlternate => unselected_alternate_mode_shortcut(
+            letter_shortcut,
+            &format!(" {}", full_text),
+            palette,
+            separator,
+        ),
         CtrlKeyMode::Selected => selected_mode_shortcut(
             letter_shortcut,
             &format!(" {}", full_text),
@@ -199,6 +262,9 @@ fn single_letter_ctrl_key(
         CtrlKeyMode::Unselected => {
             unselected_mode_shortcut_single_letter(letter_shortcut, palette, separator)
         }
+        CtrlKeyMode::UnselectedAlternate => {
+            unselected_alternate_mode_shortcut_single_letter(letter_shortcut, palette, separator)
+        }
         CtrlKeyMode::Selected => {
             selected_mode_shortcut_single_letter(letter_shortcut, palette, separator)
         }
@@ -237,7 +303,11 @@ fn key_indicators(
 }
 
 pub fn superkey(palette: ColoredElements, separator: &str) -> LinePart {
-    let prefix_text = " Ctrl +";
+    let prefix_text = if separator.len() == 0 {
+        " Ctrl + "
+    } else {
+        " Ctrl +"
+    };
     let prefix = palette.superkey_prefix.paint(prefix_text);
     let suffix_separator = palette.superkey_suffix_separator.paint(separator);
     LinePart {
@@ -247,7 +317,8 @@ pub fn superkey(palette: ColoredElements, separator: &str) -> LinePart {
 }
 
 pub fn ctrl_keys(help: &ModeInfo, max_len: usize, separator: &str) -> LinePart {
-    let colored_elements = color_elements(help.style.colors);
+    let supports_arrow_fonts = !help.capabilities.arrow_fonts;
+    let colored_elements = color_elements(help.style.colors, !supports_arrow_fonts);
     match &help.mode {
         InputMode::Locked => key_indicators(
             max_len,
@@ -268,13 +339,13 @@ pub fn ctrl_keys(help: &ModeInfo, max_len: usize, separator: &str) -> LinePart {
             max_len,
             &[
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Lock),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Pane),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Pane),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Tab),
                 CtrlKeyShortcut::new(CtrlKeyMode::Selected, CtrlKeyAction::Resize),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Move),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Scroll),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Scroll),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Session),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Quit),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Quit),
             ],
             colored_elements,
             separator,
@@ -285,11 +356,11 @@ pub fn ctrl_keys(help: &ModeInfo, max_len: usize, separator: &str) -> LinePart {
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Lock),
                 CtrlKeyShortcut::new(CtrlKeyMode::Selected, CtrlKeyAction::Pane),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Tab),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Resize),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Resize),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Move),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Scroll),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Scroll),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Session),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Quit),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Quit),
             ],
             colored_elements,
             separator,
@@ -298,13 +369,13 @@ pub fn ctrl_keys(help: &ModeInfo, max_len: usize, separator: &str) -> LinePart {
             max_len,
             &[
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Lock),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Pane),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Pane),
                 CtrlKeyShortcut::new(CtrlKeyMode::Selected, CtrlKeyAction::Tab),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Resize),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Resize),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Move),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Scroll),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Scroll),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Session),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Quit),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Quit),
             ],
             colored_elements,
             separator,
@@ -313,13 +384,13 @@ pub fn ctrl_keys(help: &ModeInfo, max_len: usize, separator: &str) -> LinePart {
             max_len,
             &[
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Lock),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Pane),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Pane),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Tab),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Resize),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Resize),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Move),
                 CtrlKeyShortcut::new(CtrlKeyMode::Selected, CtrlKeyAction::Scroll),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Session),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Quit),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Quit),
             ],
             colored_elements,
             separator,
@@ -328,13 +399,13 @@ pub fn ctrl_keys(help: &ModeInfo, max_len: usize, separator: &str) -> LinePart {
             max_len,
             &[
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Lock),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Pane),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Pane),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Tab),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Resize),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Resize),
                 CtrlKeyShortcut::new(CtrlKeyMode::Selected, CtrlKeyAction::Move),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Scroll),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Scroll),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Session),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Quit),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Quit),
             ],
             colored_elements,
             separator,
@@ -343,13 +414,13 @@ pub fn ctrl_keys(help: &ModeInfo, max_len: usize, separator: &str) -> LinePart {
             max_len,
             &[
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Lock),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Pane),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Pane),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Tab),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Resize),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Resize),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Move),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Scroll),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Scroll),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Session),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Quit),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Quit),
             ],
             colored_elements,
             separator,
@@ -358,13 +429,13 @@ pub fn ctrl_keys(help: &ModeInfo, max_len: usize, separator: &str) -> LinePart {
             max_len,
             &[
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Lock),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Pane),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Pane),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Tab),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Resize),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Resize),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Move),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Scroll),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Scroll),
                 CtrlKeyShortcut::new(CtrlKeyMode::Selected, CtrlKeyAction::Session),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Quit),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Quit),
             ],
             colored_elements,
             separator,
@@ -373,13 +444,13 @@ pub fn ctrl_keys(help: &ModeInfo, max_len: usize, separator: &str) -> LinePart {
             max_len,
             &[
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Lock),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Pane),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Pane),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Tab),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Resize),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Resize),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Move),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Scroll),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Scroll),
                 CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Session),
-                CtrlKeyShortcut::new(CtrlKeyMode::Unselected, CtrlKeyAction::Quit),
+                CtrlKeyShortcut::new(CtrlKeyMode::UnselectedAlternate, CtrlKeyAction::Quit),
             ],
             colored_elements,
             separator,

default-plugins/status-bar/src/main.rs

@@ -59,6 +59,13 @@ pub struct ColoredElements {
     pub unselected_char_right_separator: Style,
     pub unselected_styled_text: Style,
     pub unselected_suffix_separator: Style,
+    // unselected mode alternate color
+    pub unselected_alternate_prefix_separator: Style,
+    pub unselected_alternate_char_left_separator: Style,
+    pub unselected_alternate_char_shortcut: Style,
+    pub unselected_alternate_char_right_separator: Style,
+    pub unselected_alternate_styled_text: Style,
+    pub unselected_alternate_suffix_separator: Style,
     // disabled mode
     pub disabled_prefix_separator: Style,
     pub disabled_styled_text: Style,
@@ -71,6 +78,10 @@ pub struct ColoredElements {
     pub unselected_single_letter_prefix_separator: Style,
     pub unselected_single_letter_char_shortcut: Style,
     pub unselected_single_letter_suffix_separator: Style,
+    // unselected alternate single letter
+    pub unselected_alternate_single_letter_prefix_separator: Style,
+    pub unselected_alternate_single_letter_char_shortcut: Style,
+    pub unselected_alternate_single_letter_suffix_separator: Style,
     // superkey
     pub superkey_prefix: Style,
     pub superkey_suffix_separator: Style,
@@ -80,7 +91,7 @@ pub struct ColoredElements {
 // we need different colors from palette for the default theme
 // plus here we can add new sources in the future, like Theme
 // that can be defined in the config perhaps
-fn color_elements(palette: Palette) -> ColoredElements {
+fn color_elements(palette: Palette, different_color_alternates: bool) -> ColoredElements {
     let background = match palette.theme_hue {
         ThemeHue::Dark => palette.black,
         ThemeHue::Light => palette.white,
@@ -89,6 +100,14 @@ fn color_elements(palette: Palette) -> ColoredElements {
         ThemeHue::Dark => palette.white,
         ThemeHue::Light => palette.black,
     };
+    let alternate_background_color = if different_color_alternates {
+        match palette.theme_hue {
+            ThemeHue::Dark => palette.white,
+            ThemeHue::Light => palette.black,
+        }
+    } else {
+        palette.fg
+    };
     match palette.source {
         PaletteSource::Default => ColoredElements {
             selected_prefix_separator: style!(background, palette.green),
@@ -97,21 +116,55 @@ fn color_elements(palette: Palette) -> ColoredElements {
             selected_char_right_separator: style!(background, palette.green).bold(),
             selected_styled_text: style!(background, palette.green).bold(),
             selected_suffix_separator: style!(palette.green, background).bold(),
+
             unselected_prefix_separator: style!(background, palette.fg),
             unselected_char_left_separator: style!(background, palette.fg).bold(),
             unselected_char_shortcut: style!(palette.red, palette.fg).bold(),
             unselected_char_right_separator: style!(background, palette.fg).bold(),
             unselected_styled_text: style!(background, palette.fg).bold(),
             unselected_suffix_separator: style!(palette.fg, background),
+
+            unselected_alternate_prefix_separator: style!(background, alternate_background_color),
+            unselected_alternate_char_left_separator: style!(
+                background,
+                alternate_background_color
+            )
+            .bold(),
+            unselected_alternate_char_shortcut: style!(palette.red, alternate_background_color)
+                .bold(),
+            unselected_alternate_char_right_separator: style!(
+                background,
+                alternate_background_color
+            )
+            .bold(),
+            unselected_alternate_styled_text: style!(background, alternate_background_color).bold(),
+            unselected_alternate_suffix_separator: style!(alternate_background_color, background),
+
             disabled_prefix_separator: style!(background, palette.fg),
             disabled_styled_text: style!(background, palette.fg).dimmed().italic(),
             disabled_suffix_separator: style!(palette.fg, background),
             selected_single_letter_prefix_separator: style!(background, palette.green),
             selected_single_letter_char_shortcut: style!(palette.red, palette.green).bold(),
             selected_single_letter_suffix_separator: style!(palette.green, background),
+
             unselected_single_letter_prefix_separator: style!(background, palette.fg),
             unselected_single_letter_char_shortcut: style!(palette.red, palette.fg).bold().dimmed(),
             unselected_single_letter_suffix_separator: style!(palette.fg, background),
+
+            unselected_alternate_single_letter_prefix_separator: style!(
+                palette.fg,
+                alternate_background_color
+            ),
+            unselected_alternate_single_letter_char_shortcut: style!(
+                palette.red,
+                alternate_background_color
+            )
+            .bold(),
+            unselected_alternate_single_letter_suffix_separator: style!(
+                palette.fg,
+                alternate_background_color
+            ),
+
             superkey_prefix: style!(foreground, background).bold(),
             superkey_suffix_separator: style!(background, background),
         },
@@ -128,15 +181,48 @@ fn color_elements(palette: Palette) -> ColoredElements {
             unselected_char_right_separator: style!(background, palette.fg).bold(),
             unselected_styled_text: style!(background, palette.fg).bold(),
             unselected_suffix_separator: style!(palette.fg, background),
+
+            unselected_alternate_prefix_separator: style!(background, alternate_background_color),
+            unselected_alternate_char_left_separator: style!(
+                background,
+                alternate_background_color
+            )
+            .bold(),
+            unselected_alternate_char_shortcut: style!(palette.red, alternate_background_color)
+                .bold(),
+            unselected_alternate_char_right_separator: style!(
+                background,
+                alternate_background_color
+            )
+            .bold(),
+            unselected_alternate_styled_text: style!(background, alternate_background_color).bold(),
+            unselected_alternate_suffix_separator: style!(alternate_background_color, background),
+
             disabled_prefix_separator: style!(background, palette.fg),
             disabled_styled_text: style!(background, palette.fg).dimmed(),
             disabled_suffix_separator: style!(palette.fg, background),
             selected_single_letter_prefix_separator: style!(palette.fg, palette.green),
             selected_single_letter_char_shortcut: style!(palette.red, palette.green).bold(),
             selected_single_letter_suffix_separator: style!(palette.green, palette.fg),
+
             unselected_single_letter_prefix_separator: style!(palette.fg, background),
             unselected_single_letter_char_shortcut: style!(palette.red, palette.fg).bold(),
             unselected_single_letter_suffix_separator: style!(palette.fg, background),
+
+            unselected_alternate_single_letter_prefix_separator: style!(
+                palette.fg,
+                alternate_background_color
+            ),
+            unselected_alternate_single_letter_char_shortcut: style!(
+                palette.red,
+                alternate_background_color
+            )
+            .bold(),
+            unselected_alternate_single_letter_suffix_separator: style!(
+                palette.fg,
+                alternate_background_color
+            ),
+
             superkey_prefix: style!(background, palette.fg).bold(),
             superkey_suffix_separator: style!(palette.fg, background),
         },
@@ -180,13 +266,14 @@ impl ZellijPlugin for State {
     }
 
     fn render(&mut self, _rows: usize, cols: usize) {
-        let separator = if !self.mode_info.capabilities.arrow_fonts {
+        let supports_arrow_fonts = !self.mode_info.capabilities.arrow_fonts;
+        let separator = if supports_arrow_fonts {
             ARROW_SEPARATOR
         } else {
             ""
         };
 
-        let colored_elements = color_elements(self.mode_info.style.colors);
+        let colored_elements = color_elements(self.mode_info.style.colors, !supports_arrow_fonts);
         let superkey = superkey(colored_elements, separator);
         let ctrl_keys = ctrl_keys(
             &self.mode_info,

default-plugins/tab-bar/src/main.rs

@@ -75,6 +75,7 @@ impl ZellijPlugin for State {
         }
         let mut all_tabs: Vec<LinePart> = vec![];
         let mut active_tab_index = 0;
+        let mut is_alternate_tab = false;
         for t in &mut self.tabs {
             let mut tabname = t.name.clone();
             if t.active && self.mode_info.mode == InputMode::RenameTab {
@@ -88,11 +89,13 @@ impl ZellijPlugin for State {
             let tab = tab_style(
                 tabname,
                 t.active,
+                is_alternate_tab,
                 t.is_sync_panes_active,
                 self.mode_info.style.colors,
                 self.mode_info.capabilities,
                 t.other_focused_clients.as_slice(),
             );
+            is_alternate_tab = !is_alternate_tab;
             all_tabs.push(tab);
         }
         let tab_line = tab_line(

default-plugins/tab-bar/src/tab.rs

@@ -23,15 +23,28 @@ pub fn render_tab(
     separator: &str,
     focused_clients: &[ClientId],
     active: bool,
+    is_alternate_tab: bool,
 ) -> LinePart {
-    let background_color = if active { palette.green } else { palette.fg };
+    let separator_width = separator.width();
+    let alternate_tab_color = match palette.theme_hue {
+        // TODO: only do this if we don't have the arrow capabilities
+        ThemeHue::Dark => palette.white,
+        ThemeHue::Light => palette.black,
+    };
+    let background_color = if active {
+        palette.green
+    } else if is_alternate_tab {
+        alternate_tab_color
+    } else {
+        palette.fg
+    };
     let foreground_color = match palette.theme_hue {
         ThemeHue::Dark => palette.black,
         ThemeHue::Light => palette.white,
     };
     let left_separator = style!(foreground_color, background_color).paint(separator);
-    let mut tab_text_len = text.width() + 2 + separator.width() * 2; // 2 for left and right separators, 2 for the text padding
+    let mut tab_text_len =
-
+        text.width() + (separator_width * 2) + separator_width * (separator_width * 2); // 2 for left and right separators, 2 for the text padding
     let tab_styled_text = style!(foreground_color, background_color)
         .bold()
         .paint(format!(" {} ", text));
@@ -70,6 +83,7 @@ pub fn render_tab(
 pub fn tab_style(
     text: String,
     is_active_tab: bool,
+    is_alternate_tab: bool,
     is_sync_panes_active: bool,
     palette: Palette,
     capabilities: PluginCapabilities,
@@ -80,5 +94,18 @@ pub fn tab_style(
     if is_sync_panes_active {
         tab_text.push_str(" (Sync)");
     }
-    render_tab(tab_text, palette, separator, focused_clients, is_active_tab)
+    // we only color alternate tabs differently if we can't use the arrow fonts to separate them
+    let is_alternate_tab = if !capabilities.arrow_fonts {
+        false
+    } else {
+        is_alternate_tab
+    };
+    render_tab(
+        tab_text,
+        palette,
+        separator,
+        focused_clients,
+        is_active_tab,
+        is_alternate_tab,
+    )
 }