Introduction
Waybar Themes
- Waybar Theme Structure
- Creating a New Waybar Theme
Hyprland Decorations
- Decoration Configuration Structure
- Creating a New Decoration Preset
Color Schemes with Matugen and Pywal

Introduction

HyprL is designed to be highly customizable, and creating your own themes is a great way to personalize your desktop. This guide will walk you through the process of creating custom themes for Waybar, Hyprland window decorations, and integrating dynamic color schemes using Matugen and Pywal.

Waybar Themes

Customizing your Waybar theme allows you to change its appearance, layout, and module styling.

Waybar Theme Structure

Each Waybar theme in HyprL resides in its own subdirectory within ~/.config/waybar/themes/. A typical theme directory contains:

config: The main Waybar configuration file, defining modules and their order.
style.css: The CSS file that styles the Waybar elements.
config.sh (Optional): A shell script that can set theme-specific variables or perform actions when the theme is loaded.

For example, the default theme has:

~/.config/waybar/themes/default/config
~/.config/waybar/themes/default/style.css

Creating a New Waybar Theme

To create a new Waybar theme:

Create a new directory: Navigate to ~/.config/waybar/themes/ and create a new directory for your theme (e.g., my-custom-theme).
```
mkdir ~/.config/waybar/themes/my-custom-theme
```

Copy existing files: Copy the config and style.css files from an existing theme (e.g., default) into your new theme directory.

cp ~/.config/waybar/themes/default/config ~/.config/waybar/themes/my-custom-theme/
cp ~/.config/waybar/themes/default/style.css ~/.config/waybar/themes/my-custom-theme/

Customize the files:
- Edit ~/.config/waybar/themes/my-custom-theme/style.css to change colors, fonts, padding, and other visual properties using CSS.
- Edit ~/.config/waybar/themes/my-custom-theme/config to modify the modules, their order, and specific module settings.
Add to themeswitcher.sh (Optional but Recommended): For your theme to appear in the Rofi theme switcher, ensure it’s discoverable by the themeswitcher.sh script. The script automatically finds subdirectories, so simply placing your theme in ~/.config/waybar/themes/ is usually enough.
Apply your theme: You can apply your new theme using the hyprL-config tool or by running ~/.config/waybar/themeswitcher.sh and selecting your new theme.

Hyprland Decorations

Hyprland decorations control the visual aspects of your windows, such as rounding, shadows, and blur effects.

Decoration Configuration Structure

HyprL stores different decoration presets in ~/.config/hypr/conf/decorations/. Each preset is a .conf file containing a decoration { ... } block.

For example, ~/.config/hypr/conf/decorations/default.conf defines the default decoration settings.

Creating a New Decoration Preset

To create a custom decoration preset:

Create a new .conf file: Navigate to ~/.config/hypr/conf/decorations/ and create a new file (e.g., my-custom-decorations.conf).
```
touch ~/.config/hypr/conf/decorations/my-custom-decorations.conf
```

Copy and modify settings: Copy the contents of an existing decoration file (e.g., default.conf) into your new file and modify the values as desired.

decoration {
    rounding = 10 # Example: less rounding
    active_opacity = 0.95
    inactive_opacity = 0.7
    blur {
        enabled = true
        size = 8 # Example: more blur
        passes = 3
    }
    shadow {
        enabled = true
        range = 40
        color = 0x88000000 # Example: darker shadow
    }
}

Update hyprland.conf: To use your new decoration preset, you need to tell Hyprland to source it. Open ~/.config/hypr/hyprland.conf and change the line that sources decorations to point to your new file:
```
# Before:
# source = ~/.config/hypr/conf/decorations/default.conf

# After:
source = ~/.config/hypr/conf/decorations/my-custom-decorations.conf
```
Reload Hyprland: Apply the changes by reloading Hyprland:
```
hyprctl reload
```

Color Schemes with Matugen and Pywal

HyprL integrates with matugen and pywal to generate dynamic color schemes based on your wallpaper. You can customize how these colors are applied to various applications by modifying their templates.

Matugen Templates

Matugen uses templates to generate color schemes for different applications. These templates are located in ~/.config/matugen/templates/.

hyprland-colors.conf: Used to generate ~/.config/hypr/colors.conf for Hyprland.
colors.css: Used for Waybar, SwayNC, and nwg-dock-hyprland.
rofi-colors.rasi: Used for Rofi.
kitty-colors.conf: Used for Kitty terminal.

These templates use a templating language (Jinja2-like) to insert color variables generated by Matugen. For example, hyprland-colors.conf might look like:

<* for name, value in colors *>
${{name}} = rgba({{value.default.hex_stripped}}ff)
<* endfor *>

Pywal Templates

Pywal also uses templates to apply colors. HyprL uses Pywal templates located in ~/.config/wal/templates/.

colors-hyprland.conf: Another template for Hyprland colors.
colors-rofi-pywal.rasi: For Rofi.
colors-waybar.css: For Waybar.
colors-wlogout.css: For wlogout.

These templates use a different syntax, typically {{color0}}, {{background}}, etc.

Integrating New Color Schemes

To create or modify how colors are applied:

Edit existing templates: Modify the .conf, .css, or .rasi files in ~/.config/matugen/templates/ or ~/.config/wal/templates/ to adjust how colors are used in specific applications.
Run matugen or wal: After modifying a template, you need to re-run the respective tool to generate the new color files. This is often triggered automatically when you change your wallpaper via wallpaper.sh.
- matugen image /path/to/image.jpg
- wal -i /path/to/image.jpg

By understanding and modifying these templates, you can ensure that your custom color schemes are consistently applied across your entire HyprL desktop.

Table of Contents