Improve customization #224

Erimus-Koo · 2023-06-24T12:51:39Z

I took the liberty of rearranging the code and made a lot of changes at once. I hope these changes are useful and not too difficult to understand.

Because I work as an artist in a gaming company, the changes mainly focus on spacing, color, icons, etc.

Rearrange

The previous code may have gone through multiple additions, so after I made changes, the new code I added looked even more messy. So in the end, I adjusted the order of the code and its naming consistency. However, I did not adjust the name of tmux's options to ensure backward compatibility.

The new code follows the following rules.

Color Palette
Get Tmux Option Variables
- General
- For Left Icon
- For Window
- For Plugins
Left Icon Area
Window Area
Right Plugins Area

Left Icon Area

Add padding & margin
Add customized color for prefix status (Previous is )
Remove too many if, and standardize the logic for enabling or disabling powerline.
status_bg -> variable

Here is my configuration, and all default values that have not been changed.

Handling of show_powerline

In the previous version, there were many if statements used to handle show_powerline.
However, I believe it is simply a marker. If show_powerline is not enabled, changing the marker to blank ("") would suffice. Although there are still several color operations of the blank that need to be handled, it is better than duplicating everything.

Window Area

Customize color
Customize separator (can invert left sep color)
Customize padding & margin
Remove the color of flags (follow the fg)
The window tab will maintain a consistent width regardless of focus.
The tab will not suddenly change while you switch between windows.
(Flags will change the width)

Disable dracula's window settings

If you turn @dracula-window-disabled to true, all the window settings in dracula.sh won't be rendered, and .tmux.conf works. You can do some complex things as you wish.

Index: Window name > folder of the current pane
You can also display the number of panes, current program, etc.

Plugins Area

Customize each side padding (rightmost separately)
Fix the padding of the timezone string.
If the timezone existed, add one space before the timezone. If not, there's nothing.
(Prev version always adds an extra space)

P.S.

In my daily work, I primarily write Python and front-end projects, and I rarely write Shell scripts. So, I am concerned about making errors and would greatly appreciate a review of my work.

- Add padding & margin - Add customized color for prefix status - Remove too many if, and standardize the logic for enabling or disabling powerline. - status_bg -> variable

- Customize color - Customize separator (can invert left sep color) - Customize padding & margin - Remove color of flags (follow the fg) - The window tab will maintain a consistent width regardless of focus. (Zoom and flags will change the width)

- Customize each side padding (rightmost separately) - Fix the padding of the timezone string

- Add length limit (for integer) - Default align to right (number should align to right, align center makes right padding without control)

…string_length

Erimus-Koo · 2023-06-24T13:00:02Z

And my .tmux.conf

