Skip to content

Commit

Permalink
Improve theme usage + add default ones (#1274)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@kunalmohan
kunalmohan committed Apr 1, 2022
1 parent 8439198 commit 9f71648
Show file tree
Hide file tree
Showing 14 changed files with 240 additions and 152 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
87 changes: 50 additions & 37 deletions default-plugins/status-bar/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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_char_left_separator: style!(palette.black, palette.green).bold(),
selected_prefix_separator: style!(background, palette.green),
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_styled_text: style!(palette.black, palette.green).bold(),
selected_suffix_separator: style!(palette.green, palette.gray).bold(),
unselected_prefix_separator: style!(palette.gray, palette.fg),
unselected_char_left_separator: style!(palette.black, palette.fg).bold(),
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!(palette.black, palette.fg).bold(),
unselected_styled_text: style!(palette.black, palette.fg).bold(),
unselected_suffix_separator: style!(palette.fg, palette.gray),
disabled_prefix_separator: style!(palette.gray, palette.fg),
disabled_styled_text: style!(palette.gray, palette.fg).dimmed(),
disabled_suffix_separator: style!(palette.fg, palette.gray),
selected_single_letter_prefix_separator: style!(palette.gray, palette.green),
unselected_char_right_separator: style!(background, palette.fg).bold(),
unselected_styled_text: style!(background, palette.fg).bold(),
unselected_suffix_separator: style!(palette.fg, 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!(background, palette.green),
selected_single_letter_char_shortcut: style!(palette.red, palette.green).bold(),
selected_single_letter_suffix_separator: style!(palette.green, palette.gray),
unselected_single_letter_prefix_separator: style!(palette.gray, palette.fg),
unselected_single_letter_char_shortcut: style!(palette.red, palette.fg).bold(),
unselected_single_letter_suffix_separator: style!(palette.fg, palette.gray),
superkey_prefix: style!(palette.white, palette.gray).bold(),
superkey_suffix_separator: style!(palette.gray, palette.gray),
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),
superkey_prefix: style!(foreground, background).bold(),
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_suffix_separator: style!(palette.green, palette.gray).bold(),
unselected_prefix_separator: style!(palette.gray, palette.fg),
unselected_char_left_separator: style!(palette.gray, palette.fg).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!(palette.gray, palette.fg).bold(),
unselected_styled_text: style!(palette.gray, palette.fg).bold(),
unselected_suffix_separator: style!(palette.fg, palette.gray),
disabled_prefix_separator: style!(palette.gray, palette.fg),
disabled_styled_text: style!(palette.gray, palette.fg).dimmed(),
disabled_suffix_separator: style!(palette.fg, palette.gray),
unselected_char_right_separator: style!(background, palette.fg).bold(),
unselected_styled_text: style!(background, palette.fg).bold(),
unselected_suffix_separator: style!(palette.fg, 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, 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),
superkey_prefix: style!(palette.gray, palette.fg).bold(),
superkey_suffix_separator: style!(palette.fg, palette.gray),
unselected_single_letter_suffix_separator: style!(palette.fg, background),
superkey_prefix: style!(background, palette.fg).bold(),
superkey_suffix_separator: style!(palette.fg, background),
},
}
}
Expand Down Expand Up @@ -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);
}
Expand Down
132 changes: 50 additions & 82 deletions default-plugins/status-bar/src/second_line.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ use ansi_term::{
Style,
};
use zellij_tile::prelude::*;
use zellij_tile_utils::palette_match;

