Improve theme usage + add default ones (#1274)

* Remove gray from theme config and improve colors for dark themes

* improve theme usage

* Add new themes and minor fixes

* improve tokyo-night theme according to new changes

* Fix formatting

* change default black colour

* docs(CHANGELOG): #1274 improve themes

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased]
+* (BREAKING CHANGE) Feature: Improve theme usage and add default themes. Remove gray color from themes. (https://github.com/zellij-org/zellij/pull/1274)
 
 ## [0.27.0] - 2022-03-31
 * Fix: feature `disable_automatic_asset_installation` (https://github.com/zellij-org/zellij/pull/1226)

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

@@ -81,56 +81,64 @@ pub struct ColoredElements {
 // 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 {
+    let background = match palette.theme_hue {
+        ThemeHue::Dark => palette.black,
+        ThemeHue::Light => palette.white,
+    };
+    let foreground = match palette.theme_hue {
+        ThemeHue::Dark => palette.white,
+        ThemeHue::Light => palette.black,
+    };
     match palette.source {
         PaletteSource::Default => ColoredElements {
-            selected_prefix_separator: style!(palette.gray, palette.green),
+            selected_prefix_separator: style!(background, palette.green),
-            selected_char_left_separator: style!(palette.black, palette.green).bold(),
+            selected_char_left_separator: style!(background, palette.green).bold(),
             selected_char_shortcut: style!(palette.red, palette.green).bold(),
-            selected_char_right_separator: style!(palette.black, palette.green).bold(),
+            selected_char_right_separator: style!(background, palette.green).bold(),
-            selected_styled_text: style!(palette.black, palette.green).bold(),
+            selected_styled_text: style!(background, palette.green).bold(),
-            selected_suffix_separator: style!(palette.green, palette.gray).bold(),
+            selected_suffix_separator: style!(palette.green, background).bold(),
-            unselected_prefix_separator: style!(palette.gray, palette.fg),
+            unselected_prefix_separator: style!(background, palette.fg),
-            unselected_char_left_separator: style!(palette.black, palette.fg).bold(),
+            unselected_char_left_separator: style!(background, palette.fg).bold(),
             unselected_char_shortcut: style!(palette.red, palette.fg).bold(),
-            unselected_char_right_separator: style!(palette.black, palette.fg).bold(),
+            unselected_char_right_separator: style!(background, palette.fg).bold(),
-            unselected_styled_text: style!(palette.black, palette.fg).bold(),
+            unselected_styled_text: style!(background, palette.fg).bold(),
-            unselected_suffix_separator: style!(palette.fg, palette.gray),
+            unselected_suffix_separator: style!(palette.fg, background),
-            disabled_prefix_separator: style!(palette.gray, palette.fg),
+            disabled_prefix_separator: style!(background, palette.fg),
-            disabled_styled_text: style!(palette.gray, palette.fg).dimmed(),
+            disabled_styled_text: style!(background, palette.fg).dimmed(),
-            disabled_suffix_separator: style!(palette.fg, palette.gray),
+            disabled_suffix_separator: style!(palette.fg, background),
-            selected_single_letter_prefix_separator: style!(palette.gray, palette.green),
+            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, palette.gray),
+            selected_single_letter_suffix_separator: style!(palette.green, background),
-            unselected_single_letter_prefix_separator: style!(palette.gray, palette.fg),
+            unselected_single_letter_prefix_separator: style!(background, palette.fg),
-            unselected_single_letter_char_shortcut: style!(palette.red, palette.fg).bold(),
+            unselected_single_letter_char_shortcut: style!(palette.red, palette.fg).bold().dimmed(),
-            unselected_single_letter_suffix_separator: style!(palette.fg, palette.gray),
+            unselected_single_letter_suffix_separator: style!(palette.fg, background),
-            superkey_prefix: style!(palette.white, palette.gray).bold(),
+            superkey_prefix: style!(foreground, background).bold(),
-            superkey_suffix_separator: style!(palette.gray, palette.gray),
+            superkey_suffix_separator: style!(background, background),
         },
         PaletteSource::Xresources => ColoredElements {
-            selected_prefix_separator: style!(palette.gray, palette.green),
+            selected_prefix_separator: style!(background, palette.green),
             selected_char_left_separator: style!(palette.fg, palette.green).bold(),
             selected_char_shortcut: style!(palette.red, palette.green).bold(),
             selected_char_right_separator: style!(palette.fg, palette.green).bold(),
-            selected_styled_text: style!(palette.gray, palette.green).bold(),
+            selected_styled_text: style!(background, palette.green).bold(),
-            selected_suffix_separator: style!(palette.green, palette.gray).bold(),
+            selected_suffix_separator: style!(palette.green, background).bold(),
-            unselected_prefix_separator: style!(palette.gray, palette.fg),
+            unselected_prefix_separator: style!(background, palette.fg),
-            unselected_char_left_separator: style!(palette.gray, palette.fg).bold(),
+            unselected_char_left_separator: style!(background, palette.fg).bold(),
             unselected_char_shortcut: style!(palette.red, palette.fg).bold(),
-            unselected_char_right_separator: style!(palette.gray, palette.fg).bold(),
+            unselected_char_right_separator: style!(background, palette.fg).bold(),
-            unselected_styled_text: style!(palette.gray, palette.fg).bold(),
+            unselected_styled_text: style!(background, palette.fg).bold(),
-            unselected_suffix_separator: style!(palette.fg, palette.gray),
+            unselected_suffix_separator: style!(palette.fg, background),
-            disabled_prefix_separator: style!(palette.gray, palette.fg),
+            disabled_prefix_separator: style!(background, palette.fg),
-            disabled_styled_text: style!(palette.gray, palette.fg).dimmed(),
+            disabled_styled_text: style!(background, palette.fg).dimmed(),
-            disabled_suffix_separator: style!(palette.fg, palette.gray),
+            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, palette.gray),
+            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, palette.gray),
+            unselected_single_letter_suffix_separator: style!(palette.fg, background),
-            superkey_prefix: style!(palette.gray, palette.fg).bold(),
+            superkey_prefix: style!(background, palette.fg).bold(),
-            superkey_suffix_separator: style!(palette.fg, palette.gray),
+            superkey_suffix_separator: style!(palette.fg, background),
         },
     }
 }
