How to replace Discourse <header> with my own?

You can use the already available Customization > Theme component for the purposes of adding additional header and make css changes to do the color/style matching.

I’d recommend that you don’t remove or hide the existing discourse header as it will cause a lot of problems.