SketchyBar Brightness Integration

A SketchyBar plugin that provides a brightness indicator with slider controls, mimicking the behavior of the volume indicator. Uses the brightness tool for macOS brightness control.

Features

• 🔆 Visual brightness indicator with SF Symbol icons
• 📊 Animated slider showing current brightness level
• ⌨️ F1/F2 keyboard shortcuts for brightness control
• 🖱️ Mouse interaction support (click to set brightness)
• ✨ Smooth animations matching SketchyBar's volume indicator
• 🔄 Real-time slider updates during brightness changes

Prerequisites

1. SketchyBar - Installation guide
2. skhd - Installation guide
3. brightness tool - Install from nriley/brightness

Installation

1. Install the brightness tool

# Clone and build the brightness tool
git clone https://github.com/nriley/brightness.git
cd brightness
make
# Move to ~/dev/brightness/ or update paths in the configuration
mkdir -p ~/dev/brightness
cp brightness ~/dev/brightness/

2. Clone this repository

# Clone this repository to ~/dev/
git clone <repository-url> ~/dev/sketchybar-brightness

3. Add brightness icons to your SketchyBar icons configuration

Add these lines to your ~/.config/sketchybar/icons.sh file:

# Brightness Icons
export BRIGHTNESS_100="􀆭"
export BRIGHTNESS_75="􀆬"
export BRIGHTNESS_50="􀆫"
export BRIGHTNESS_25="􀆪"
export BRIGHTNESS_0="􀆩"

4. Enable the brightness item in your SketchyBar configuration

Add this line to your ~/.config/sketchybar/sketchybarrc file:

source "$HOME/dev/sketchybar-brightness/items/brightness.sh"

5. Configure keyboard shortcuts

Add these lines to your ~/.config/skhd/skhdrc file:

# Brightness controls
f1 : ~/dev/brightness/brightness $(echo "$(~/dev/brightness/brightness -l 2>/dev/null | grep brightness | head -1 | awk -F': ' '{print $2}' | awk '{print $2}') - 0.1" | bc -l | awk '{print ($1 < 0) ? 0 : $1}') && ~/dev/sketchybar-brightness/plugins/brightness_trigger.sh
f2 : ~/dev/brightness/brightness $(echo "$(~/dev/brightness/brightness -l 2>/dev/null | grep brightness | head -1 | awk -F': ' '{print $2}' | awk '{print $2}') + 0.1" | bc -l | awk '{print ($1 > 1) ? 1 : $1}') && ~/dev/sketchybar-brightness/plugins/brightness_trigger.sh

6. Restart services

# Restart SketchyBar
brew services restart sketchybar

# Restart skhd
skhd --reload

Usage

• F1: Decrease brightness by 10%
• F2: Increase brightness by 10%
• Mouse click on slider: Set brightness to clicked position
• Mouse hover: Show slider knob for precise control

How it works

1. plugins/brightness.sh: Main plugin handling brightness change events and mouse interactions
2. plugins/brightness_trigger.sh: Helper script to read current brightness and trigger SketchyBar updates
3. items/brightness.sh: SketchyBar item configuration for the slider and icon components

The integration mimics the volume indicator behavior:

• Slider appears when brightness changes
• Shows current brightness level with appropriate icon
• Updates in real-time during brightness changes
• Automatically hides after 2 seconds of no changes

Customization

Icons

Modify the icon cases in plugins/brightness.sh to use different brightness level icons:

case $INFO in
  [8-9][0-9]|100) ICON=$BRIGHTNESS_100 ;;
  [6-7][0-9]) ICON=$BRIGHTNESS_75 ;;
  [3-5][0-9]) ICON=$BRIGHTNESS_50 ;;
  [1-2][0-9]) ICON=$BRIGHTNESS_25 ;;
  0) ICON=$BRIGHTNESS_0 ;;
  *) ICON=$BRIGHTNESS_100 ;;
esac

Slider appearance

Modify the slider styling in items/brightness.sh:

brightness_slider=(
  slider.highlight_color=$BLUE
  slider.background.height=5
  slider.background.corner_radius=3
  slider.background.color=$BACKGROUND_2
  # ... other styling options
)

Keyboard shortcuts

Change the key bindings in your skhdrc file to use different keys or modifiers.

Troubleshooting

Brightness tool not found

Ensure the brightness tool is installed and the path in the skhd configuration matches your installation location.

Slider not appearing

1. Check that SketchyBar is running: brew services list | grep sketchybar
2. Verify the brightness item is loaded in your SketchyBar configuration
3. Test manually: ~/dev/sketchybar-brightness/plugins/brightness_trigger.sh

F1/F2 keys not working

1. Check that skhd is running: ps aux | grep skhd
2. Reload skhd configuration: skhd --reload
3. Verify the brightness tool path in your skhd configuration

Multiple displays

The brightness tool works with built-in displays. For external displays, you may need to modify the brightness parsing logic in brightness_trigger.sh.

License

MIT License - feel free to modify and distribute.

Credits

• SketchyBar by FelixKratz
• brightness tool by Nicholas Riley
• skhd by koekeishiya