# dracula theme {

  # general {
    set -g @dracula-show-powerline true  # Enable powerline symbols
    # separator for left
    set -g @dracula-show-left-sep   # █     
    # separator for right symbol (can set any symbol you like as seperator)
    set -g @dracula-show-right-sep   # █     

    set -g @dracula-border-contrast true  # pane edge highlight
    set -g @dracula-status-bg 'gray'
  # }

  # left icon area {
    set -g @dracula-show-left-icon '卵#S' # before window #S     🔍  
    # set -g @dracula-show-left-icon '卵#S #{?window_zoomed_flag, ,}' # before window #S     🔍  
    set -g @dracula-left-icon-padding-left 1
    set -g @dracula-left-icon-padding-right 0
    set -g @dracula-left-icon-margin-right 1
    set -g @dracula-left-icon-bg 'pink'
    set -g @dracula-left-icon-fg 'dark_gray'
    set -g @dracula-left-icon-prefix-on-bg 'red'
    set -g @dracula-left-icon-prefix-on-fg 'white'
  # }

  # window area{
    set -g @dracula-show-flags false  # marks of recent windows
    # inactivty window
    set -g @dracula-window-bg 'gray'
    set -g @dracula-window-fg 'light_purple'
    # activty window
    set -g @dracula-window-current-bg 'green'
    set -g @dracula-window-current-fg 'dark_gray'
    # padding
    set -g @dracula-window-padding-left 0
    set -g @dracula-window-padding-right 0
    set -g @dracula-window-margin-right 1
    # separator mark, set to "" same as the show-sep
    set -g @dracula-window-left-sep ''  #    
    set -g @dracula-window-right-sep ''  #    
    set -g @dracula-window-left-sep-invert false
    # use customized window tag
    set -g @dracula-window-disabled true

    # Dracula Color Pallette{
      white='#f8f8f2'
      gray='#44475a'
      dark_gray='#282a36'
      light_purple='#bd93f9'
      dark_purple='#6272a4'
      cyan='#8be9fd'
      green='#50fa7b'
      orange='#ffb86c'
      red='#ff5555'
      pink='#ff79c6'
      yellow='#f1fa8c'
    # }

    set-window-option -g window-status-format " \
#[fg=${green}]#I:#W#[fg=${dark_purple}]|>\
#[fg=${light_purple}]\
#{?window_zoomed_flag, ,}\
#(pwd=\"#{pane_current_path}\"; echo \${pwd####*/})\
  "
    set-window-option -g window-status-current-format "\
#[bg=${gray},fg=${green}]#[bg=${green},fg=${dark_gray}]#I:#W\
#[fg=${green},bg=${light_purple}] \
#[fg=${yellow}]#{?window_zoomed_flag, ,}\
#[fg=${dark_gray}]\
#(pwd=\"#{pane_current_path}\"; echo \${pwd####*/})\
#[fg=${light_purple},bg=${gray}] "
  # }

  # plugins{
    set -g @dracula-show-empty-plugins false    # hide empty plugin
    # plugins padding
    set -g @dracula-plugin-padding-left 0
    set -g @dracula-plugin-padding-right 1
    set -g @dracula-plugin-padding-rightmost 1

    # available plugins: battery, cpu-usage, git, gpu-usage, ram-usage, network, network-bandwidth, network-ping, attached-clients, network-vpn, weather, time, spotify-tui, kubernetes-context
    set -g @dracula-plugins "git network-ping ram-usage cpu-usage network-vpn weather battery time"


    # available colors: white, gray, dark_gray, light_purple, dark_purple, cyan, green, orange, red, pink, yellow
    # set -g @dracula-[plugin-name]-colors "[background] [foreground]"

    # git
    set -g @dracula-git-colors "orange dark_gray"

    # network
    set -g @dracula-ping-server "baidu.com"
    set -g @dracula-ping-rate 1
    set -g @dracula-ping-label ""
    set -g @dracula-network-ping-colors "dark_gray light_purple"
    # set -g @dracula-network-bandwidth eth0
    # set -g @dracula-network-bandwidth-interval 0
    # set -g @dracula-network-bandwidth-show-interface false

    # ram & cpu
    set -g @dracula-ram-usage-label ""
    set -g @dracula-ram-usage-colors "cyan gray"
    set -g @dracula-cpu-usage-label ""  # 
    set -g @dracula-cpu-display-load false  # T:avg load, F:percent
    set -g @dracula-cpu-usage-colors "red white"

    # weather
    set -g @dracula-show-fahrenheit false   # use celsius
    # set -g @dracula-fixed-location "Beijing"
    set -g @dracula-show-location false
    set -g @dracula-weather-colors "gray cyan"

    # battery
    set -g @dracula-battery-label ""  #  
    set -g @dracula-battery-colors "dark_gray pink"

    # time
    set -g @dracula-time-colors "light_purple dark_gray"
    set -g @dracula-military-time true      # 24 hours format
    set -g @dracula-show-timezone false     # hide timezone
  # }
# }

ethancedwards8 · 2023-07-10T02:56:11Z

This all looks really good. I would like some members of the community to review it, test it, try it out, etc. Does this change anything for users updating? I don't want it to break existing configs.

Erimus-Koo · 2023-07-10T03:08:08Z

I think all the user settings have a default value same as the previous version, but I do need more people to test it, there are so many changes. 😂

rackodo · 2023-07-10T04:09:00Z

Oh, hey, I can help! I've actually been using Erimus' fork of tmux for about a week now, and I've gotta say that I love the customisability. I'm more than open to provide feedback, if you're interested. :)

Erimus-Koo · 2023-07-10T05:34:40Z

Oh, hey, I can help! I've actually been using Erimus' fork of tmux for about a week now, and I've gotta say that I love the customisability. I'm more than open to provide feedback, if you're interested. :)

I'm glad you like it.

Some parts I worry about:

