My waybar config

config

{
    "layer": "top", 
    "position": "top",
    // Choose the order of the modules
    "modules-left": [
      //  "hyprland/workspaces",
        "niri/workspaces",

    	"custom/right-arrow-dark"
    ],
    "modules-center": [
        "custom/left-arrow-dark",
        "custom/left-arrow-light",
       // "hyprland/window",
        "niri/window"


    ],
    "modules-right": [

		"custom/left-arrow-dark",

        "pulseaudio", 
        "custom/left-arrow-light",

        "network", 
        "custom/left-arrow-dark",

        "cpu", 

        "custom/left-arrow-light",
        "custom/left-arrow-dark",
        "memory", 
        "custom/left-arrow-light",

        "temperature", 

		"custom/left-arrow-dark",
        "battery", 
        "custom/left-arrow-light",

        "clock", 
		"custom/left-arrow-dark",
        "custom/notification",
        "custom/left-arrow-light",
        "tray"
        ],
    // Modules configuration
  "custom/notification": {
    "tooltip": false,
    "spacing": 10,
    "format": " {icon} ",
    "format-icons": {
      "notification": "<span foreground='red'><sup></sup></span>",
      "none": "",
      "dnd-notification": "<span foreground='red'><sup></sup></span>",
      "dnd-none": "",
      "inhibited-notification": "<span foreground='red'><sup></sup></span>",
      "inhibited-none": "",
      "dnd-inhibited-notification": "<span foreground='red'><sup></sup></span>",
      "dnd-inhibited-none": ""
    },
    "return-type": "json",
    "exec-if": "which swaync-client",
    "exec": "swaync-client -swb",
    "on-click": "swaync-client -t -sw",
    "on-click-right": "swaync-client -d -sw",
    "escape": true
    },
    "niri/workspaces": {
            "format": "{icon} {name}",
            "format-icons": {
                // Named workspaces
                // (you need to configure them in niri)
                "code": "",
                "notes": "",
                "browser": "",
                "chat": "<b></b>",
                "terminal": "", 
                "netflix": "󰗃"

            }
    },
    "niri/window": {

    },
    "hyprland/window": {
        "max-length": 200,
        "separate-outputs": true,
        "format": "{}",
        "rewrite": {
            "(.*) — Mozilla Firefox": "🌎 $1",
            "(.*) - fish": "> [$1]"
        },
    },    
    "hyprland/workspaces": {
        "format": "{name} {icon}",
        "on-click": "activate",
        "format-icons": {
          "urgent": "",
          "active": "",
          "default": ""
		  // "default": ""
        },
        "on-scroll-up": "hyprctl dispatch workspace e+1",
        "on-scroll-down": "hyprctl dispatch workspace e-1",
        "sort-by-number": true
      },
    "idle_inhibitor": {
        "format": "{icon}",
        "format-icons": {
            "activated": "",
            "deactivated": ""
        }
    },
    "tray": {
        // "icon-size": 21,
        "spacing": 10
    },
    "clock": {
        "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
        "format-alt": "{:%d/%m/%Y}"
    },
    "cpu": {
        "interval": 5,
        "format": "{usage}% "
    },
    "memory": {
        "interval": 5,
        "format": "{}% "
    },
    "temperature": {
        // "thermal-zone": 2,
        "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
        "critical-threshold": 80,
        "format-critical": "{icon} {temperatureC}°C",
        "format": "{icon} {temperatureC}°C",
        "format-icons": ["❄️", "", "🔥"]
    },
    "battery": {
        "states": {
             "good": 95,
            "warning": 30,
            "critical": 15
        },
        "format": "{capacity}% {icon}",
        "format-charging": "{capacity}% ",
        "format-plugged": "{capacity}% ",
        "format-alt": "{time} {icon}",
        // "format-good": "", // An empty format will hide the module
        // "format-full": "",
        "format-icons": ["", "", "", "", ""]
    },
    "network": {
        // "interface": "wlp2*", // (Optional) To force the use of this interface
        "format-wifi": "{signalStrength}% ",
        "format-ethernet": "{ipaddr}/{cidr} ",
        "interval": 10,
        "tooltip-format-wifi": "{essid} using {gwaddr}",
        "tooltip-format": "{ifname} via {gwaddr} ",
        "format-linked": "{ifname} (No IP) ",
        "format-disconnected": "Disconnected ⚠",
        "format-alt": "{ifname}: {ipaddr}/{cidr}"
    },
    "pulseaudio": {
        // "scroll-step": 1, // %, can be a float
        "format": "{volume}% {icon} {format_source}",
        "format-bluetooth": "{volume}% {icon}  {format_source}",
        "format-bluetooth-muted": " {icon}  {format_source}",
        "format-muted": " {format_source}",
        "format-source": "{volume}% ",
        "format-source-muted": "",
        "format-icons": {
            "headphone": "",
            "hands-free": "",
            "headset": "",
            "phone": "",
            "portable": "",
            "car": "",
            "default": ["", "", ""]
        },
        "on-click": "pavucontrol"
    },
    "custom/left-arrow-dark": {
		"format": "",
		"tooltip": false
	},
	"custom/left-arrow-light": {
		"format": "",
		"tooltip": false
	},
	"custom/arrow-tray": {
		"format": "",
		"tooltip": false
	},
	"custom/right-arrow-dark": {
		"format": "",
		"tooltip": false
	},
	"custom/right-arrow-light": {
		"format": "",
		"tooltip": false
	},

}

styles.css

* {
	font-size: 14px;
	font-family: monospace;
}

window#waybar {
	background: #292b2e;
	color: #fdf6e3;
}

#custom-right-arrow-dark,
#custom-left-arrow-dark {
	color: #1a1a1a;
}
#custom-right-arrow-light,
#custom-left-arrow-light {
	color: #292b2e;
	background: #1a1a1a;
}

#workspaces,
#clock.1,
#clock.2,
#clock.3,
#pulseaudio,
#memory,
#cpu,
#battery,
#disk,
#custom-notification {
	background: #1a1a1a;
}

#workspaces button {
	padding: 0 2px;
	color: #555;

}
#workspaces button.focused {
	color: #268bd2;
}

#workspaces button.active {
	color: #fdf6e3;
}

#workspaces button.urgent {
	color: #ff0000;
}

#workspaces button:hover {
	box-shadow: inherit;
	text-shadow: inherit;
}
#workspaces button:hover {
	background: #1a1a1a;
	border: #1a1a1a;
	padding: 0 3px;
}

#pulseaudio {
	color: #268bd2;
}
#memory {
	color: #2aa198;
}
#cpu {
	color: #6c71c4;
}
#battery {
	color: #859900;
}
#disk {
	color: #b58900;
}

#clock,
#pulseaudio,
#memory,
#cpu,
#battery,
#network,
#disk {
	padding: 0 15 0 10px;
}