More flexible theme config (#118)

Make theme config more flexible so
- it is possible to only set some of the component styles in theme.toml
- it is possible to not set the palette in theme.toml (and just modify component styles)
- it is possible to set the border style with the new component_style attribute border
- it is possible to set the style of the current selection with the new component_style selection

Co-authored-by: Thang Pham <[email protected]>

Author: daschw

docs/config.md

@@ -89,7 +89,7 @@ The application's theme can be modified by setting the `theme` option in `app.to
 
 A theme has three main components: `name` (the theme's name), `palette` (the theme's color palette), `component_style` (a list of pre-defined styles for application's components).
 
-`name` and `palette` are required when defining a new theme. If `component_style` is not specified, a default value will be used.
+`name` is required when defining a new theme. If `palette` is not set, a palette based on the terminal's colorscheme will be used. If `component_style` is not specified, a default value will be used.
 
 An example of user-defined themes can be found in the example [`theme.toml`](../examples/theme.toml) file
 
@@ -133,30 +133,34 @@ If specified, a field's value must be set to be a hex representation of a RGB co
 
 ### Component Styles
 
-To define application's component styles, user needs to specify **all of the below fields**:
+To define application's component styles, the user can specify any of the below fields:
 
 - `block_title`
+- `border`
 - `playback_track`
 - `playback_album`
 - `playback_metadata`
 - `playback_progress_bar`
 - `current_playing`
 - `page_desc`
 - `table_header`
+- `selection`
 
-A field in the component styles is a `Style` struct which has three optional fields: `fg`, `bg` and `modifiers`. `fg` and `bg` can be either a palette's color (string in pascal case) or a custom RGB color using the following format: `fg = { Rgb { r = ..., g = ..., b = ... } }`. `modifiers` can only be either `Italic` or `Bold`.
+A field in the component styles is a `Style` struct which has three optional fields: `fg`, `bg` and `modifiers`. `fg` and `bg` can be either a palette's color (string in pascal case) or a custom RGB color using the following format: `fg = { Rgb { r = ..., g = ..., b = ... } }`. The default values for `fg` and `bg` are the `palette`'s `fg` and `bg`. `modifiers` can only be `Italic`, `Bold` or `Reversed`.
 
 Default value for application's component styles:
 
 ```toml
 block_title = { fg = "Magenta"  }
+border = {}
 playback_track = { fg = "Cyan", modifiers = ["Bold"] }
 playback_album = { fg = "Yellow" }
 playback_metadata = { fg = "BrightBlack" }
 playback_progress_bar = { bg = "BrightBlack", fg = "Green" }
 current_playing = { fg = "Green", modifiers = ["Bold"] }
 page_desc = { fg = "Cyan", modifiers = ["Bold"] }
 table_header = { fg = "Blue" }
+selection = { modifiers = ["Bold", "Reversed"] }
 ```
 
 ## Keymaps

examples/theme.toml

@@ -21,13 +21,15 @@ bright_cyan = "#8be9fd"
 bright_white = "#ffffff"
 [themes.component_style]
 block_title = { fg = "Magenta"  }
+border = {}
 playback_track = { fg = "Cyan", modifiers = ["Bold"] }
 playback_album = { fg = "Yellow" }
 playback_metadata = { fg = "BrightBlack" }
 playback_progress_bar = { bg = "BrightBlack", fg = "Green" }
 current_playing = { fg = "Green", modifiers = ["Bold"] }
 page_desc = { fg = "Cyan", modifiers = ["Bold"] }
 table_header = { fg = "Blue" }
+selection = { modifiers = ["Bold", "Reversed"] }
 
 [[themes]]
 name = "gruvbox_dark"
@@ -52,13 +54,15 @@ bright_cyan = "#8ec07c"
 bright_white = "#ebdbb2"
 [themes.component_style]
 block_title = { fg = "Magenta"  }
+border = {}
 playback_track = { fg = "Cyan", modifiers = ["Bold"] }
 playback_album = { fg = "Yellow" }
 playback_metadata = { fg = "BrightBlack" }
 playback_progress_bar = { bg = "BrightBlack", fg = "Green" }
 current_playing = { fg = "Green", modifiers = ["Bold"] }
 page_desc = { fg = "Cyan", modifiers = ["Bold"] }
 table_header = { fg = "Blue" }
+selection = { modifiers = ["Bold", "Reversed"] }
 
 [[themes]]
 name = "gruvbox_light"
@@ -83,13 +87,15 @@ bright_cyan = "#689d69"
 bright_white = "#7c6f64"
 [themes.component_style]
 block_title = { fg = "Magenta"  }
+border = {}
 playback_track = { fg = "Cyan", modifiers = ["Bold"] }
 playback_album = { fg = "Yellow" }
 playback_metadata = { fg = "BrightBlack" }
 playback_progress_bar = { bg = "BrightBlack", fg = "Green" }
 current_playing = { fg = "Green", modifiers = ["Bold"] }
 page_desc = { fg = "Cyan", modifiers = ["Bold"] }
 table_header = { fg = "Blue" }
+selection = { modifiers = ["Bold", "Reversed"] }
 
 
 [[themes]]
@@ -115,13 +121,15 @@ bright_cyan = "#93a1a1"
 bright_white = "#fdf6e3"
 [themes.component_style]
 block_title = { fg = "Magenta"  }
+border = {}
 playback_track = { fg = "Cyan", modifiers = ["Bold"] }
 playback_album = { fg = "Yellow" }
 playback_metadata = { fg = "White" }
 playback_progress_bar = { bg = "BrightBlack", fg = "Green" }
 current_playing = { fg = "Green", modifiers = ["Bold"] }
 page_desc = { fg = "Cyan", modifiers = ["Bold"] }
 table_header = { fg = "Blue" }
+selection = { modifiers = ["Bold", "Reversed"] }
 
 [[themes]]
 name = "solarized_light"
@@ -146,10 +154,12 @@ bright_cyan = "#93a1a1"
 bright_white = "#fdf6e3"
 [themes.component_style]
 block_title = { fg = "Magenta"  }
+border = {}
 playback_track = { fg = "Cyan", modifiers = ["Bold"] }
 playback_album = { fg = "Yellow" }
 playback_metadata = { fg = "BrightBlack" }
 playback_progress_bar = { bg = "BrightBlack", fg = "Green" }
 current_playing = { fg = "Green", modifiers = ["Bold"] }
 page_desc = { fg = "Cyan", modifiers = ["Bold"] }
 table_header = { fg = "Blue" }
+selection = { modifiers = ["Bold", "Reversed"] }

scripts/theme_parse

@@ -51,12 +51,14 @@ bright_cyan = "{data["colors"]["bright"]["cyan"]}"
 bright_white = "{data["colors"]["bright"]["white"]}"
 [themes.component_style]
 block_title = {{ fg = "Magenta"  }}
+border = {{}}
 playback_track = {{ fg = "Cyan", modifiers = ["Bold"] }}
 playback_album = {{ fg = "Yellow" }}
 playback_metadata = {{ fg = "BrightBlack" }}
 playback_progress_bar = {{ bg = "BrightBlack", fg = "Green" }}
 current_playing = {{ fg = "Green", modifiers = ["Bold"] }}
 page_desc = {{ fg = "Cyan", modifiers = ["Bold"] }}
 table_header = {{ fg = "Blue" }}
+selection = {{ modifiers = ["Bold", "Reversed"] }}
     """
 )

spotify_player/src/config/theme.rs

@@ -12,6 +12,7 @@ pub struct ThemeConfig {
 #[derive(Clone, Debug, Deserialize)]
 pub struct Theme {
     pub name: String,
+    #[serde(default)]
     palette: Palette,
     #[serde(default)]
     component_style: ComponentStyle,
@@ -57,21 +58,18 @@ pub struct Palette {
     pub bright_yellow: Color,
 }
 
-// TODO: find a way to parse ComponentStyle config options without
-// having to specify all the fields
-#[derive(Clone, Debug, Deserialize)]
+#[derive(Clone, Debug, Default, Deserialize)]
 pub struct ComponentStyle {
-    pub block_title: Style,
-
-    pub playback_track: Style,
-    pub playback_album: Style,
-    pub playback_metadata: Style,
-    pub playback_progress_bar: Style,
-
-    pub current_playing: Style,
-
-    pub page_desc: Style,
-    pub table_header: Style,
+    pub block_title: Option<Style>,
+    pub border: Option<Style>,
+    pub playback_track: Option<Style>,
+    pub playback_album: Option<Style>,
+    pub playback_metadata: Option<Style>,
+    pub playback_progress_bar: Option<Style>,
+    pub current_playing: Option<Style>,
+    pub page_desc: Option<Style>,
+    pub table_header: Option<Style>,
+    pub selection: Option<Style>,
 }
 
 #[derive(Default, Clone, Debug, Deserialize)]
@@ -107,23 +105,14 @@ pub enum StyleColor {
 pub enum StyleModifier {
     Bold,
     Italic,
+    Reversed,
 }
 
 #[derive(Clone, Debug)]
 pub struct Color {
     pub color: style::Color,
 }
 
-macro_rules! impl_component_style_getters {
-	($($f:ident),+) => {
-		$(
-            pub fn $f(&self) -> tui::style::Style {
-                self.component_style.$f.style(&self.palette)
-            }
-        )*
-	};
-}
-
 impl ThemeConfig {
     /// finds a theme whose name matches a given `name`
     pub fn find_theme(&self, name: &str) -> Option<Theme> {
@@ -170,9 +159,12 @@ impl Theme {
 
     pub fn selection_style(&self, is_active: bool) -> style::Style {
         if is_active {
-            style::Style::default()
-                .add_modifier(style::Modifier::REVERSED)
-                .add_modifier(style::Modifier::BOLD)
+            match &self.component_style.selection {
+                None => style::Style::default()
+                    .add_modifier(style::Modifier::REVERSED)
+                    .add_modifier(style::Modifier::BOLD),
+                Some(s) => s.style(&self.palette),
+            }
         } else {
             style::Style::default()
         }
@@ -196,16 +188,84 @@ impl Theme {
         tui::text::Span::styled(content.into(), self.block_title())
     }
 
-    impl_component_style_getters!(
-        block_title,
-        playback_track,
-        playback_album,
-        playback_metadata,
-        playback_progress_bar,
-        current_playing,
-        page_desc,
-        table_header
-    );
+    pub fn block_title(&self) -> tui::style::Style {
+        match &self.component_style.block_title {
+            None => Style::default()
+                .fg(StyleColor::Magenta)
+                .style(&self.palette),
+            Some(s) => s.style(&self.palette),
+        }
+    }
+
+    pub fn border(&self) -> tui::style::Style {
+        match &self.component_style.border {
+            None => Style::default().style(&self.palette),
+            Some(s) => s.style(&self.palette),
+        }
+    }
+
+    pub fn playback_track(&self) -> tui::style::Style {
+        match &self.component_style.playback_track {
+            None => Style::default()
+                .fg(StyleColor::Cyan)
+                .modifiers(vec![StyleModifier::Bold])
+                .style(&self.palette),
+            Some(s) => s.style(&self.palette),
+        }
+    }
+
+    pub fn playback_album(&self) -> tui::style::Style {
+        match &self.component_style.playback_album {
+            None => Style::default().fg(StyleColor::Yellow).style(&self.palette),
+            Some(s) => s.style(&self.palette),
+        }
+    }
+
+    pub fn playback_metadata(&self) -> tui::style::Style {
+        match &self.component_style.playback_metadata {
+            None => Style::default()
+                .fg(StyleColor::BrightBlack)
+                .style(&self.palette),
+            Some(s) => s.style(&self.palette),
+        }
+    }
+
+    pub fn playback_progress_bar(&self) -> tui::style::Style {
+        match &self.component_style.playback_metadata {
+            None => Style::default()
+                .bg(StyleColor::BrightBlack)
+                .fg(StyleColor::Green)
+                .style(&self.palette),
+            Some(s) => s.style(&self.palette),
+        }
+    }
+
+    pub fn current_playing(&self) -> tui::style::Style {
+        match &self.component_style.current_playing {
+            None => Style::default()
+                .fg(StyleColor::Green)
+                .modifiers(vec![StyleModifier::Bold])
+                .style(&self.palette),
+            Some(s) => s.style(&self.palette),
+        }
+    }
+
+    pub fn page_desc(&self) -> tui::style::Style {
+        match &self.component_style.page_desc {
+            None => Style::default()
+                .fg(StyleColor::Cyan)
+                .modifiers(vec![StyleModifier::Bold])
+                .style(&self.palette),
+            Some(s) => s.style(&self.palette),
+        }
+    }
+
+    pub fn table_header(&self) -> tui::style::Style {
+        match &self.component_style.table_header {
+            None => Style::default().fg(StyleColor::Blue).style(&self.palette),
+            Some(s) => s.style(&self.palette),
+        }
+    }
 }
 
 impl Style {
@@ -268,6 +328,7 @@ impl From<StyleModifier> for style::Modifier {
         match m {
             StyleModifier::Bold => style::Modifier::BOLD,
             StyleModifier::Italic => style::Modifier::ITALIC,
+            StyleModifier::Reversed => style::Modifier::REVERSED,
         }
     }
 }
@@ -391,54 +452,34 @@ impl Default for Theme {
     fn default() -> Self {
         Self {
             name: "default".to_owned(),
-            palette: Palette {
-                background: None,
-                foreground: None,
-                // the default theme uses the terminal's ANSI colors
-                black: Color::black(),
-                red: Color::red(),
-                green: Color::green(),
-                yellow: Color::yellow(),
-                blue: Color::blue(),
-                magenta: Color::magenta(),
-                cyan: Color::cyan(),
-                white: Color::white(),
-                bright_black: Color::bright_black(),
-                bright_red: Color::bright_red(),
-                bright_green: Color::bright_green(),
-                bright_yellow: Color::bright_yellow(),
-                bright_blue: Color::bright_blue(),
-                bright_magenta: Color::bright_magenta(),
-                bright_cyan: Color::bright_cyan(),
-                bright_white: Color::bright_white(),
-            },
+            palette: Palette::default(),
             component_style: ComponentStyle::default(),
         }
     }
 }
 
-impl Default for ComponentStyle {
+impl Default for Palette {
     fn default() -> Self {
         Self {
-            block_title: Style::default().fg(StyleColor::Magenta),
-
-            playback_track: Style::default()
-                .fg(StyleColor::Cyan)
-                .modifiers(vec![StyleModifier::Bold]),
-            playback_album: Style::default().fg(StyleColor::Yellow),
-            playback_metadata: Style::default().fg(StyleColor::BrightBlack),
-            playback_progress_bar: Style::default()
-                .bg(StyleColor::BrightBlack)
-                .fg(StyleColor::Green),
-
-            current_playing: Style::default()
-                .fg(StyleColor::Green)
-                .modifiers(vec![StyleModifier::Bold]),
-
-            page_desc: Style::default()
-                .fg(StyleColor::Cyan)
-                .modifiers(vec![StyleModifier::Bold]),
-            table_header: Style::default().fg(StyleColor::Blue),
+            background: None,
+            foreground: None,
+            // the default theme uses the terminal's ANSI colors
+            black: Color::black(),
+            red: Color::red(),
+            green: Color::green(),
+            yellow: Color::yellow(),
+            blue: Color::blue(),
+            magenta: Color::magenta(),
+            cyan: Color::cyan(),
+            white: Color::white(),
+            bright_black: Color::bright_black(),
+            bright_red: Color::bright_red(),
+            bright_green: Color::bright_green(),
+            bright_yellow: Color::bright_yellow(),
+            bright_blue: Color::bright_blue(),
+            bright_magenta: Color::bright_magenta(),
+            bright_cyan: Color::bright_cyan(),
+            bright_white: Color::bright_white(),
         }
     }
 }