Modify SuiteBar Color for SharePoint Communication Site

Question

I'm managing a newsletter for my department and I'm trying to modify the suitebar color for our SharePoint Online Communications site because the default blue clashes with the theme of the site (red):

I don't really have any experience with SharePoint designer or css, so I've been looking for a guide for dummies on how to do this. I've noticed a lot of articles saying to modify the settings in the Microsoft 365 admin center but i understand this will change the theme for the entire organization. I only want to change it for my specific site. It seems like the way to go is to use SharePoint Designer and modify the seattle.master file. I've found a tutorial for how to modify the text but I'm not quite sure how to change the html used in the tutorial to modify the color instead. This is the code he uses in a custom css file to change the text (sorry for the crappy quality):

Can someone guide me on how i can either modify this code to change the color instead of the text, if it's as simple as that? Or if not, help me to figure out how to change the color?

Thanks a lot in advance!

Answer 1

Add below style in Master page,

#O365_NavHeader{
    background-color:red !important;
}

.o365sx-button {
    background-color:red !important;
}
.o365sx-waffle {

    background-color:red !important;
}