use crate::{
tip::{data::TIPS, TipFn},
Expand All @@ -29,22 +30,19 @@ fn full_length_shortcut(
description: &str,
palette: Palette,
) -> LinePart {
let white_color = match palette.white {
PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
PaletteColor::EightBit(color) => Fixed(color),
};
let green_color = match palette.green {
PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
PaletteColor::EightBit(color) => Fixed(color),
};
let text_color = palette_match!(match palette.theme_hue {
ThemeHue::Dark => palette.white,
ThemeHue::Light => palette.black,
});
let green_color = palette_match!(palette.green);
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(&[
Expand All @@ -65,24 +63,21 @@ fn first_word_shortcut(
description: &str,
palette: Palette,
) -> LinePart {
let white_color = match palette.white {
PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
PaletteColor::EightBit(color) => Fixed(color),
};
let green_color = match palette.green {
PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
PaletteColor::EightBit(color) => Fixed(color),
};
let text_color = palette_match!(match palette.theme_hue {
ThemeHue::Dark => palette.white,
ThemeHue::Light => palette.black,
});
let green_color = palette_match!(palette.green);
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();
Expand All @@ -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 {
PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
PaletteColor::EightBit(color) => Fixed(color),
};
let locked_styled_text = Style::new().fg(white_color).bold().paint(locked_text);
let text_color = palette_match!(match palette.theme_hue {
ThemeHue::Dark => palette.white,
ThemeHue::Light => palette.black,
});
let locked_styled_text = Style::new().fg(text_color).bold().paint(locked_text);
LinePart {
part: locked_styled_text.to_string(),
len: locked_text_len,
Expand All @@ -120,18 +115,9 @@ fn show_extra_hints(
use StatusBarTextBoldness::*;
use StatusBarTextColor::*;
// get the colors
let white_color = match palette.white {
PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
PaletteColor::EightBit(color) => Fixed(color),
};
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),
};
let white_color = palette_match!(palette.white);
let green_color = palette_match!(palette.green);
let orange_color = palette_match!(palette.orange);
// calculate length of tipp
let len = text_with_style
.iter()
Expand Down Expand Up @@ -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 {
PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
PaletteColor::EightBit(color) => Fixed(color),
};
let green_color = palette_match!(palette.green);
let hint = match copy_destination {
CopyDestination::Command => "Text piped to external command",
#[cfg(not(target_os = "macos"))]
Expand All @@ -348,31 +331,22 @@ 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 {
PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
PaletteColor::EightBit(color) => Fixed(color),
};
let red_color = palette_match!(palette.red);
LinePart {
part: Style::new().fg(red_color).bold().paint(hint).to_string(),
len: hint.len(),
}
}

pub fn fullscreen_panes_to_hide(palette: &Palette, panes_to_hide: usize) -> LinePart {
let white_color = match palette.white {
PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
PaletteColor::EightBit(color) => Fixed(color),
};
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),
};
let shortcut_left_separator = Style::new().fg(white_color).bold().paint(" (");
let shortcut_right_separator = Style::new().fg(white_color).bold().paint("): ");
let text_color = palette_match!(match palette.theme_hue {
ThemeHue::Dark => palette.white,
ThemeHue::Light => palette.black,
});
let green_color = palette_match!(palette.green);
let orange_color = palette_match!(palette.orange);
let shortcut_left_separator = Style::new().fg(text_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();
Expand All @@ -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,
}
Expand Down Expand Up @@ -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 {
PaletteColor::Rgb((r, g, b)) => RGB(r, g, b),
PaletteColor::EightBit(color) => Fixed(color),
};
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),
};
let text_color = palette_match!(match palette.theme_hue {
ThemeHue::Dark => palette.white,
ThemeHue::Light => palette.black,
});
let green_color = palette_match!(palette.green);
let orange_color = palette_match!(palette.orange);
let locked_text = " -- INTERFACE LOCKED -- ";
let shortcut_left_separator = Style::new().fg(white_color).bold().paint(" (");
let shortcut_right_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(text_color).bold().paint("): ");
let fullscreen = "FULLSCREEN";
let puls = "+ ";
let panes = panes_to_hide.to_string();
Expand All @@ -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,
}
Expand Down
Loading

0 comments on commit 9f71648

Please sign in to comment.