I'm not a native English speaker and I don't know if there is a difficult part to understand in naming.
As @ethancedwards8 said, Is the configuration backward compatible and will it mess up other users' settings?

rackodo · 2023-07-11T03:38:43Z

I'm not a native English speaker and I don't know if there is a difficult part to understand in naming.

I didn't find any difficulties in understanding the documentation you put for updating the appearance. It's easy to read and I didn't have any difficulty translating it into my .tmux.conf.

As @ethancedwards8 said, Is the configuration backward compatible and will it mess up other users' settings?

I replaced the original dracula.sh file in .config/tmux/plugins/tmux/scripts with your dracula.sh file and saw no issues pop up. Everything seemed to work completely fine, but that might be different for other users.

Erimus-Koo · 2023-07-11T04:57:09Z

That sounds good.

And I found there are some font problems with my .tmux.conf, some glyphs of the mdi icon had been removed. So I updated my .tmux.conf.

And the font I use now is JetBrainsMono Nerd Font v3.0.2
(Prev font is 1.x version JetBrains NF complete.)

My lastest conf 👇🏻

# dracula theme {

  # general {
    set -g @dracula-show-powerline true  # Enable powerline symbols
    # separator for left
    set -g @dracula-show-left-sep   # █     
    # separator for right symbol (can set any symbol you like as seperator)
    set -g @dracula-show-right-sep   # █     

    set -g @dracula-border-contrast true  # pane edge highlight
    set -g @dracula-status-bg 'gray'
  # }

  # left icon area {
    set -g @dracula-show-left-icon '󰐝 #S' # before window #S 󰁨  󰄛 󰊠 🔍   󰚌
    # set -g @dracula-show-left-icon '󰐝 #S #{?window_zoomed_flag, ,}'
    set -g @dracula-left-icon-padding-left 1
    set -g @dracula-left-icon-padding-right 0
    set -g @dracula-left-icon-margin-right 1
    set -g @dracula-left-icon-bg 'pink'
    set -g @dracula-left-icon-fg 'dark_gray'
    set -g @dracula-left-icon-prefix-on-bg 'red'
    set -g @dracula-left-icon-prefix-on-fg 'white'
  # }

  # window area{
    set -g @dracula-show-flags false  # marks of recent windows
    # inactivty window
    set -g @dracula-window-bg 'gray'
    set -g @dracula-window-fg 'light_purple'
    # activty window
    set -g @dracula-window-current-bg 'green'
    set -g @dracula-window-current-fg 'dark_gray'
    # padding
    set -g @dracula-window-padding-left 0
    set -g @dracula-window-padding-right 0
    set -g @dracula-window-margin-right 1
    # separator mark, set to "" same as the show-sep
    set -g @dracula-window-left-sep ''  #    
    set -g @dracula-window-right-sep ''  #    
    set -g @dracula-window-left-sep-invert false
    # use customized window tag
    set -g @dracula-window-disabled true

    # Dracula Color Pallette{
      dark_gray='#282a36'
      gray='#44475a'
      white='#f8f8f2'
      dark_purple='#6272a4'
      cyan='#8be9fd'
      green='#50fa7b'
      orange='#ffb86c'
      pink='#ff79c6'
      light_purple='#bd93f9'
      red='#ff5555'
      yellow='#f1fa8c'

      # dark_gray=59
      # gray=60
      # white=231
      # dark_purple=103
      # cyan=159
      # green=120
      # orange=222
      # pink=212
      # light_purple=183
      # red=210
      # yellow=229
    # }

    set-window-option -g window-status-format " \
#[fg=${green}]#W#[fg=${dark_purple}] \
#[fg=${light_purple}]\
#{?window_zoomed_flag, ,}\
#(pwd=\"#{pane_current_path}\"; echo \${pwd####*/})\
  "
    set-window-option -g window-status-current-format "\
#[bg=${gray},fg=${green}]#[bg=${green},fg=${dark_gray}]#W\
#[fg=${green},bg=${light_purple}] \
#[fg=${yellow}]#{?window_zoomed_flag, ,}\
#[fg=${dark_gray}]\
#(pwd=\"#{pane_current_path}\"; echo \${pwd####*/})\
#[fg=${light_purple},bg=${gray}] "
  # }

  # plugins{
    set -g @dracula-show-empty-plugins false    # hide empty plugin
    # plugins padding
    set -g @dracula-plugin-padding-left 0
    set -g @dracula-plugin-padding-right 1
    set -g @dracula-plugin-padding-rightmost 1

    # available plugins: battery, cpu-usage, git, gpu-usage, ram-usage, network, network-bandwidth, network-ping, attached-clients, network-vpn, weather, time, spotify-tui, kubernetes-context
    set -g @dracula-plugins "git network-ping ram-usage cpu-usage network-vpn weather"


    # available colors: white, gray, dark_gray, light_purple, dark_purple, cyan, green, orange, red, pink, yellow
    # set -g @dracula-[plugin-name]-colors "[background] [foreground]"

    # git
    set -g @dracula-git-colors "orange dark_gray"

    # network
    set -g @dracula-ping-server "baidu.com"
    set -g @dracula-ping-rate 10
    set -g @dracula-ping-label ""
    set -g @dracula-network-ping-colors "dark_gray light_purple"
    # set -g @dracula-network-bandwidth eth0
    # set -g @dracula-network-bandwidth-interval 0
    # set -g @dracula-network-bandwidth-show-interface false

    # ram & cpu
    set -g @dracula-ram-usage-label "󰍛"
    set -g @dracula-ram-usage-colors "cyan gray"
    set -g @dracula-cpu-usage-label "󰊚"  #  
    set -g @dracula-cpu-display-load false  # T:avg load, F:percent
    set -g @dracula-cpu-usage-colors "red white"

    # weather
    set -g @dracula-show-fahrenheit false   # use celsius
    # set -g @dracula-fixed-location "Beijing"
    set -g @dracula-show-location false
    set -g @dracula-weather-colors "gray cyan"

    # battery
    set -g @dracula-battery-label "󰉁"  # 󰉁  󰢝
    set -g @dracula-battery-colors "dark_gray pink"

    # time
    set -g @dracula-time-colors "light_purple dark_gray"
    set -g @dracula-military-time true      # 24 hours format
    set -g @dracula-show-timezone false     # hide timezone
  # }
