My system:

My waybar dotfiles. You can create/edit these files with whatever text editor you like, you don't need the terminal. Please note that for some reason Lemmy screws up the "&" when pasting code... Please replace all "&" with "&".

~/.config/waybar/config (note: remove custom/gpu-util if you don't have a nvidia video card, or change the command to whatever is the AMD equivalent)

{
    "layer": "top",
    "position": "top",
    "modules-left": [
        "hyprland/workspaces"
    ],
    "modules-center": [
        "hyprland/window"
    ],
    "modules-right": [
        "cpu",
        "custom/gpu-util",
        "network#wifi",
        "pulseaudio",
        "clock",
        "tray",
        "custom/notification"
    ],
    "hyprland/workspaces": {
        "format": "{id}",
        "on-click": "activate",
        "sort-by": "number",
        "persistent-workspaces": {
            "*": 3
        },
        "all-outputs": false
    },
    "clock": {
        "format": "{:<span></span> %I:%M %p, %a %d}",
        "format-alt": "{:📅 %B %d, %Y}",
        "actions": {
            "on-click": "mode"
        },
        "tooltip": false
    },
    "cpu": {
        "interval": 5,
        "format": "<span>󰍛</span> {usage:2}%",
        "tooltip": false
    },
    "custom/gpu-util": {
        "exec": "echo $(nvidia-smi --query-gpu=utilization.gpu --format=csv,noheader,nounits)",
        "format": "<span>󰘚</span> {}%",
        "interval": 5,
        "tooltip": false
    },
    "network#wifi": {
        "interval": 1,
        "interface": "wlan0",
        "format-icons": [
            "󰤯",
            "󰤟",
            "󰤢",
            "󰤥",
            "󰤨"
        ],
        "format-wifi": "<span>{icon}</span> {signalStrength}%",
        "format-ethernet": "󰈀",
        "format-disconnected": "<span>󰤮 </span>",
        "tooltip": true,
        "tooltip-format-wifi": "<span>{icon}</span> {essid} ({signalStrength}%)"
    },
    "tray": {
        "spacing": 12
    },
    "pulseaudio": {
        "format": "<span>{icon}</span> {volume}%  {format_source}",
        "format-bluetooth": "<span>{icon}</span> {volume}%  {format_source}",
        "format-bluetooth-muted": "<span>󰖁</span>  {format_source}",
        "format-muted": "<span>󰖁</span>  {format_source}",
        "format-source": "<span></span> {volume}%",
        "format-source-muted": "<span></span>",
        "format-icons": {
            "headphone": "",
            "phone": "",
            "portable": "",
            "default": [
                "",
                "",
                ""
            ]
        },
        "on-click": "pavucontrol",
        "input": true
    },
    "custom/notification": {
        "tooltip": false,
        "format": "{icon} {}",
        "format-icons": {
            "notification": "<span></span><span><sup></sup></span>",
            "none": "",
            "dnd-notification": "<span></span><span><sup></sup></span>",
            "dnd-none": "",
            "inhibited-notification": "<span></span><span><sup></sup></span>",
            "inhibited-none": "",
            "dnd-inhibited-notification": "<span></span><span><sup></sup></span>",
            "dnd-inhibited-none": ""
        },
        "return-type": "json",
        "exec-if": "which swaync-client",
        "exec": "swaync-client -swb",
        "on-click": "sleep 0.1 &amp;&amp; swaync-client -t -sw",
        "escape": true
    },
    "hyprland/window": {
        "separate-outputs": true,
        "max-length": 100
    }
}

~/.config/waybar/style.css

/**
 * Global Colors
 */
@define-color bg #434C5E;
@define-color bg_lighter #546484;
@define-color fg #D8DEE9;
@define-color red_warn #BF616A;


/**
 * Global style
 */
* {
	font-size: 14px;
	font-family: JetBrains Mono Nerd Font, Font Awesome, sans-serif;
    font-weight: bold;
    border-radius: 5px;
    color: @fg;
    border: 0px;
}


/**
 *  Bar
 */
#waybar {
	background-color: rgba(46, 52, 64, 0.6);
    border-radius: 0;
}

/**
 * Default module styles
 */
#window,
#custom-packages,
#memory,
#clock,
#custom-gpu-util,
#cpu,
#gpu-util
#disk,
#battery,
#network,
#tray,
#pulseaudio,
#custom-notification {
    background: @bg;
    margin: 5px;
    padding: 2px 10px;
}


/**
 * WORKSPACES module specific style
 */
#workspaces {
	background: @bg;
    margin: 5px 3px 5px 12px;
    padding: 0px 2px;
    font-style: normal;
}

#workspaces button {
    padding: 0px 8px;
    margin: 4px;
    background-color: @bg_lighter;
    opacity: 0.7;
    transition: all 0.3s ease-in-out;
}

#workspaces button.active {
    background: @red_warn;
    min-width: 40px;
    transition: all 0.3s ease-in-out;
    opacity: 1.0;
}

#workspaces button:hover {
    background: @red_warn;
    opacity: 1.0;
}


/**
 * Tooltip style
 */
tooltip {
  background: @bg;
  border: 1px solid @bg_lighter;
  opacity: 0.9;
}

tooltip label {
  color: @fg;
}

Thanks a lot for your helpful comment! Looks very clean!

Is it possible to install hyprland side by side with GNOME so that I can choose in the login phase which I want to use? (Arch)