SharePoint Online-Communication Site-Not able to achieve this color scheme

Question

I am trying to achieve the color scheme described below. The modern "Change the Look" allows one to customize colors but doesn't allow us to add a background Image which the classic "Change the look" supports. The Classic "Change the Look" doesn't have a color palette with a white Header and a dark body. I tried following this blog https://blog.pixelmill.com/3348/changing-colors-modern-site/ about adding a custom Theme via Powershell, but it doesn't allow you to add an Image.

As mentioned in the diagram, I would also like to add a layer of color over the Top Nav.

How can I achieve the color scheme mentioned below?

Answer 1

If you only change the color of the modern site pages, we can add a custom theme via PowerShell to achieve it.

If you want to add a background Image, we have to use SPFx extension to injects CSS to achieve it in modern page.

Refer to: react-application-injectcss

Or use react script editor with custom CSS style to achieve it.