@@ -189,9 +197,14 @@ impl ZellijPlugin for State {
         let first_line = format!("{}{}", superkey, ctrl_keys);
         let second_line = self.second_line(cols);
 
-        // [48;5;238m is gray background, [0K is so that it fills the rest of the line
+        let background = match self.mode_info.style.colors.theme_hue {
+            ThemeHue::Dark => self.mode_info.style.colors.black,
+            ThemeHue::Light => self.mode_info.style.colors.white,
+        };
+
+        // [48;5;238m is white background, [0K is so that it fills the rest of the line
         // [m is background reset, [0K is so that it clears the rest of the line
-        match self.mode_info.style.colors.gray {
+        match background {
             PaletteColor::Rgb((r, g, b)) => {
                 println!("{}\u{1b}[48;2;{};{};{}m\u{1b}[0K", first_line, r, g, b);
             }

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

@@ -4,6 +4,7 @@ use ansi_term::{
     Style,
 };
 use zellij_tile::prelude::*;
+use zellij_tile_utils::palette_match;
 
 use crate::{
     tip::{data::TIPS, TipFn},
@@ -29,22 +30,19 @@ fn full_length_shortcut(
     description: &str,
     palette: Palette,
 ) -> LinePart {
-    let white_color = match palette.white {
+    let text_color = palette_match!(match palette.theme_hue {
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
+        ThemeHue::Dark => palette.white,
-        PaletteColor::EightBit(color) => Fixed(color),
+        ThemeHue::Light => palette.black,
-    };
+    });
-    let green_color = match palette.green {
+    let green_color = palette_match!(palette.green);
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
-        PaletteColor::EightBit(color) => Fixed(color),
-    };
     let separator = if is_first_shortcut { " " } else { " / " };
-    let separator = Style::new().fg(white_color).paint(separator);
+    let separator = Style::new().fg(text_color).paint(separator);
     let shortcut_len = letter.chars().count() + 3; // 2 for <>'s around shortcut, 1 for the space
-    let shortcut_left_separator = Style::new().fg(white_color).paint("<");
+    let shortcut_left_separator = Style::new().fg(text_color).paint("<");
     let shortcut = Style::new().fg(green_color).bold().paint(letter);
-    let shortcut_right_separator = Style::new().fg(white_color).paint("> ");
+    let shortcut_right_separator = Style::new().fg(text_color).paint("> ");
     let description_len = description.chars().count();
-    let description = Style::new().fg(white_color).bold().paint(description);
+    let description = Style::new().fg(text_color).bold().paint(description);
     let len = shortcut_len + description_len + separator.chars().count();
     LinePart {
         part: ANSIStrings(&[
@@ -65,24 +63,21 @@ fn first_word_shortcut(
     description: &str,
     palette: Palette,
 ) -> LinePart {
-    let white_color = match palette.white {
+    let text_color = palette_match!(match palette.theme_hue {
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
+        ThemeHue::Dark => palette.white,
-        PaletteColor::EightBit(color) => Fixed(color),
+        ThemeHue::Light => palette.black,
-    };
+    });
-    let green_color = match palette.green {
+    let green_color = palette_match!(palette.green);
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
-        PaletteColor::EightBit(color) => Fixed(color),
-    };
     let separator = if is_first_shortcut { " " } else { " / " };
-    let separator = Style::new().fg(white_color).paint(separator);
+    let separator = Style::new().fg(text_color).paint(separator);
     let shortcut_len = letter.chars().count() + 3; // 2 for <>'s around shortcut, 1 for the space
-    let shortcut_left_separator = Style::new().fg(white_color).paint("<");
+    let shortcut_left_separator = Style::new().fg(text_color).paint("<");
     let shortcut = Style::new().fg(green_color).bold().paint(letter);
-    let shortcut_right_separator = Style::new().fg(white_color).paint("> ");
+    let shortcut_right_separator = Style::new().fg(text_color).paint("> ");
     let description_first_word = description.split(' ').next().unwrap_or("");
     let description_first_word_length = description_first_word.chars().count();
     let description_first_word = Style::new()
-        .fg(white_color)
+        .fg(text_color)
         .bold()
         .paint(description_first_word);
     let len = shortcut_len + description_first_word_length + separator.chars().count();
@@ -102,11 +97,11 @@ fn first_word_shortcut(
 fn locked_interface_indication(palette: Palette) -> LinePart {
     let locked_text = " -- INTERFACE LOCKED -- ";
     let locked_text_len = locked_text.chars().count();
-    let white_color = match palette.white {
+    let text_color = palette_match!(match palette.theme_hue {
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
+        ThemeHue::Dark => palette.white,
-        PaletteColor::EightBit(color) => Fixed(color),
+        ThemeHue::Light => palette.black,
-    };
+    });
-    let locked_styled_text = Style::new().fg(white_color).bold().paint(locked_text);
+    let locked_styled_text = Style::new().fg(text_color).bold().paint(locked_text);
     LinePart {
         part: locked_styled_text.to_string(),
         len: locked_text_len,
@@ -120,18 +115,9 @@ fn show_extra_hints(
     use StatusBarTextBoldness::*;
     use StatusBarTextColor::*;
     // get the colors
-    let white_color = match palette.white {
+    let white_color = palette_match!(palette.white);
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
+    let green_color = palette_match!(palette.green);
-        PaletteColor::EightBit(color) => Fixed(color),
+    let orange_color = palette_match!(palette.orange);
-    };
-    let green_color = match palette.green {
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
-        PaletteColor::EightBit(color) => Fixed(color),
-    };
-    let orange_color = match palette.orange {
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
-        PaletteColor::EightBit(color) => Fixed(color),
-    };
     // calculate length of tipp
     let len = text_with_style
         .iter()
@@ -328,10 +314,7 @@ pub fn keybinds(help: &ModeInfo, tip_name: &str, max_width: usize) -> LinePart {
 }
 
 pub fn text_copied_hint(palette: &Palette, copy_destination: CopyDestination) -> LinePart {
-    let green_color = match palette.green {
+    let green_color = palette_match!(palette.green);
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
-        PaletteColor::EightBit(color) => Fixed(color),
-    };
     let hint = match copy_destination {
         CopyDestination::Command => "Text piped to external command",
         #[cfg(not(target_os = "macos"))]
@@ -348,10 +331,7 @@ pub fn text_copied_hint(palette: &Palette, copy_destination: CopyDestination) ->
 
 pub fn system_clipboard_error(palette: &Palette) -> LinePart {
     let hint = " Error using the system clipboard.";
-    let red_color = match palette.red {
+    let red_color = palette_match!(palette.red);
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
-        PaletteColor::EightBit(color) => Fixed(color),
-    };
     LinePart {
         part: Style::new().fg(red_color).bold().paint(hint).to_string(),
         len: hint.len(),
@@ -359,20 +339,14 @@ pub fn system_clipboard_error(palette: &Palette) -> LinePart {
 }
 
 pub fn fullscreen_panes_to_hide(palette: &Palette, panes_to_hide: usize) -> LinePart {
-    let white_color = match palette.white {
+    let text_color = palette_match!(match palette.theme_hue {
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
+        ThemeHue::Dark => palette.white,
-        PaletteColor::EightBit(color) => Fixed(color),
+        ThemeHue::Light => palette.black,
-    };
+    });
-    let green_color = match palette.green {
+    let green_color = palette_match!(palette.green);
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
+    let orange_color = palette_match!(palette.orange);
-        PaletteColor::EightBit(color) => Fixed(color),
+    let shortcut_left_separator = Style::new().fg(text_color).bold().paint(" (");
-    };
+    let shortcut_right_separator = Style::new().fg(text_color).bold().paint("): ");
-    let orange_color = match palette.orange {
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
-        PaletteColor::EightBit(color) => Fixed(color),
-    };
-    let shortcut_left_separator = Style::new().fg(white_color).bold().paint(" (");
-    let shortcut_right_separator = Style::new().fg(white_color).bold().paint("): ");
     let fullscreen = "FULLSCREEN";
     let puls = "+ ";
     let panes = panes_to_hide.to_string();
@@ -388,9 +362,9 @@ pub fn fullscreen_panes_to_hide(palette: &Palette, panes_to_hide: usize) -> Line
             shortcut_left_separator,
             Style::new().fg(orange_color).bold().paint(fullscreen),
             shortcut_right_separator,
-            Style::new().fg(white_color).bold().paint(puls),
+            Style::new().fg(text_color).bold().paint(puls),
             Style::new().fg(green_color).bold().paint(panes),
-            Style::new().fg(white_color).bold().paint(hide)
+            Style::new().fg(text_color).bold().paint(hide)
         ),
         len,
     }
@@ -532,21 +506,15 @@ pub fn short_tmux_mode_indication(help: &ModeInfo) -> LinePart {
 }
 
 pub fn locked_fullscreen_panes_to_hide(palette: &Palette, panes_to_hide: usize) -> LinePart {
-    let white_color = match palette.white {
+    let text_color = palette_match!(match palette.theme_hue {
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
+        ThemeHue::Dark => palette.white,
-        PaletteColor::EightBit(color) => Fixed(color),
+        ThemeHue::Light => palette.black,
-    };
+    });
-    let green_color = match palette.green {
+    let green_color = palette_match!(palette.green);
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
+    let orange_color = palette_match!(palette.orange);
-        PaletteColor::EightBit(color) => Fixed(color),
-    };
-    let orange_color = match palette.orange {
-        PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
-        PaletteColor::EightBit(color) => Fixed(color),
-    };
     let locked_text = " -- INTERFACE LOCKED -- ";
-    let shortcut_left_separator = Style::new().fg(white_color).bold().paint(" (");
+    let shortcut_left_separator = Style::new().fg(text_color).bold().paint(" (");
-    let shortcut_right_separator = Style::new().fg(white_color).bold().paint("): ");
+    let shortcut_right_separator = Style::new().fg(text_color).bold().paint("): ");
     let fullscreen = "FULLSCREEN";
     let puls = "+ ";
     let panes = panes_to_hide.to_string();
@@ -560,13 +528,13 @@ pub fn locked_fullscreen_panes_to_hide(palette: &Palette, panes_to_hide: usize)
     LinePart {
         part: format!(
             "{}{}{}{}{}{}{}",
-            Style::new().fg(white_color).bold().paint(locked_text),
+            Style::new().fg(text_color).bold().paint(locked_text),
             shortcut_left_separator,
             Style::new().fg(orange_color).bold().paint(fullscreen),
             shortcut_right_separator,
-            Style::new().fg(white_color).bold().paint(puls),
+            Style::new().fg(text_color).bold().paint(puls),
             Style::new().fg(green_color).bold().paint(panes),
-            Style::new().fg(white_color).bold().paint(hide)
+            Style::new().fg(text_color).bold().paint(hide)
         ),
         len,
     }

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

@@ -102,11 +102,13 @@ fn left_more_message(tab_count_to_the_left: usize, palette: Palette, separator:
     // 238
     // chars length plus separator length on both sides
     let more_text_len = more_text.width() + 2 * separator.width();
-    let left_separator = style!(palette.gray, palette.orange).paint(separator);
+    let text_color = match palette.theme_hue {
-    let more_styled_text = style!(palette.black, palette.orange)
+        ThemeHue::Dark => palette.white,
-        .bold()
+        ThemeHue::Light => palette.black,
-        .paint(more_text);
+    };
-    let right_separator = style!(palette.orange, palette.gray).paint(separator);
+    let left_separator = style!(text_color, palette.orange).paint(separator);
+    let more_styled_text = style!(text_color, palette.orange).bold().paint(more_text);
+    let right_separator = style!(palette.orange, text_color).paint(separator);
     let more_styled_text =
         ANSIStrings(&[left_separator, more_styled_text, right_separator]).to_string();
     LinePart {
@@ -130,11 +132,13 @@ fn right_more_message(
     };
     // chars length plus separator length on both sides
     let more_text_len = more_text.width() + 2 * separator.width();
-    let left_separator = style!(palette.gray, palette.orange).paint(separator);
+    let text_color = match palette.theme_hue {
-    let more_styled_text = style!(palette.black, palette.orange)
+        ThemeHue::Dark => palette.white,
-        .bold()
+        ThemeHue::Light => palette.black,
-        .paint(more_text);
+    };
-    let right_separator = style!(palette.orange, palette.gray).paint(separator);
+    let left_separator = style!(text_color, palette.orange).paint(separator);
+    let more_styled_text = style!(text_color, palette.orange).bold().paint(more_text);
+    let right_separator = style!(palette.orange, text_color).paint(separator);
     let more_styled_text =
         ANSIStrings(&[left_separator, more_styled_text, right_separator]).to_string();
     LinePart {
@@ -147,9 +151,15 @@ fn tab_line_prefix(session_name: Option<&str>, palette: Palette, cols: usize) ->
     let prefix_text = " Zellij ".to_string();
 
     let prefix_text_len = prefix_text.chars().count();
-    let prefix_styled_text = style!(palette.white, palette.gray)
+    let text_color = match palette.theme_hue {
-        .bold()
+        ThemeHue::Dark => palette.white,
-        .paint(prefix_text);
+        ThemeHue::Light => palette.black,
+    };
+    let bg_color = match palette.theme_hue {
+        ThemeHue::Dark => palette.black,
+        ThemeHue::Light => palette.white,
+    };
+    let prefix_styled_text = style!(text_color, bg_color).bold().paint(prefix_text);
     let mut parts = vec![LinePart {
         part: prefix_styled_text.to_string(),
         len: prefix_text_len,
@@ -157,7 +167,11 @@ fn tab_line_prefix(session_name: Option<&str>, palette: Palette, cols: usize) ->
     if let Some(name) = session_name {
         let name_part = format!("({}) ", name);
         let name_part_len = name_part.width();
-        let name_part_styled_text = style!(palette.white, palette.gray).bold().paint(name_part);
+        let text_color = match palette.theme_hue {
+            ThemeHue::Dark => palette.white,
+            ThemeHue::Light => palette.black,
+        };
+        let name_part_styled_text = style!(text_color, bg_color).bold().paint(name_part);
         if cols.saturating_sub(prefix_text_len) >= name_part_len {
             parts.push(LinePart {
                 part: name_part_styled_text.to_string(),

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

@@ -119,7 +119,11 @@ impl ZellijPlugin for State {
             }
             len_cnt += bar_part.len;
         }
-        match self.mode_info.style.colors.gray {
+        let background = match self.mode_info.style.colors.theme_hue {
+            ThemeHue::Dark => self.mode_info.style.colors.black,
+            ThemeHue::Light => self.mode_info.style.colors.white,
+        };
+        match background {
             PaletteColor::Rgb((r, g, b)) => {
                 println!("{}\u{1b}[48;2;{};{};{}m\u{1b}[0K", s, r, g, b);
             }

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

@@ -25,24 +25,28 @@ pub fn render_tab(
     active: bool,
 ) -> LinePart {
     let background_color = if active { palette.green } else { palette.fg };
-    let left_separator = style!(palette.gray, background_color).paint(separator);
+    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 tab_styled_text = style!(palette.black, background_color)
+    let tab_styled_text = style!(foreground_color, background_color)
         .bold()
         .paint(format!(" {} ", text));
 
-    let right_separator = style!(background_color, palette.gray).paint(separator);
+    let right_separator = style!(background_color, foreground_color).paint(separator);
     let tab_styled_text = if !focused_clients.is_empty() {
         let (cursor_section, extra_length) = cursors(focused_clients, palette);
         tab_text_len += extra_length;
         let mut s = String::new();
-        let cursor_beginning = style!(palette.black, background_color)
+        let cursor_beginning = style!(foreground_color, background_color)
             .bold()
             .paint("[")
             .to_string();
         let cursor_section = ANSIStrings(&cursor_section).to_string();
-        let cursor_end = style!(palette.black, background_color)
+        let cursor_end = style!(foreground_color, background_color)
             .bold()
             .paint("]")
             .to_string();

example/themes/dracula.yaml

@@ -0,0 +1,15 @@
+# Dracula Theme
+
+themes:
+  dracula:
+    bg: [40, 42, 54]
+    red: [236, 63, 63]
+    green: [80, 250, 123]
+    yellow: [241, 250, 140]
+    blue: [98, 114, 164]
+    magenta: [189, 147, 249]
+    orange: [216, 133, 76]
+    fg: [248, 248, 242]
+    cyan: [139, 233, 253]
+    black: [35, 36, 38]
+    white: [222, 222, 218]

example/themes/gruvbox.yaml

@@ -0,0 +1,27 @@
+# Gruvbox theme
+
+themes:
+  gruvbox-dark:
+    bg: [40, 40, 40]
+    red: [204, 36, 29]
+    green: [152, 151, 26]
+    yellow: [215, 153, 33]
+    blue: [69, 133, 136]
+    magenta: [177, 98, 134]
+    orange: [214, 93, 14]
+    fg: [213, 196, 161]
+    cyan: [104, 157, 106]
+    black: [60, 56, 54]
+    white: [251, 241, 199]
+  gruvbox-light:
+    bg: [251, 82, 75]
+    red: [205, 75, 69]
+    green: [152, 151, 26]
+    yellow: [215, 153, 33]
+    blue: [69, 133, 136]
+    magenta: [177, 98, 134]
+    orange: [214, 93, 14]
+    fg: [60, 56, 54]
+    cyan: [104, 157, 106]
+    black: [40, 40, 40]
+    white: [213, 196, 161]

example/themes/molokai.yaml

@@ -0,0 +1,15 @@
+# Molokai Theme
+
+themes:
+  molokai-dark:
+    bg: [27, 29, 30]
+    red: [255, 0, 0]
+    green: [0, 140, 0]
+    yellow: [255, 255, 0]
+    blue: [102, 217, 239]
+    magenta: [174, 129, 255]
+    orange: [253, 151, 31]
+    fg: [248, 248, 240]
+    cyan: [0, 255, 255]
+    black: [0, 0, 0]
+    white: [255, 255, 255]

example/themes/one-half.yaml

@@ -0,0 +1,15 @@
+# One Half Theme
+
+themes:
+  one-half-dark:
+    bg: [40, 44, 52]
+    red: [227, 63, 76]
+    green: [152, 195, 121]
+    yellow: [229, 192, 123]
+    blue: [97, 175, 239]
+    magenta: [198, 120, 221]
+    orange: [216, 133, 76]
+    fg: [220, 223, 228]
+    cyan: [86, 182, 194]
+    black: [27, 29, 35]
+    white: [233, 225, 254]

example/themes/solarized.yaml

@@ -0,0 +1,15 @@
+# Solarized Theme
+
+themes:
+  solarized-dark:
+    bg: [0, 43, 54]
+    red: [220, 50, 47]
+    green: [133, 153, 0]
+    yellow: [181, 137, 0]
+    blue: [38, 139, 210]
+    magenta: [211, 54, 130]
+    orange: [203, 75, 22]
+    fg: [253, 246, 227]
+    cyan: [42, 161, 152]
+    black: [7, 54, 66]
+    white: [238, 232, 213]

example/themes/tokyo-night.yaml

@@ -5,9 +5,8 @@ themes:
   tokyo-night:
     fg: [169,177,214] #A9B1D6
     bg: [26,27,38] #1A1B26
-    gray: [86,95,137] #565F89
+    black: [56,62,90] #383E5A
-    black: [65,72,104] #414868
+    red: [249,51,87] #F9334D
-    red: [247,118,142] #F7768E
     green: [158,206,106]  #9ECE6A
     yellow: [224,175,104] #E0AF68
     blue: [122,162,247]  #7AA2F7
@@ -18,9 +17,8 @@ themes:
   tokyo-night-storm:
     fg: [169,177,214] #A9B1D6
     bg: [36,40,59] #24283B
-    gray: [86,95,137] #565F89
+    black: [56,62,90] #383E5A
-    black: [65,72,104] #414868
+    red: [249,51,87] #F9334D
-    red: [247,118,142] #F7768E
     green: [158,206,106]  #9ECE6A
     yellow: [224,175,104] #E0AF68
     blue: [122,162,247]  #7AA2F7
@@ -31,13 +29,12 @@ themes:
   tokyo-night-light:
     fg: [52,59,88] #343B58
     bg: [213,214,219] #D5D6DB
-    gray: [150,153,163] #9699A3
     black: [15,15,20] #0F0F14
-    red: [140,67,81] #8C4351
+    red: [186,75,96] #BA4B60
     green: [72,94,48]  #485E30
     yellow: [143,94,21] #8F5E15
     blue: [52,84,138]  #34548A
     magenta: [90,74,120] #5A4A78
     cyan: [15,75,110] #0F4B6E
-    white: [52,59,88] #343B58
+    white: [130,137,172] #8289AC
     orange: [150,80,39] #965027

zellij-utils/src/input/theme.rs

@@ -2,6 +2,7 @@ use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 
 use super::options::Options;
+use crate::shared::detect_theme_hue;
 use zellij_tile::data::{Palette, PaletteColor};
 
 /// Intermediate deserialization of themes
@@ -30,7 +31,6 @@ pub struct PaletteFromYaml {
     pub fg: PaletteColorFromYaml,
     pub bg: PaletteColorFromYaml,
     pub black: PaletteColorFromYaml,
-    pub gray: PaletteColorFromYaml,
     pub red: PaletteColorFromYaml,
     pub green: PaletteColorFromYaml,
     pub yellow: PaletteColorFromYaml,
@@ -90,7 +90,6 @@ impl From<PaletteFromYaml> for Palette {
             fg: yaml.fg.into(),
             bg: yaml.bg.into(),
             black: yaml.black.into(),
-            gray: yaml.gray.into(),
             red: yaml.red.into(),
             green: yaml.green.into(),
             yellow: yaml.yellow.into(),
@@ -99,6 +98,7 @@ impl From<PaletteFromYaml> for Palette {
             cyan: yaml.cyan.into(),
             white: yaml.white.into(),
             orange: yaml.orange.into(),
+            theme_hue: detect_theme_hue(yaml.bg.into()),
             ..Palette::default()
         }
     }

zellij-utils/src/shared.rs

@@ -59,7 +59,7 @@ pub mod colors {
     pub const BRIGHT_GRAY: u8 = 245;
     pub const RED: u8 = 88;
     pub const ORANGE: u8 = 166;
-    pub const BLACK: u8 = 16;
+    pub const BLACK: u8 = 236;
     pub const MAGENTA: u8 = 201;
     pub const CYAN: u8 = 51;
     pub const YELLOW: u8 = 226;
@@ -102,7 +102,7 @@ pub fn default_palette() -> Palette {
 }
 
 // Dark magic
-pub fn _detect_theme_hue(bg: PaletteColor) -> ThemeHue {
+pub fn detect_theme_hue(bg: PaletteColor) -> ThemeHue {
     match bg {
         PaletteColor::Rgb((r, g, b)) => {
             // HSP, P stands for perceived brightness