# }

rackodo · 2023-07-11T07:28:28Z

I essentially copied your tmux conf but changed the separators and colours.

Here:

# dracula theme {

  # general {
    set -g @dracula-show-powerline true  # Enable powerline symbols
    # separator for left
    set -g @dracula-show-left-sep   # █     
    # separator for right symbol (can set any symbol you like as seperator)
    set -g @dracula-show-right-sep   # █     

    set -g @dracula-border-contrast true  # pane edge highlight
    set -g @dracula-status-bg 'gray'
  # }

  # left icon area {
    set -g @dracula-show-left-icon ' #{user}' # before window #S     🔍  
    # set -g @dracula-show-left-icon '卵#S #{?window_zoomed_flag, ,}' # before window #S     🔍  
    set -g @dracula-left-icon-padding-left 1
    set -g @dracula-left-icon-padding-right 1
    set -g @dracula-left-icon-margin-right 0
    set -g @dracula-left-icon-bg 'cyan'
    set -g @dracula-left-icon-fg 'dark_gray'
    set -g @dracula-left-icon-prefix-on-bg 'white'
    set -g @dracula-left-icon-prefix-on-fg 'dark_gray'
  # }

  # window area{
    set -g @dracula-show-flags false  # marks of recent windows
    # inactivty window
    set -g @dracula-window-bg 'gray'
    set -g @dracula-window-fg 'light_purple'
    # activty window
    set -g @dracula-window-current-bg 'green'
    set -g @dracula-window-current-fg 'dark_gray'
    # padding
    set -g @dracula-window-padding-left 0 
    set -g @dracula-window-padding-right 0
    set -g @dracula-window-margin-right 0
    # separator mark, set to "" same as the show-sep
    set -g @dracula-window-left-sep ''  #    
    set -g @dracula-window-right-sep ''  #    
    set -g @dracula-window-left-sep-invert false
    # use customized window tag
    set -g @dracula-window-disabled true

    # Dracula Color Pallette{
      white='#f8f8f2'
      gray='#44475a'
      dark_gray='#282a36'
      light_purple='#bd93f9'
      dark_purple='#6272a4'
      cyan='#8be9fd'
      green='#50fa7b'
      orange='#ffb86c'
      red='#ff5555'
      pink='#ff79c6'
      yellow='#f1fa8c'
    # }

    set-window-option -g window-status-format "\
  #[fg=${cyan}]#I:#W#[fg=${dark_purple}] \\ \
#[fg=${orange}]\
#{?window_zoomed_flag, ,}\
#(pwd=\"#{pane_current_path}\"; echo \${pwd####*/})\
  "
    set-window-option -g window-status-current-format "\
#[bg=${gray},fg=${cyan}]#[bg=${cyan},fg=${dark_gray}] #I:#W\
 #[fg=${cyan},bg=${orange}]\
 #[fg=${yellow}]#{?window_zoomed_flag, ,}\
#[fg=${dark_gray}]\
#(pwd=\"#{pane_current_path}\"; echo \${pwd####*/})\
 #[fg=${orange},bg=${gray}]"
  # }

  # plugins{
    set -g @dracula-show-empty-plugins false    # hide empty plugin
    # plugins padding
    set -g @dracula-plugin-padding-left 1
    set -g @dracula-plugin-padding-right 1
    set -g @dracula-plugin-padding-rightmost 1

    # available plugins: battery, cpu-usage, git, gpu-usage, ram-usage, network, network-bandwidth, network-ping, attached-clients, network-vpn, weather, time, spotify-tui, kubernetes-context
    set -g @dracula-plugins "git weather battery time"


    # available colors: white, gray, dark_gray, light_purple, dark_purple, cyan, green, orange, red, pink, yellow
    # set -g @dracula-[plugin-name]-colors "[background] [foreground]"

    # git
    set -g @dracula-git-colors "orange dark_gray"

    # network
    set -g @dracula-ping-server "baidu.com"
    set -g @dracula-ping-rate 1
    set -g @dracula-ping-label ""
    set -g @dracula-network-ping-colors "dark_gray light_purple"
    # set -g @dracula-network-bandwidth eth0
    # set -g @dracula-network-bandwidth-interval 0
    # set -g @dracula-network-bandwidth-show-interface false

    # ram & cpu
    set -g @dracula-ram-usage-label ""
    set -g @dracula-ram-usage-colors "cyan gray"
    set -g @dracula-cpu-usage-label ""  # 
    set -g @dracula-cpu-display-load false  # T:avg load, F:percent
    set -g @dracula-cpu-usage-colors "red white"

    # weather
    set -g @dracula-show-fahrenheit false   # use celsius
    # set -g @dracula-fixed-location "Beijing"
    set -g @dracula-show-location false
    set -g @dracula-weather-colors "gray cyan"

    # battery
    set -g @dracula-battery-label ""  #  
    set -g @dracula-battery-colors "dark_gray pink"

    # time
    set -g @dracula-time-colors "light_purple dark_gray"
    set -g @dracula-military-time true      # 24 hours format
    set -g @dracula-show-timezone false     # hide timezone
  # }
