Update SketchyBar styling to match Waybar appearance

- Change font from SF Mono to Fira Code for consistency with Waybar
- Reduce bar height from 32px to 30px
- Switch to solid dark gray background (#333333) instead of semi-transparent black
- Remove rounded corners on items (corner_radius 0 instead of 5)
- Make item backgrounds full height (30px) to match bar height
- Remove all separator items between modules for cleaner appearance
- Add topmost and sticky properties to prevent window shadows from darkening bar
- Adjust aerospace bottom gap from 40px to 38px to account for new bar height
- Set all workspace text to white with bold font for active workspace
This commit is contained in:
2025-12-05 14:58:11 -08:00
parent 0e9671a45f
commit 89994e3fc8

View File

@@ -298,7 +298,7 @@ in
gaps = { gaps = {
outer = { outer = {
top = 0; top = 0;
bottom = 40; bottom = 38;
left = 0; left = 0;
right = 0; right = 0;
}; };
@@ -337,8 +337,8 @@ in
FOCUSED=0xff285577 FOCUSED=0xff285577
# Background colors matching i3blocks bar # Background colors matching i3blocks bar
BAR_BG=0xcc000000 # Semi-transparent black BAR_BG=0xff333333 # Dark gray
ITEM_BG=0xff333333 # Dark gray for inactive items ITEM_BG=0xff333333 # Dark gray matching bar
# Text colors # Text colors
TEXT=0xffffffff # White text TEXT=0xffffffff # White text
@@ -351,29 +351,32 @@ in
# Configure the bar appearance # Configure the bar appearance
${pkgs.sketchybar}/bin/sketchybar --bar \ ${pkgs.sketchybar}/bin/sketchybar --bar \
position=bottom \ position=bottom \
height=32 \ height=30 \
color=$BAR_BG \ color=$BAR_BG \
border_width=0 \ border_width=0 \
corner_radius=0 \ corner_radius=0 \
padding_left=10 \ padding_left=10 \
padding_right=10 padding_right=10 \
shadow=off \
topmost=on \
sticky=on
# Set default properties for all items # Set default properties for all items
# Using monospace font to match waybar's Fira Code styling # Using monospace font to match waybar's Fira Code styling
${pkgs.sketchybar}/bin/sketchybar --default \ ${pkgs.sketchybar}/bin/sketchybar --default \
updates=when_shown \ updates=when_shown \
icon.font="SF Mono:Regular:13.0" \ icon.font="Fira Code:Regular:13.0" \
icon.color=$TEXT \ icon.color=$TEXT \
icon.padding_left=4 \ icon.padding_left=4 \
icon.padding_right=4 \ icon.padding_right=4 \
label.font="SF Mono:Regular:13.0" \ label.font="Fira Code:Regular:13.0" \
label.color=$TEXT \ label.color=$TEXT \
label.padding_left=4 \ label.padding_left=4 \
label.padding_right=4 \ label.padding_right=4 \
padding_left=4 \ padding_left=4 \
padding_right=4 \ padding_right=4 \
background.corner_radius=5 \ background.corner_radius=0 \
background.height=24 background.height=30
# Register aerospace workspace change event # Register aerospace workspace change event
${pkgs.sketchybar}/bin/sketchybar --add event aerospace_workspace_change ${pkgs.sketchybar}/bin/sketchybar --add event aerospace_workspace_change
@@ -394,8 +397,8 @@ in
update_freq=2 \ update_freq=2 \
width=32 \ width=32 \
background.color=$ITEM_BG \ background.color=$ITEM_BG \
background.corner_radius=5 \ background.corner_radius=0 \
background.height=20 \ background.height=30 \
background.drawing=on \ background.drawing=on \
icon="$display" \ icon="$display" \
icon.padding_left=13 \ icon.padding_left=13 \
@@ -406,15 +409,6 @@ in
script="$PLUGIN_DIR/aerospace.sh $sid" script="$PLUGIN_DIR/aerospace.sh $sid"
done done
# Separator after workspaces
${pkgs.sketchybar}/bin/sketchybar --add item separator_left left \
--set separator_left \
icon="" \
label="" \
background.drawing=off \
padding_left=10 \
padding_right=10
# System monitoring modules (right side) # System monitoring modules (right side)
# Note: Items added to 'right' appear in reverse order (last added = leftmost) # Note: Items added to 'right' appear in reverse order (last added = leftmost)
# Adding in reverse to get: disk | cpu | memory | battery | volume | calendar # Adding in reverse to get: disk | cpu | memory | battery | volume | calendar
@@ -426,14 +420,6 @@ in
background.drawing=on \ background.drawing=on \
script="$PLUGIN_DIR/calendar.sh" script="$PLUGIN_DIR/calendar.sh"
${pkgs.sketchybar}/bin/sketchybar --add item separator_media right \
--set separator_media \
icon="|" \
label="" \
background.drawing=off \
padding_left=5 \
padding_right=5
${pkgs.sketchybar}/bin/sketchybar --add item volume right \ ${pkgs.sketchybar}/bin/sketchybar --add item volume right \
--set volume \ --set volume \
background.color=$ITEM_BG \ background.color=$ITEM_BG \
@@ -449,14 +435,6 @@ in
script="$PLUGIN_DIR/battery.sh" \ script="$PLUGIN_DIR/battery.sh" \
--subscribe battery system_woke power_source_change --subscribe battery system_woke power_source_change
${pkgs.sketchybar}/bin/sketchybar --add item separator_sys right \
--set separator_sys \
icon="|" \
label="" \
background.drawing=off \
padding_left=5 \
padding_right=5
${pkgs.sketchybar}/bin/sketchybar --add item memory right \ ${pkgs.sketchybar}/bin/sketchybar --add item memory right \
--set memory \ --set memory \
update_freq=5 \ update_freq=5 \
@@ -564,7 +542,7 @@ in
# Show non-focused non-empty workspaces with fixed width and inactive styling # Show non-focused non-empty workspaces with fixed width and inactive styling
if [ "$IS_FOCUSED" = "true" ]; then if [ "$IS_FOCUSED" = "true" ]; then
# Focused workspace - always show with focused styling # Focused workspace - always show with focused styling and bold font
${pkgs.sketchybar}/bin/sketchybar --set space.$WORKSPACE_NUM \ ${pkgs.sketchybar}/bin/sketchybar --set space.$WORKSPACE_NUM \
drawing=on \ drawing=on \
icon="$DISPLAY" \ icon="$DISPLAY" \
@@ -574,7 +552,8 @@ in
icon.align=center \ icon.align=center \
background.color=$FOCUSED_COLOR \ background.color=$FOCUSED_COLOR \
background.drawing=on \ background.drawing=on \
icon.color=$TEXT icon.color=$TEXT \
icon.font="Fira Code:Bold:13.0"
elif [ "$IS_EMPTY" = "true" ]; then elif [ "$IS_EMPTY" = "true" ]; then
# Empty workspace (not focused) - hide by collapsing width and clearing content # Empty workspace (not focused) - hide by collapsing width and clearing content
# Using width=0 with drawing=on so updates=when_shown continues to run the script # Using width=0 with drawing=on so updates=when_shown continues to run the script
@@ -587,7 +566,7 @@ in
icon.padding_right=0 \ icon.padding_right=0 \
background.drawing=off background.drawing=off
else else
# Non-empty workspace (not focused) - show with inactive styling # Non-empty workspace (not focused) - show with inactive styling and white text
${pkgs.sketchybar}/bin/sketchybar --set space.$WORKSPACE_NUM \ ${pkgs.sketchybar}/bin/sketchybar --set space.$WORKSPACE_NUM \
drawing=on \ drawing=on \
icon="$DISPLAY" \ icon="$DISPLAY" \
@@ -597,7 +576,8 @@ in
icon.align=center \ icon.align=center \
background.color=$ITEM_BG \ background.color=$ITEM_BG \
background.drawing=on \ background.drawing=on \
icon.color=$GRAY icon.color=$TEXT \
icon.font="Fira Code:Regular:13.0"
fi fi
''; '';
}; };