[GH-ISSUE #144] `background` and `foreground` colors in `theme.rs`

kerem commented

2026-03-02 23:44:14 +03:00

Owner

Originally created by @sewnie on GitHub (Feb 22, 2023).
Original GitHub issue: https://github.com/aome510/spotify-player/issues/144

Is your feature request related to a problem? Please describe.
i want to use the terminal's default background and foreground colors,

Describe the solution you'd like
something like

diff --git a/spotify_player/src/config/theme.rs b/spotify_player/src/config/theme.rs
index 21a97a6..17bebf0 100644
--- a/spotify_player/src/config/theme.rs
+++ b/spotify_player/src/config/theme.rs
@@ -82,6 +82,8 @@ pub struct Style {

 #[derive(Copy, Clone, Debug, Deserialize)]
 pub enum StyleColor {
+    Background,
+    Foreground,
     Black,
     Blue,
     Cyan,

yes, i tried adding support myself, but gave up with trying to use background and foreground.

i tried this:

diff --git a/spotify_player/src/config/theme.rs b/spotify_player/src/config/theme.rs
index 21a97a6..d341a31 100644
--- a/spotify_player/src/config/theme.rs
+++ b/spotify_player/src/config/theme.rs
@@ -22,6 +22,8 @@ pub struct Theme {
 pub struct Palette {
     pub background: Option<Color>,
     pub foreground: Option<Color>,
+    #[serde(default = "Color::reset")]
+    pub reset: Color,
 
     #[serde(default = "Color::black")]
     pub black: Color,
@@ -82,6 +84,7 @@ pub struct Style {
 
 #[derive(Copy, Clone, Debug, Deserialize)]
 pub enum StyleColor {
+    Reset,
     Black,
     Blue,
     Cyan,
@@ -302,6 +305,7 @@ impl Style {
 impl StyleColor {
     pub fn color(&self, palette: &Palette) -> style::Color {
         match *self {
+            Self::Reset => palette.reset.color,
             Self::Black => palette.black.color,
             Self::Blue => palette.blue.color,
             Self::Cyan => palette.cyan.color,
@@ -378,6 +382,10 @@ impl Color {
     // The conversion from `style::Color` can be a bit counter-intuitive
     // as the `tui-rs` library doesn't follow the ANSI naming standard.
 
+    pub fn reset() -> Self {
+        style::Color::Reset.into()
+    }
+ 
     pub fn black() -> Self {
         style::Color::Black.into()
     }
@@ -463,6 +471,7 @@ impl Default for Palette {
         Self {
             background: None,
             foreground: None,
+            reset: Color::reset(),
             // the default theme uses the terminal's ANSI colors
             black: Color::black(),
             red: Color::red(),

but the naming was awful, and i'd much prefer the background and foreground

Describe alternatives you've considered
using White and Black, but they did NOT fit well.

Additional context
no

Originally created by @sewnie on GitHub (Feb 22, 2023). Original GitHub issue: https://github.com/aome510/spotify-player/issues/144 **Is your feature request related to a problem? Please describe.** i want to use the terminal's default background and foreground colors, **Describe the solution you'd like** something like ```diff diff --git a/spotify_player/src/config/theme.rs b/spotify_player/src/config/theme.rs index 21a97a6..17bebf0 100644 --- a/spotify_player/src/config/theme.rs +++ b/spotify_player/src/config/theme.rs @@ -82,6 +82,8 @@ pub struct Style { #[derive(Copy, Clone, Debug, Deserialize)] pub enum StyleColor { + Background, + Foreground, Black, Blue, Cyan, ``` yes, i tried adding support myself, but gave up with trying to use background and foreground. i tried this: ```diff diff --git a/spotify_player/src/config/theme.rs b/spotify_player/src/config/theme.rs index 21a97a6..d341a31 100644 --- a/spotify_player/src/config/theme.rs +++ b/spotify_player/src/config/theme.rs @@ -22,6 +22,8 @@ pub struct Theme { pub struct Palette { pub background: Option<Color>, pub foreground: Option<Color>, + #[serde(default = "Color::reset")] + pub reset: Color, #[serde(default = "Color::black")] pub black: Color, @@ -82,6 +84,7 @@ pub struct Style { #[derive(Copy, Clone, Debug, Deserialize)] pub enum StyleColor { + Reset, Black, Blue, Cyan, @@ -302,6 +305,7 @@ impl Style { impl StyleColor { pub fn color(&self, palette: &Palette) -> style::Color { match *self { + Self::Reset => palette.reset.color, Self::Black => palette.black.color, Self::Blue => palette.blue.color, Self::Cyan => palette.cyan.color, @@ -378,6 +382,10 @@ impl Color { // The conversion from `style::Color` can be a bit counter-intuitive // as the `tui-rs` library doesn't follow the ANSI naming standard. + pub fn reset() -> Self { + style::Color::Reset.into() + } + pub fn black() -> Self { style::Color::Black.into() } @@ -463,6 +471,7 @@ impl Default for Palette { Self { background: None, foreground: None, + reset: Color::reset(), // the default theme uses the terminal's ANSI colors black: Color::black(), red: Color::red(), ``` but the naming was awful, and i'd much prefer the `background` and `foreground` **Describe alternatives you've considered** using `White` and `Black`, but they did NOT fit well. **Additional context** no

kerem

2026-03-02 23:44:14 +03:00

closed this issue
added the
enhancement
label

kerem commented

2026-03-02 23:44:14 +03:00

Author

Owner

@aome510 commented on GitHub (Feb 22, 2023):

i want to use the terminal's default background and foreground colors,

So you want to specify the terminal's background colors as a StyleColor, right? I'm not too sure about your actual use cases for this. Can you provide one?

Please note that if you don't specify any values for fg and bg fields in a component style, their default values will be the terminal's background and foreground colors respectively.

Edit: they are actually based on the app's background and foreground, whose default values are based on the terminal's values

@aome510 commented on GitHub (Feb 22, 2023): > i want to use the terminal's default background and foreground colors, So you want to specify the terminal's background colors as a `StyleColor`, right? I'm not too sure about your actual use cases for this. Can you provide one? Please note that if you don't specify any values for `fg` and `bg` fields in a component style, their default values will be the terminal's background and foreground colors respectively. **Edit**: they are actually based on the app's background and foreground, whose default values are based on the terminal's values

kerem commented

2026-03-02 23:44:15 +03:00

Author

Owner

@sewnie commented on GitHub (Feb 22, 2023):

So you want to specify the terminal's background colors as a StyleColor, right? I'm not too sure about your actual use cases for this. Can you provide one?

i want to use the foreground and background colors??? i am forced to use BrightWhite which is not a foreground color matching with my terminal, and i also want to use background for the borders, to 'disable' them

@sewnie commented on GitHub (Feb 22, 2023): > So you want to specify the terminal's background colors as a StyleColor, right? I'm not too sure about your actual use cases for this. Can you provide one? i want to use the foreground and background colors??? i am forced to use `BrightWhite` which is not a foreground color matching with my terminal, and i also want to use `background` for the borders, to 'disable' them

kerem commented

2026-03-02 23:44:15 +03:00

Author

Owner

@aome510 commented on GitHub (Feb 22, 2023):

I asked this because StyleColor is only used to specify the fg and bg fields in a component style, which should use terminal's fg and bg colors by default. So only the logical use cases are setting fg to terminal's background color and setting bg to terminal's foreground color.

@aome510 commented on GitHub (Feb 22, 2023): I asked this because `StyleColor` is only used to specify the `fg` and `bg` fields in a component style, which should use terminal's fg and bg colors by default. So only the logical use cases are setting `fg` to terminal's background color and setting `bg` to terminal's foreground color.

kerem commented

2026-03-02 23:44:15 +03:00

Author

Owner

@sewnie commented on GitHub (Feb 22, 2023):

wdym? specifying no fg will result in an error, and giving no theme will result in the default colors.

@sewnie commented on GitHub (Feb 22, 2023): wdym? specifying no fg will result in an error, and giving no theme will result in the default colors.

kerem commented

2026-03-02 23:44:15 +03:00

Author

Owner

@aome510 commented on GitHub (Feb 22, 2023):

I'm referring to fg of a component style in here. You can see from the example that some component styles don't have fg specified:

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"] }

@aome510 commented on GitHub (Feb 22, 2023): I'm referring to `fg` of a component style in [here](https://github.com/aome510/spotify-player/blob/master/docs/config.md#component-styles). You can see from the example that some component styles don't have `fg` specified: > ``` > 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"] } > ```

kerem commented

2026-03-02 23:44:15 +03:00

Author

Owner

@sewnie commented on GitHub (Feb 22, 2023):

You can see from the example that some component styles don't have fg specified

giving no theme will result in the default colors.

i did notice you were right, default fg is specified.

HOWEVER, bg is not.

...it is.

so it seems the only issue for me is not being able to set bg to border:

and also, block_title will use border as fg:

@sewnie commented on GitHub (Feb 22, 2023): > You can see from the example that some component styles don't have fg specified > giving no theme will result in the default colors. i did notice you were right, default `fg` is specified. HOWEVER, `bg` is not. ...it is. so it seems the only issue for me is not being able to set `bg` to `border`: ![image](https://user-images.githubusercontent.com/47404953/220732797-d67a0d9c-8f29-43e5-85b8-4bc829deb640.png) and also, `block_title` will use `border` as fg: ![image](https://user-images.githubusercontent.com/47404953/220733115-b0e44f90-21c3-4495-a37c-1b2feb945e18.png)

kerem commented

2026-03-02 23:44:15 +03:00

Author

Owner

@aome510 commented on GitHub (Feb 22, 2023):

gotcha, u mean setting fg to bg for border to disable it right? I'm afraid that it must be implemented by adding another config option. AFAIK, it's not possible rn to get the terminal's colors to update something like fg = terminal's bg.

@aome510 commented on GitHub (Feb 22, 2023): gotcha, u mean setting `fg` to `bg` for `border` to _disable_ it right? I'm afraid that it must be implemented by adding another config option. AFAIK, it's not possible rn to get the terminal's colors to update something like `fg = terminal's bg`.

kerem commented

2026-03-02 23:44:15 +03:00

Author

Owner

@sewnie commented on GitHub (Feb 22, 2023):

bleh

i dont want borders to be disabled, i mean:

the 'hidden' borders look very nice thats for sure
idk how they would look without, but i would definitely prefer without either way

btw, what do you think i try to make a theme that looks similar to the propietary spotify client, and have it be the default? imo i believe the default theme is a bit weird, and i think this looks amazing.

@sewnie commented on GitHub (Feb 22, 2023): bleh i dont want borders to be disabled, i mean: ![image](https://user-images.githubusercontent.com/47404953/220737108-986989d3-b13e-450c-a49c-60d20e5c3d9e.png) the 'hidden' borders look very nice thats for sure idk how they would look without, but i would definitely prefer without either way btw, what do you think i try to make a theme that looks similar to the propietary spotify client, and have it be the default? imo i believe the default theme is a bit weird, and i think this looks amazing.

kerem commented

2026-03-02 23:44:15 +03:00

Author

Owner

@aome510 commented on GitHub (Feb 22, 2023):

yeah, I also mean hidden borders. I'll see if tui allows us to customize the border's look.

btw, what do you think i try to make a theme that looks similar to the propietary spotify client, and have it be the default? imo i believe the default theme is a bit weird, and i think this looks amazing.

I like the way it is now. The theme structure is mostly configurable, so users can customize the look however they want. Making a theme like Spotify's is def fun and it can be put as one of the examples or in the README.

@aome510 commented on GitHub (Feb 22, 2023): yeah, I also mean hidden borders. I'll see if `tui` allows us to customize the border's look. > btw, what do you think i try to make a theme that looks similar to the propietary spotify client, and have it be the default? imo i believe the default theme is a bit weird, and i think this looks amazing. I like the way it is now. The theme structure is _mostly_ configurable, so users can customize the look however they want. Making a theme like Spotify's is def fun and it can be put as one of the examples or in the README.

kerem commented

2026-03-02 23:44:15 +03:00

Author

Owner

@aome510 commented on GitHub (Feb 22, 2023):

In the meantime, I'll close this issue for now and re-open https://github.com/aome510/spotify-player/issues/128 for border/gauge customizations.

@aome510 commented on GitHub (Feb 22, 2023): In the meantime, I'll close this issue for now and re-open https://github.com/aome510/spotify-player/issues/128 for border/gauge customizations.

kerem commented

2026-03-02 23:44:15 +03:00

Author

Owner

@aome510 commented on GitHub (Feb 25, 2023):

@apprehensions no border of tui looks like this:

The window's title and its content are not aligned.

@aome510 commented on GitHub (Feb 25, 2023): @apprehensions no border of `tui` looks like this: <img width="1261" alt="Screen Shot 2023-02-25 at 1 01 17 PM" src="https://user-images.githubusercontent.com/40011582/221372523-f7d6d68a-a918-4375-9dec-5f7c5324e0c8.png"> The window's title and its content are not aligned.

kerem referenced this issue

2026-03-02 23:49:02 +03:00

[PR #68] [MERGED] Allow play/pause icons to be configurable #614

kerem referenced this issue

2026-03-14 12:38:34 +03:00

[GH-ISSUE #67] Play/Pause icon #954

kerem referenced this issue

2026-03-14 15:20:01 +03:00

[PR #68] [MERGED] Allow play/pause icons to be configurable #1551

Rows
Columns

[GH-ISSUE #144] background and foreground colors in theme.rs #67

[GH-ISSUE #144] `background` and `foreground` colors in `theme.rs` #67