Skip to content

Commit

Permalink
[#97] Refactor default themes (#107)
Browse files Browse the repository at this point in the history
Resolves #97 

## TODO
- [x] remove built-in themes in favour of a single default ANSI theme
- [x] update `theme_parse` script
- [x] update theme/palette documentation
- [x] update `theme.toml` and `app.toml` examples

## Theme config changes
- made `background` and `foreground` fields optional in a theme's palette. Default to use terminal's background/foreground colors if not specified.
- made 16 ANSI color fields optional in a theme's palette. Default to use terminal's ANSI colors if not specified.
- removed `selection_background` and `selection_foreground` fields from a theme's palette
- tweaked default value for `playback_progress_bar` component style
  • Loading branch information
aome510 committed Jan 17, 2023
1 parent 10dc71a commit cc0fde5
Show file tree
Hide file tree
Showing 5 changed files with 263 additions and 181 deletions.
25 changes: 13 additions & 12 deletions doc/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ All configuration files should be placed inside the application's configuration
| `client_id` | the Spotify client's ID | `65b708073fc0480ea92a077233ca87bd` |
| `ap_port` | the application's Spotify session connection port | `None` |
| `proxy` | the application's Spotify session connection proxy | `None` |
| `theme` | the application's theme | `dracula` |
| `theme` | the application's theme | `default` |
| `app_refresh_duration_in_ms` | the duration (in ms) between two consecutive application refreshes | `32` |
| `playback_refresh_duration_in_ms` | the duration (in ms) between two consecutive playback refreshes | `0` |
| `cover_image_refresh_duration_in_ms` | the duration (in ms) between two cover image refreshes (`image` feature only) | `2000` |
Expand Down Expand Up @@ -79,17 +79,19 @@ More details on the above configuration options can be found under the [Librespo

## Themes

`spotify-player` uses `theme.toml` to define additional themes in addition to the default themes (`dracula`, `ayu_light`, `gruvbox_dark`, `solarized_light`).
`spotify-player` uses `theme.toml` to look for user-defined themes.

The new theme can then be used by setting the `theme` option in the [general configuration](#general) file or specifying the `-t <THEME>` (`--theme <THEME>`) option when running the player.
The application's theme can be modified by setting the `theme` option in `app.toml` or by specifying the `-t <THEME>` (`--theme <THEME>`) option when running the player.

A theme has three main components: `name` (the theme's name), `palette` (the theme's color palette), `component_style` (a list of predefined style 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.
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.

An example of user-defined themes can be found in the example [`theme.toml`](../examples/theme.toml) file

### Use script to add theme

I have created [a `theme_parse` python script](../scripts/theme_parse) (require `pyaml` and `requests` libraries) to parse [Iterm2 alacritty's color schemes](https://github.com/mbadolato/iTerm2-Color-Schemes/tree/master/alacritty) into `spotify-player` compatible theme configurations.
[a `theme_parse` python script](../scripts/theme_parse) (require `pyaml` and `requests` libraries) can be used to parse [Iterm2 alacritty's color schemes](https://github.com/mbadolato/iTerm2-Color-Schemes/tree/master/alacritty) into `spotify-player` compatible theme configurations.

For example, you can run

Expand All @@ -101,7 +103,7 @@ to parse [Builtin Solarized Dark](https://github.com/mbadolato/iTerm2-Color-Sche

### Palette

To define a theme's color palette, user needs to specify **all** the below fields:
A theme's palette consists of the following fields:

- `background`
- `foreground`
Expand All @@ -121,14 +123,13 @@ To define a theme's color palette, user needs to specify **all** the below field
- `bright_red`
- `bright_white`
- `bright_yellow`
- `selection_background`
- `selection_foreground`

A field in the color palette must be set to the hex representation of a RGB color. For example, `background = "#1e1f29"`.
If a field is not specified, its default value will be based on the terminal's corresponding color.
If specified, a field's value must be set to be a hex representation of a RGB color. For example, `background = "#1e1f29"`.

### Component Styles

To define application's component styles, user needs to specify **all** the below fields:
To define application's component styles, user needs to specify **all of the below fields**:

- `block_title`
- `playback_track`
Expand All @@ -139,7 +140,7 @@ To define application's component styles, user needs to specify **all** the belo
- `page_desc`
- `table_header`

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 = 0, g = 0, b = 0} }`. `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 = ... } }`. `modifiers` can only be either `Italic` or `Bold`.

Default value for application's component styles:

Expand All @@ -148,7 +149,7 @@ block_title = { fg = "Magenta" }
playback_track = { fg = "Cyan", modifiers = ["Bold"] }
playback_album = { fg = "Yellow" }
playback_metadata = { fg = "BrightBlack" }
playback_progress_bar = { bg = "SelectionBackground", fg = "Green" }
playback_progress_bar = { bg = "BrightBlack", fg = "Green" }
current_playing = { fg = "Green", modifiers = ["Bold"] }
page_desc = { fg = "Cyan", modifiers = ["Bold"] }
table_header = { fg = "Blue" }
Expand Down
2 changes: 1 addition & 1 deletion examples/app.toml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
theme = "dracula"
theme = "default"
client_id = "65b708073fc0480ea92a077233ca87bd"
app_refresh_duration_in_ms = 32
playback_refresh_duration_in_ms = 0
Expand Down
144 changes: 118 additions & 26 deletions examples/theme.toml
Original file line number Diff line number Diff line change
@@ -1,63 +1,155 @@
# example theme configuration file
# This file adds two new themes `dracula2` and `solarized_dark`
# in addition to the default application's themes.

[[themes]]
name = "dracula2"
name = "dracula"
[themes.palette]
background = "#1e1f29"
foreground = "#f8f8f2"
black = "#000000"
blue = "#bd93f9"
cyan = "#8be9fd"
red = "#ff5555"
green = "#50fa7b"
yellow = "#f1fa8c"
blue = "#bd93f9"
magenta = "#ff79c6"
red = "#ff5555"
cyan = "#8be9fd"
white = "#bbbbbb"
yellow = "#f1fa8c"
bright_black = "#555555"
bright_blue = "#bd93f9"
bright_cyan = "#8be9fd"
bright_red = "#ff5555"
bright_green = "#50fa7b"
bright_yellow = "#f1fa8c"
bright_blue = "#bd93f9"
bright_magenta = "#ff79c6"
bright_red = "#ff5555"
bright_cyan = "#8be9fd"
bright_white = "#ffffff"
bright_yellow = "#f1fa8c"
selection_background = "#44475a"
selection_foreground = "#ffffff"
[themes.component_style]
block_title = { fg = "Magenta" }
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" }

[[themes]]
name = "gruvbox_dark"
[themes.palette]
background = "#282828"
foreground = "#ebdbb2"
black = "#282828"
red = "#cc241d"
green = "#98971a"
yellow = "#d79921"
blue = "#458588"
magenta = "#b16286"
cyan = "#689d6a"
white = "#a89984"
bright_black = "#928374"
bright_red = "#fb4934"
bright_green = "#b8bb26"
bright_yellow = "#fabd2f"
bright_blue = "#83a598"
bright_magenta = "#d3869b"
bright_cyan = "#8ec07c"
bright_white = "#ebdbb2"
[themes.component_style]
# The `component_style` field of a theme is optional.
# If not specified, a default value will be used as below:
block_title = { fg = "Magenta" }
playback_track = { fg = "Cyan", modifiers = ["Bold"] }
playback_album = { fg = "Yellow" }
playback_metadata = { fg = "BrightBlack" }
playback_progress_bar = { bg = "SelectionBackground", fg = "Green" }
playback_progress_bar = { bg = "BrightBlack", fg = "Green" }
current_playing = { fg = "Green", modifiers = ["Bold"] }
page_desc = { fg = "Cyan", modifiers = ["Bold"] }
table_header = { fg = "Blue" }

[[themes]]
name = "gruvbox_light"
[themes.palette]
background = "#fbf1c7"
foreground = "#282828"
black = "#fbf1c7"
red = "#9d0006"
green = "#79740e"
yellow = "#b57614"
blue = "#076678"
magenta = "#8f3f71"
cyan = "#427b58"
white = "#3c3836"
bright_black = "#9d8374"
bright_red = "#cc241d"
bright_green = "#98971a"
bright_yellow = "#d79921"
bright_blue = "#458588"
bright_magenta = "#b16186"
bright_cyan = "#689d69"
bright_white = "#7c6f64"
[themes.component_style]
block_title = { fg = "Magenta" }
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" }


[[themes]]
name = "solarized_dark"
[themes.palette]
background = "#002b36"
foreground = "#839496"
black = "#073642"
blue = "#268bd2"
cyan = "#2aa198"
red = "#dc322f"
green = "#859900"
yellow = "#b58900"
blue = "#268bd2"
magenta = "#d33682"
red = "#dc322f"
cyan = "#2aa198"
white = "#eee8d5"
yellow = "#b58900"
bright_black = "#002b36"
bright_red = "#cb4b16"
bright_green = "#586e75"
bright_yellow = "#657b83"
bright_blue = "#839496"
bright_magenta = "#6c71c4"
bright_cyan = "#93a1a1"
bright_white = "#fdf6e3"
[themes.component_style]
block_title = { fg = "Magenta" }
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" }

[[themes]]
name = "solarized_light"
[themes.palette]
background = "#fdf6e3"
foreground = "#657b83"
black = "#073642"
red = "#dc322f"
green = "#859900"
yellow = "#b58900"
blue = "#268bd2"
magenta = "#d33682"
cyan = "#2aa198"
white = "#eee8d5"
bright_black = "#002b36"
bright_red = "#cb4b16"
bright_green = "#586e75"
bright_yellow = "#657b83"
bright_blue = "#839496"
bright_magenta = "#6c71c4"
bright_red = "#cb4b16"
bright_cyan = "#93a1a1"
bright_white = "#fdf6e3"
bright_yellow = "#657b83"
selection_background = "#073642"
selection_foreground = "#93a1a1"
[themes.component_style]
block_title = { fg = "Magenta" }
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" }
40 changes: 22 additions & 18 deletions scripts/theme_parse
Original file line number Diff line number Diff line change
Expand Up @@ -12,47 +12,51 @@ if len(sys.argv) > 1:
else:
saved_name = name
else:
name = 'Dracula'
saved_name = 'dracula'
print("Usage: theme_parse `theme_name` `theme_saved_name`", file=sys.stderr)
exit(1)

url = f'https://raw.githubusercontent.com/mbadolato/iTerm2-Color-Schemes/master/alacritty/{name}.yml'
url = f"https://raw.githubusercontent.com/mbadolato/iTerm2-Color-Schemes/master/alacritty/{name}.yml"

content = requests.get(url).content
req = requests.get(url)

data = yaml.safe_load(content)
if req.status_code != 200:
print(
f"GET {url} request failed with status code: {req.status_code}", file=sys.stderr
)
exit(1)

data = yaml.safe_load(req.content)

print(
f'''[[themes]]
f"""[[themes]]
name = "{saved_name}"
[themes.palette]
background = "{data["colors"]["primary"]["background"]}"
foreground = "{data["colors"]["primary"]["foreground"]}"
black = "{data["colors"]["normal"]["black"]}"
blue = "{data["colors"]["normal"]["blue"]}"
cyan = "{data["colors"]["normal"]["cyan"]}"
red = "{data["colors"]["normal"]["red"]}"
green = "{data["colors"]["normal"]["green"]}"
yellow = "{data["colors"]["normal"]["yellow"]}"
blue = "{data["colors"]["normal"]["blue"]}"
magenta = "{data["colors"]["normal"]["magenta"]}"
red = "{data["colors"]["normal"]["red"]}"
cyan = "{data["colors"]["normal"]["cyan"]}"
white = "{data["colors"]["normal"]["white"]}"
yellow = "{data["colors"]["normal"]["yellow"]}"
bright_black = "{data["colors"]["bright"]["black"]}"
bright_blue = "{data["colors"]["bright"]["blue"]}"
bright_cyan = "{data["colors"]["bright"]["cyan"]}"
bright_red = "{data["colors"]["bright"]["red"]}"
bright_green = "{data["colors"]["bright"]["green"]}"
bright_yellow = "{data["colors"]["bright"]["yellow"]}"
bright_blue = "{data["colors"]["bright"]["blue"]}"
bright_magenta = "{data["colors"]["bright"]["magenta"]}"
bright_red = "{data["colors"]["bright"]["red"]}"
bright_cyan = "{data["colors"]["bright"]["cyan"]}"
bright_white = "{data["colors"]["bright"]["white"]}"
bright_yellow = "{data["colors"]["bright"]["yellow"]}"
selection_background = "{data["colors"]["selection"]["background"]}"
selection_foreground = "{data["colors"]["selection"]["text"]}"
[themes.component_style]
block_title = {{ fg = "Magenta" }}
playback_track = {{ fg = "Cyan", modifiers = ["Bold"] }}
playback_album = {{ fg = "Yellow" }}
playback_metadata = {{ fg = "BrightBlack" }}
playback_progress_bar = {{ bg = "SelectionBackground", fg = "Green" }}
playback_progress_bar = {{ bg = "BrightBlack", fg = "Green" }}
current_playing = {{ fg = "Green", modifiers = ["Bold"] }}
page_desc = {{ fg = "Cyan", modifiers = ["Bold"] }}
table_header = {{ fg = "Blue" }}
'''
"""
)
Loading

0 comments on commit cc0fde5

Please sign in to comment.