Styling nwg-dock-hyprland with pywal

Introduction

This guide shows how to use pywal to theme your nwg-dock-hyprland dock, creating a consistent look with your wallpaper.

Prerequisites

Make sure these are installed:

Install Dependencies

1. pywal:

   pip install pywal
   

2. nwg-dock-hyprland: (Install according to your distro, e.g., Arch)

   yay -S nwg-dock-hyprland  # For Arch-based
   

Theme Generation

Use pywal to set up colors.

Generate a Color Scheme

1. Run wal:

   wal -i /path/to/your/wallpaper.jpg  # Replace with your wallpaper
   

Custom CSS

Create a CSS template for the dock.

Create CSS Template

1. Create the template:

   mkdir -p ~/.config/wal/templates/
   touch ~/.config/wal/templates/nwg-dock.css
   

2. Add this CSS content:

   * {
       background-color: {background};
   }
   
   button {
       background: {background};
       border-style: none;
       box-shadow: none;
   }
   
   button:hover {
       background-color: {color1};
   }
   
   box#box-dock {
       background-color: rgba({background.rgb}, 0.85);
       border-radius: 16px;
       padding: 6px;
       margin: 6px;
       border: 2px solid {color1};
   }
   
   /* Add more custom styling as needed */
   

Hyprland and Scripting

Configure Hyprland and create a script.

Hyprland Configuration

1. Add to your config (hyprland.conf or autostart):

   exec-once = wal -R
   

Create the Update Script

1. Create the script:

   mkdir -p ~/.local/bin/
   touch ~/.local/bin/update-dock-colors.sh
   chmod +x ~/.local/bin/update-dock-colors.sh
   

2. Add script content:

   #!/bin/bash
   
   wal -i "$1" -n
   cat ~/.cache/wal/colors.css > ~/.config/nwg-dock-hyprland/style.css
   cat ~/.cache/wal/nwg-dock.css >> ~/.config/nwg-dock-hyprland/style.css
   
   killall nwg-dock-hyprland
   nwg-dock-hyprland &
   

Using the Script

1. Run the script:

   ~/.local/bin/update-dock-colors.sh /path/to/wallpaper.jpg # Replace with your wallpaper
   

Conclusion

Now, your dock is themed by pywal! Run the script whenever you change your wallpaper.