Configure the Header Layout

The supported header layouts:

• standard: by default, a layout with the full size site logo and content split onto 2 lines
• extended: the largest layout with content split into 2 content areas with site logo, site title, and an optional background image separate from the other contents below.
  The Ghost Publication cover will be used as the optional background image.

In accordance with the main color of your background image, you should define the color of the title manually, regardless of the selected theme (dark/light).

<style type="text/css">
    @media (min-width: 639px) {
        #siteHeader:not(.shyHeader) .mainHeader .titleAndnavSiteWrapper .siteTitleSubcell a.title {
            color: #CDCECF;
        }
    }
</style>

In the case of not extended layout, the navivation and actions should be changed manually to be visible regardless of the selected theme (dark/light).

<style type="text/css">
    @media (min-width: 639px) {
        #siteHeader:not(.shyHeader) .mainHeader .titleAndnavSiteWrapper .siteTitleSubcell a.title,
        #siteHeader:not(.shyHeader) .ms-HorizontalNavItems .nav li a,
        #siteHeader:not(.shyHeader) .actionsSubcell a {
            color: #CDCECF;
        }
    }
</style>

Example

<script type="text/javascript">
  var fluent_headerLayout = 'extended';
</script>

Use the extended header layout.