# }

If I had to make one request, I wanted to ask if being able to implement an @dracula-show-left-icon-onPrefix would be possible? As in, make it possible to have a different string show when the prefix is activated.

Regardless, this has my vote for being a really big improvement on the original tmux package's customisation. This is impressive work. :)

Erimus-Koo · 2023-07-11T08:34:02Z

I've used a plugin(prefix highlight color) that can display the Prefix status, and mode of the window or something.
It can show the Prefix key as string, mine is \``, and most people might be ^b ^a`.
The length of the string is a little problem of me, that might cause a flick.

In my current version, I use color to know if Prefix activating and you can set the color of it.

And I have an idea, you can set it as the left icon.
It means if client_prefix is pressed, show the prefix.

set -g @dracula-show-left-icon '󰐝 #S #{?client_prefix,#{prefix},}'

Erimus-Koo · 2023-07-11T08:37:31Z

And I do also wonder where to find all the verbs and names of Tmux.

I can't find client_prefix in tmux(1): terminal multiplexer - Linux man page

I found it in the plugin(prefix highlight color)'s source code.
I'm not sure if you need to install the plugin first.

set -g @plugin 'tmux-plugins/tmux-prefix-highlight'

PengfeiM · 2023-11-24T06:20:52Z

does this pr is still wip?
I have been using it for about 3 month, with a cherrypick from main branch which enable a label to show sync status, it works well so far.

luftaquila · 2024-02-05T14:59:36Z

I am waiting for this to be merged for the left icon color customization, etc!

Erimus-Koo · 2024-02-07T02:50:48Z

Currently, there are 70 commits behind and 7 other PRs waiting.
Most of my changes are in the scripts/dracula.sh file, which will impact multiple lines.

While reordering the code may not be ideal, I need to add many options. If I don't establish a strong foundation from the start, it could lead to even more confusion later on.

In an open-source project, reorganizing the code is still too difficult. (It may not be necessary.)
In order to enhance code readability, I attempted to divide my previous modifications into separate commits.

In my opinion, the rules below still apply.

The new code follows the following rules.

Color Palette

Get Tmux Option Variables

General

For Left Icon

For Window

For Plugins

Left Icon Area

Window Area

Right Plugins Area

One rule is that the plugins can be sorted alphabetically from A-Z.
Other issues, such as naming, comments, and code style issues, can also be fixed.

It may be better for the owner to reorder the code, and then I can add my code to that version.

Erimus-Koo · 2024-02-07T04:14:54Z

I installed the Dracula theme for tmux using the command

set -g @plugin 'dracula/tmux'

However, I think it would be better if the default name of the theme was more specific.

Erimus-Koo · 2024-02-07T04:16:35Z

Sorry, closed with wrong shortcut.

Erimus-Koo added 7 commits June 23, 2023 14:41

Restructuring, No changes

ba9b5a6

Improve Left Icon & Unify show powerline

f0201e4

- Add padding & margin - Add customized color for prefix status - Remove too many if, and standardize the logic for enabling or disabling powerline. - status_bg -> variable

Improve window area

0aeef24

- Customize color - Customize separator (can invert left sep color) - Customize padding & margin - Remove color of flags (follow the fg) - The window tab will maintain a consistent width regardless of focus. (Zoom and flags will change the width)

Improve Plugins Area

7603b10

- Customize each side padding (rightmost separately) - Fix the padding of the timezone string

Change the display of percentage

a5967ea

- Add length limit (for integer) - Default align to right (number should align to right, align center makes right padding without control)

Plugin - ping: add label & truncate integer

866e403

Use utils/normalize_percent_len in more plugins, rename to normalize_…

158e68f

…string_length

Erimus-Koo closed this Feb 7, 2024

Erimus-Koo reopened this Feb 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve customization #224

Improve customization #224

Erimus-Koo commented Jun 24, 2023

Erimus-Koo commented Jun 24, 2023

ethancedwards8 commented Jul 10, 2023

Erimus-Koo commented Jul 10, 2023

rackodo commented Jul 10, 2023

Erimus-Koo commented Jul 10, 2023

rackodo commented Jul 11, 2023 •

edited

Loading

Erimus-Koo commented Jul 11, 2023

rackodo commented Jul 11, 2023

Erimus-Koo commented Jul 11, 2023

Erimus-Koo commented Jul 11, 2023

PengfeiM commented Nov 24, 2023

luftaquila commented Feb 5, 2024

Erimus-Koo commented Feb 7, 2024

Erimus-Koo commented Feb 7, 2024

Erimus-Koo commented Feb 7, 2024

Improve customization #224

Are you sure you want to change the base?

Improve customization #224

Conversation

Erimus-Koo commented Jun 24, 2023

Rearrange

Left Icon Area

Handling of show_powerline

Window Area

Disable dracula's window settings

Plugins Area

P.S.

Erimus-Koo commented Jun 24, 2023

ethancedwards8 commented Jul 10, 2023

Erimus-Koo commented Jul 10, 2023

rackodo commented Jul 10, 2023

Erimus-Koo commented Jul 10, 2023

rackodo commented Jul 11, 2023 • edited Loading

Erimus-Koo commented Jul 11, 2023

rackodo commented Jul 11, 2023

Erimus-Koo commented Jul 11, 2023

Erimus-Koo commented Jul 11, 2023

PengfeiM commented Nov 24, 2023

luftaquila commented Feb 5, 2024

Erimus-Koo commented Feb 7, 2024

Erimus-Koo commented Feb 7, 2024

Erimus-Koo commented Feb 7, 2024

rackodo commented Jul 11, 2023 •

edited

Loading